Förstå Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) är en samling formateringsregler som styr utseendet för innehåll på en webbsida. När CSS-format används för att formatera en sida separeras innehåll och presentation. Innehållet på sidan – HTML-koden – finns i HTML-filen och CSS-reglerna som anger hur koden ska presenteras finns i en annan fil (en extern formatmall) eller i en annan del av HTML-dokumentet (vanligen i huvudet). Genom att innehåll separeras från presentation blir det mycket lättare att bibehålla utseendet på platsen centralt, eftersom du inte behöver uppdatera varenda egenskap på varenda sida varje gång du vill göra en ändring. Att separera innehåll från presentation innebär också enklare och renare HTML-kod, vilket ger snabbare inläsning i webbläsaren och förenklar navigeringen för personer som behöver använda hjälpmedel (till exempel skärmläsare).

CSS ger dig större flexibilitet och mer kontroll över exakt hur sidan ser ut. Med CSS kan du styra många olika textegenskaper, som specifika typsnitt och typstorlekar, fetstil, kursiv stil, understrykning och textskuggor, textfärg och bakgrundsfärg, länkfärg och länkunderstrykning samt mycket annat. Om du använder CSS för att styra typsnitten kan du också försäkra dig om att sidans layout och utseende blir konsekvent i olika webbläsare.

Utöver textformatering kan du också använda CSS för att styra format och placering av blocknivåelement på en webbsida. Ett blocknivåelement är en fristående innehållsdel som vanligen avgränsas med en ny rad i HTML-koden och som är visuellt formaterad som ett block. Exempelvis skapas blocknivåelement på en webbsida av h1-taggar, p-taggar och div-taggar. Du kan ange marginaler och kantlinjer för blocknivåelement, placera dem på en specifik plats, lägga till bakgrundsfärg i dem, figuranpassa text kring dem och så vidare. I princip kan man säga att utformningen av sidor med CSS sker genom hantering av blocknivåelement.

Om CSS-regler

En CSS-formateringsregel består av två delar – väljaren och deklarationen (eller, som i de flesta fall, ett block med deklarationer). Väljaren är ett villkor (till exempel p, h1, ett klassnamn eller ett id) som anger det formaterade elementet och deklarationsblocket anger vilka formategenskaperna är. I följande exempel är h1 väljare och allt som står inom klammerparenteserna ({}) är deklarationsblocket:

En enskild deklaration består av två delar: egenskapen (till exempel font-family) och värdet (till exempel Helvetica). I föregående CSS-regel har ett visst format skapats för h1-taggar: texten för alla h1-taggar som är kopplade till det här formatet använder typstorleken 16 pixel, typsnittet Helvetica och fetstil.

Formatet (som kommer från en regel eller en samling regler) finns på en plats som är separat från den text det formaterar – vanligen i en extern formatmall eller i ett HTML-dokumenthuvud. Följaktligen kan en regel för h1-taggar användas i flera taggar samtidigt (och om en extern formatmall används kan regeln användas i flera taggar samtidigt på flera olika sidor). Med CSS blir det på så sätt väldigt lätt att göra uppdateringar. När du uppdaterar en CSS-regel på en plats, blir formateringen för alla element som använder det definierade formatet automatiskt uppdaterade till det nya formatet.

Du kan definiera följande typer av format i Dreamweaver:

• Klassformat gör att du kan använda formategenskaper i alla element på sidan.

• HTML-taggformat definierar om formateringen för en viss tagg, till exempel h1. När du skapar eller ändrar ett CSS-format för h1-taggen uppdateras all text som är formaterad med h1-taggen omedelbart.

