Det här ämnet förklarar grundläggande CSS-begrepp som CSS-regler, väljare, arv och mycket mer. Lär dig även hur du kan koppla CSS till dina webbsidor i Dreamweaver.
Om Cascading Style Sheets
Cascading Style Sheets (CSS) är en samling formateringsregler som styr utseendet på innehåll på en webbsida. Att använda CSS-stilar för att formatera en sida separerar innehåll från presentation. Innehållet på din sida—HTML-koden—finns i HTML-filen, och CSS-reglerna som definierar presentationen av koden finns i en annan fil (en extern stilmall) eller i en annan del av HTML-dokumentet (vanligtvis head-avsnittet).Att separera innehåll från presentation gör det mycket enklare att underhålla utseendet på din webbplats från en central plats eftersom du inte behöver uppdatera varje egenskap på varje sida varje gång du vill göra en ändring. Att separera innehåll från presentation resulterar också i enklare och renare HTML-kod, vilket ger kortare laddningstider för webbläsaren och förenklar navigering för personer med tillgänglighetsproblem (till exempel de som använder skärmläsare).
CSS ger dig stor flexibilitet och kontroll över det exakta utseendet på din sida. Med CSS kan du kontrollera många textegenskaper inklusive specifika teckensnitt och teckenstorlekar; fetstil, kursivering, understrykning och textskuggor; textfärg och bakgrundsfärg; länkfärg och länkunderstrykning; och mycket mer.Genom att använda CSS för att kontrollera dina teckensnitt kan du också säkerställa en mer konsekvent behandling av din sidlayout och utseende i flera webbläsare.
Förutom textformatering kan du använda CSS för att kontrollera formatet och positioneringen av blocknivåelement på en webbsida. Ett blocknivåelement är en fristående del av innehåll, vanligtvis separerat av en ny rad i HTML:en och visuellt formaterat som ett block. Till exempel skapar h1-taggar, p-taggar och div-taggar alla blocknivåelement på en webbsida. Du kan ange marginaler och kantlinjer för blocknivåelement, positionera dem på en specifik plats, lägga till bakgrundsfärg på dem, låta text flöda runt dem och så vidare.Att manipulera blocknivåelement är i grund och botten sättet du layoutar sidor med CSS.
Om CSS-regler
En CSS-formateringsregel består av två delar – väljaren och deklarationen (eller i de flesta fall ett block med deklarationer).Väljaren är en term (som p, h1,ett klassnamn eller ett id) som identifierar det formaterade elementet, och deklarationsblocket definierar vad stilegenskaperna är. I följande exempel är h1 väljaren, och allt som faller mellan klamrarna ({}) är deklarationsblocket:
h1 {
font-size: 16 pixel;
font-family: Helvetica;
font-weight:bold;
}
En individuell deklaration består av två delar, egenskapen (som font-family) och värdet (som Helvetica). I den tidigare CSS-regeln har en särskild stil skapats för h1-taggar: texten för alla h1-taggar länkade till denna stil kommer att vara 16 pixel i storlek, Helvetica-teckensnitt och fet.
Stilen (som kommer från en regel, eller en samling regler) finns på en plats separat från den faktiska text den formaterar—vanligtvis i en extern stilmall, eller i head-delen av ett HTML-dokument. Således kan en regel för h1-taggar tillämpas på många taggar på en gång (och när det gäller externa stilmallar kan regeln tillämpas på många taggar på en gång på många olika sidor). På detta sätt ger CSS extremt enkla uppdateringsmöjligheter. När du uppdaterar en CSS-regel på ett ställe uppdateras formateringen av alla element som använder den definierade stilen automatiskt till den nya stilen.
Du kan definiera följande typer av format i Dreamweaver:
Klassstilar låter dig tillämpa stilegenskaper på vilket element eller vilka element som helst på sidan.
HTML-taggstilar omdefinierar formateringen för en viss tagg, såsom h1. När du skapar eller ändrar en CSS-stil för taggen h1 uppdateras all text formaterad med taggen h1 omedelbart.
Avancerade stilar omdefinierar formateringen för en viss kombination av element, eller för andra selektorformer som tillåts av CSS (till exempel gäller selektorn td h2 när en h2-rubrik visas inuti en tabellcell.) Avancerade stilar kan också omdefiniera formateringen för taggar som innehåller ett specifikt id-attribut (till exempel gäller stilarna definierade av #myStyle för alla taggar som innehåller attribut-värdeparet id="myStyle").
CSS-regler kan finnas på följande platser:
Externa CSS-formatmallar
Samlingar av CSS-regler lagrade i en separat, extern CSS-fil (.css) (inte en HTML-fil). Denna fil är länkad till en eller flera sidor på en webbsida med hjälp av en länk eller en @import-regel i huvudsektionen av ett dokument.
Interna (eller inbäddade) CSS-formatmallar
Samlingar av CSS-regler inkluderade i en style-tagg i rubrikdelen av ett HTML-dokument.
Infogade format
Definieras inom specifika instanser av taggar i ett HTML-dokument. (Du rekommenderas inte att använda infogade format.)
Dreamweaver känner igen stilar definierade i befintliga dokument så länge de följer CSS-stilriktlinjer. Dreamweaver renderar också de flesta tillämpade stilar direkt i designvyn. (Förhandsgranskning av dokumentet i ett webbläsarfönster ger dig dock den mest exakta "live"-renderingen av sidan.) Vissa CSS-stilar renderas annorlunda i Microsoft Internet Explorer, Netscape, Opera, Apple Safari eller andra webbläsare, och vissa stöds inte för närvarande av någon webbläsare.
Om formatmallar
Termen cascading hänvisar till hur en webbläsare slutligen visar stilar för specifika element på en webbsida. Tre olika källor ansvarar för stilarna du ser på en webbsida: stilmallen som skapats av sidans författare, användarens anpassade stilval (om några finns) och webbläsarens egna standardstilar.De tidigare ämnena beskriver hur du skapar stilar för en webbsida som författare till både webbsidan och formatmallen som är kopplad till den sidan.Men webbläsare har också sina egna standardstilmallar som styr rendering 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å en webbsida är resultatet av reglerna från alla dessa tre källor som kommer samman (eller "cascading") för att rendera webbsidan på ett optimalt sätt.
En vanlig tagg—stycketaggen, eller <p>-taggen—illustrerar konceptet. Som standard kommer webbläsare med stillistor som definierar teckensnittet och teckenstorleken för stycketext (det vill säga text som finns mellan <p>-taggar i HTML-koden). I Internet Explorer visas till exempel all brödtext, inklusive stycketext, i Times New Roman, Medium teckensnitt som standard.
Som författare till en webbsida kan du dock skapa en stillista som åsidosätter webbläsarens standardstil för styckens teckensnitt och teckenstorlek. Du kan till exempel skapa följande regel i din stillista:
p {
font-family: Arial;
font-size: small;
}
När en användare laddar sidan åsidosätter teckensnitt- och teckenstorleksinställningarna som du som framställare har angett webbläsarens standardinställningar för stycketext.
Användare kan göra val för att anpassa webbläsarvisningen på ett optimalt sätt för sitt eget bruk. I Internet Explorer kan användaren till exempel välja Visa > Textstorlek > Störst för att förstora sidans teckensnitt till en mer läsbar storlek om de tycker att teckensnittet är för litet.Till slut (åtminstone i det här fallet) åsidosätter användarens val både webbläsarens standardformat för stycketeckenstorlek och de styckeformat som framställaren av webbsidan skapat.
Arv är en annan viktig del av överlappandet. Egenskaper för de flesta element på en webbsida ärvs – till exempel ärver stycketaggar vissa egenskaper från body-taggar, span-taggar ärver vissa egenskaper från stycketaggar, och så vidare.Om du skapar följande regel i din stilmall:
body {
font-family: Arial;
font-style: italic;
}
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:
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
All brödtext kommer att vara Arial och kursiv utom stycketext (och dess ärvda text), som kommer att visas som Courier normal (icke-kursiv).Tekniskt sett ärver paragraftaggen först de egenskaper som är inställda för body-taggen, men ignorerar sedan dessa egenskaper eftersom den har egna definierade egenskaper. Med andra ord, medan sidelement generellt ärver egenskaper från överliggande element, leder den direkta tillämpningen av en egenskap på en tagg alltid till att standardformeln för arv åsidosätts.
Kombinationen av alla faktorer som diskuteras ovan, plus andra faktorer som CSS-specificitet (ett system som ger olika Bredd till särskilda typer av CSS-regler), och ordningen på CSS-regler, skapar sluligen en komplex kaskad där objekt med högre prioriteter åsidosätter egenskaper som har lägre prioriteter. För mer information om reglerna som styr kaskaden, arv och specificitet, besök 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.
För mer information om CSS Designer, se Laying out pages using 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.
För en handledning om formatering av text med CSS, se www.adobe.com/go/vid0153.
Om CSS-egenskaper i kort notation
CSS-specifikationen tillåter skapandet av stilar med hjälp av en förkortad syntax känd som shorthand CSS. Shorthand CSS låter dig specificera värden för flera egenskaper med hjälp av en enda deklaration.Till exempel låter font-egenskapen dig ställa in font-style, font-variant, font-weight, font-size, line-height, och font-family-egenskaper på en enda rad.
Ett viktigt problem att notera när du använder förkortad CSS, är att värden som utelämnas från en förkortad CSS-egenskap tilldelas sitt standardvärde.Detta kan orsaka att sidor visas felaktigt när två eller fler CSS-regler tilldelas samma tagg.
Till exempel använder h1-regeln som visas nedan lång CSS-syntax.Notera att font-variant-, font-stretch-, font-size-adjust- och font-style-egenskaperna har tilldelats sina standardvärden.
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
Skrivet som en enda stenografikegenskap kan samma regel visas på följande sätt:
h1 { font: bold 16pt/18pt Arial }
När du skriver med förkortad notation tilldelas utelämnade värden automatiskt sina standardvärden.Därför utelämnar det föregående förkortningsexemplet taggarna font-variant, font-style, font-stretch och font-size-adjust.
Om du har formatmallar definierade på fler än en plats (till exempel både inbäddade på en HTML-sida och importerade från en extern formatmall) som använder både kort och lång CSS-syntax, var medveten om att utelämnade egenskaper i en stenografiregel kan åsidosätta (eller kaskadföra) egenskaper som uttryckligen anges i en annan regel.
Av denna anledning använder Dreamweaver den långa formen av CSS-notation som standard.Detta förhindrar möjliga problem som orsakas av att en stenografiregel åsidosätter en långformregel. Om du öppnar en webbsida som kodats med stenografisk CSS-notation i Dreamweaver, var medveten om att Dreamweaver kommer att skapa nya CSS-regler med långformatet. Du kan ange hur Dreamweaver skapar och redigerar CSS-regler genom att ändra CSS-redigeringsinställningarna i kategorin CSS-formatmallar i dialogrutan Inställningar (Redigera > Inställningar i Windows; Dreamweaver > Inställningar på Macintosh).
Dreamweaver och CSS
I Dreamweaver kan du arbeta med CSS på flera 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. För mer information om kodningsfunktioner som erbjuds av Dreamweaver, se 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. För mer information, se CSS-preprocessorer.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