• Avancerade format definierar om formateringen för en viss kombination av element eller för andra väljarformer som tillåts av CSS (exempelvis används väljaren td h2 varje gång en h2-rubrik finns inuti en tabellcell). Avancerade format kan också definiera om formateringen för taggar som innehåller ett specifikt id-attribut (exempelvis används de format som definieras med #mittFormat i alla taggar som innehåller attribut-/värdeparet id="mittFormat").

CSS-regler kan finnas på följande platser:

Samlingar med CSS-regler som sparats i en separat, extern CSS-fil (.css) (inte en HTML-fil). Den här filen är länkad till en eller flera sidor på en webbplats med hjälp av en länk eller en @import-regel i ett dokumenthuvud.

Samlingar med CSS-regler som finns i en style-tagg i ett HTML-dokumenthuvud.

Definieras inom specifika instanser av taggar i ett HTML-dokument. (Du rekommenderas inte att använda infogade format.)

I Dreamweaver kan format som har definierats i befintliga dokument identifieras så länge de stämmer överens med riktlinjerna för CSS-format. I Dreamweaver återges också de flesta format som används direkt i designvyn. (Om du däremot förhandsvisar dokumentet i ett webbläsarfönster får du den mest korrekta återgivningen av sidan så som den kommer att visas.) En del CSS-format återges på olika sätt i Microsoft Internet Explorer, Netscape, Opera, Apple Safari samt andra webbläsare och en del stöds ännu inte i någon webbläsare.

Om formatmallar

Termen överlappande hänvisar till sättet på vilket en webbläsare visar format för specifika element på en webbsida. Tre olika källor är ansvariga för formaten som du ser på en webbsida: formatmallen som skapades av författaren till sidan, användarens anpassade formatval (om sådana finns) och standardformaten för själva webbläsaren. I föregående avsnitt beskrivs hur du skapar format för en webbsida som författare till både webbsidan och formatmallen som kopplats till den sidan. Men webbläsare har också sina egna standardformatmallar som styr återgivningen av webbsidor och utöver det kan användare anpassa sina webbläsare genom att göra val som justerar visningen av webbsidor. Det slutliga utseendet på webbsidan är resultatet av reglerna för alla tre källorna tillsammans (eller ”överlappande” för att återge webbsidan på bästa sätt.

En vanlig tagg, stycketaggen eller <p>-taggen, visar konceptet. Som standard innehåller webbläsare formatmallar som anger typsnittet och typsnittsstorleken för stycketexten (d.v.s. texten som hamnar mellan <p>-taggarna i HTML-koden). I Internet Explorer visas t.ex. all brödtext, inklusive stycketext, i Times New Roman, med mellantypsnitt som standard.

Som författare till en webbsida kan du dock skapa en formatmall som åsidosätter webbläsarens standardformat för typsnittet och typsnittsstorleken i stycken. Du kan t.ex. skapa följande regel i formatmallen:

När en användare läser in sidan åsidosätter typsnittet och teckenstorleken för stycket som du angivit standardtextinställningarna för stycken i webbläsaren.

Användare kan göra val för att anpassa visningen i webbläsaren på bästa sätt för dem. I Internet Explorer kan t.ex. användare välja Visa > Textstorlek > Största för att utöka sidans typsnitt till en mer läsbar storlek om de tror att typsnittet är för litet. Slutligen (åtminstone i detta fall) åsidosätter användarens val både webbläsarens standardformat för typsnitt i stycken och styckeformaten som skapats av författaren till webbsidan.

Arv är en annan viktig del av överlappandet. Egenskaperna för de flesta element på en webbsida ärvs. T.ex. ärver stycketaggar vissa egenskaper från body-taggarna, span-taggar ärver vissa egenskaper från stycketaggar, osv. Du kan därmed skapa följande regel i formatmallen:

All stycketext på webbsidan (samt texten som ärver egenskaper från stycketaggen) kommer att bli Arial och kursiv eftersom stycketaggen ärver dessa egenskaper från body-taggen. Du kan dock specificera reglerna ännu mer och skapa format som åsidosätter standardformeln för arv. Om du t.ex. skapar följande regler i formatmallen:

All brödtext kommer att vara i Arial och kursiv förutom stycket (och dess ärvda) text, som kommer att visas i Courier med normal stil (ej kursiv). Tekniskt sett ärver stycketaggen först egenskaperna som är angivna för body-taggen, men ignorerar sedan de egenskaperna eftersom den har egna angivna egenskaper. Med andra ord orsakar det direkta tillägget av en egenskap till en tagg alltid att standardformeln för arv åsidosätts, medan sidelementen i allmänhet ärver egenskaper från ovanstående.

Kombinationen av alla faktorer som nämns ovan, samt andra faktorer som CSS-specificitet (ett system som ger en annan betydelse till vissa typer av CSS-regler) och ordningen på CSS-regler, skapar slutligen ett komplext överlappande där objekt med högre prioritet åsidosätter egenskaper med lägre prioritet. Mer information om reglerna som styr överlappandet, arvet och specificiteten finns på www.w3.org/TR/CSS2/cascade.html.

Om textformatering och CSS

Text formateras med CSS (Cascading Style Sheets) i Dreamweaver, om inget annat anges. De format du tillämpar på text med hjälp av egenskapskontrollen eller menykommandona skapar CSS-regler som bäddas in i det aktuella dokumenthuvudet.

Du kan också använda CSS Designer när du vill skapa och redigera CSS-regler och -egenskaper. CSS Designer är en mycket kraftfullare redigerare än egenskapskontrollen och visar alla CSS-regler som har definierats för det aktuella dokumentet, oavsett om reglerna är inbäddade i dokumenthuvudet eller finns i en extern formatmall. Adobe rekommenderar att du använder CSS Designer (i stället för egenskapskontrollen) som primärt verktyg för att skapa och redigera CSS-formatmallen. Om du gör detta blir koden renare och lättare att underhålla.

Mer information om CSS Designer finns i Utforma sidor med hjälp av CSS Designer.

Förutom de format och formatmallar du skapar, kan du använda formatmallar som medföljer Dreamweaver när du vill använda format i dokumenten.

En självstudiekurs om hur du formaterar text med CSS finns på www.adobe.com/go/vid0153_se.

Om CSS-egenskaper i kort notation

Tack vare CSS-specifikationen går det att skapa format med hjälp av en förkortad syntax som kallas CSS i kort notation. CSS i kort notation innebär att du kan ange värden för flera egenskaper med en enda deklaration. Till exempel kan du med egenskapen font ange egenskaperna font-style, font-variant, font-weight, font-size, line-height och font-family på en enda rad.

Viktigt att notera när CSS i kort notation används är att de värden som utelämnas från en CSS-egenskap i kort notation tilldelas standardvärdet. Detta kan innebära att sidor visas felaktigt när två eller flera CSS-regler tilldelas samma tagg.

Till exempel, i h1-regeln som visas nedan används vanlig CSS-syntax. Notera att egenskaperna font-variant, font-stretch, font-size-adjust och font-style har tilldelats standardvärden.

Omskriven som en enskild egenskap med kort notation kan samma regel se ut enligt följande:

När kort notation används tilldelas utelämnade värden automatiskt standardvärden. Alltså utelämnas taggarna font-variant, font-style, font-stretch och font-size-adjust i föregående exempel på kort notation.

Om du har definierat format på mer än en plats (till exempel både inbäddade i en HTML-sida och importerade från en extern formatmall) i både den korta och långa formen av CSS-syntaxen, ska du tänka på att utelämnade egenskaper i en kort notationsregel kan åsidosätta (eller överlappa) egenskaper som har angetts explicit i en annan regel.

Av den här anledningen används den långa formen av CSS-syntaxen som standard i Dreamweaver. Detta förhindrar eventuella problem som orsakas av att en kort notationsregel åsidosätter en vanlig regel. Om du öppnar en webbsida i Dreamweaver som har kodats med CSS i kort notation, ska du tänka på att alla nya CSS-regler skapas med den långa formen av CSS-syntaxen i Dreamweaver. Du kan ange hur CSS-regler ska skapas och redigeras i Dreamweaver genom att ändra inställningarna för CSS-redigering i kategorin CSS-format i dialogrutan Inställningar (Redigera > Inställningar i Windows eller Dreamweaver > Inställningar på en Macintosh-dator).

Dreamweaver och CSS

Du kan arbeta med CSS i Dreamweaver på flera olika sätt:

• Du kan använda CSS Designer för att skapa din CSS med minimalt med kodning. Mer information finns i Utforma sidor med hjälp av CSS Designer. 
• Du kan också koda din CSS manuellt. Mer information om kodningsfunktioner i Dreamweaver finns i Kodningsmiljö i Dreamweaver.
• Om du föredrar att arbeta med Sass-, Scss- eller Less-filer kan du koda filerna med önskad syntax och använda i Dreamweaver. Mer information finns i CSS-preprocessorer.