Struktur - Stilmall

[Import av mallar] [Personliga mallar] [Arv] [Gruppering] [Klasser] [Pseudoklasser] [Pseudoelement] [ID-selektorer] [Kontext-selektorer] [Sorteringsordning] [Kommentarer]

Selektorerna i CSS motsvarar elementen i HTML, deklarationerna motsvarar attributen och deras värden.

<P> - ett HTML-element
P - en CSS-selektor
class=center - ett HTML- attribut och värde
text-align: center - en CSS-deklaration

<P class=center> - HTML
P {text-align: center} - CSS

C i CSS står för cascading (kaskad), ett vattenfall med många källor. På samma sätt som ett vattenfall kan ha många källor kan även en Style Sheet ha många källor. En stilmall kan länkas med en eller fler andra som i sin tur kan länkas med tredje osv.

Genom att kunna länka ett obegränsat antal olika stilmallar kan du tilldela ett element olika egenskaper eller en egenskap med olika värden, t ex {color: red} och {color: blue}. Vilken stil som slutligen kommer att gälla beror på i vilken mall de är samlade. I praktiken betyder det att du kan tilldela vart och ett element en speciell still som kommer att gälla enbart under vissa förhållanden.

Det är inte enbart skaparens egna stilmallar som kan påverka den slutliga formateringsstilen. Då CSS tillåter att även en användare kan skapa sina egna personliga stilmallar som han eller hon installerar på sin dator kan den slutliga stilen påverkas även av dessa.

Vidare kan även den ärvda egenskapen påverka den slutliga stilen då HTML-elementen ärver sina föräldrars egenskaper.

Med CSS kan du variera formateringen av ett element genom att tilldela det en klass, t ex du kan ge varje stycke en unik formateringsstil. Du kan även skapa fiktiva selektorer, dvs sådana selektorer vars elementmotsvarigheter inte existerar i HTML.

Det är många olika källor som påverkar den slutliga formateringsstilen. För att undvika konflikter sorteras de enligt bestämda regler/ordning - cascading order.

Det kan hända att ett eller ett antal dokument innehåller element som inte finns i de övriga dokumenten eller som behöver formateras ytterligare eller den befintliga formateringen ska på något sätt ändras. Om ändringarna enbart ska gälla i de berörda dokumenten utan att för den delen påverka alla andra dokument skapar du en extra mall i vilken du listar enbart de regler som ska gälla i just de dokumenten. Om något ytterligare ska formateras skapar du en mall till, och en till osv.

För att ett dokument ska formateras med ett antal olika mallar måste de båda mallarna länkas med varandra, dvs huvudmallen måste ta emot (importera) den information som den extra mallen innehåller. För att låta en huvudmall importera information som finns i andra mallar skriver du följande i .css-filen eller bäddar in mellan <STYLE> och </STYLE> i det berörda dokumentet:

@import url(adress.till.mallen2)
@import url(adress.till.mallen3)

Om din huvudmall är en inbäddad Style Sheet måste denna information skrivas på första raden, dvs före alla eventuella deklarationer.

Skulle det uppstå konflikt mellan reglerna specificerade i den importerade mallen och huvudmallen, t ex en och samma selektor ges två olika regler, kommer reglerna i huvudmallen att överskrida de importerade.

Även en användare kan skapa sina egna personliga stilmallar som han eller hon installerar på sin dator. Dessa mallar kan överskrida mallarna som skapats av web-designers. Om web-designers mall överskrids eller inte beror på hur reglernas vikt är fördelad.

! important

används för att ge mer vikt åt regler i konfliktsituationer. Som standard, om ingen vikt uppges, kommer web-designers regler att överskrida användarens, t ex:

P {font: 12pt} web-designer
P {font: 14pt} användare

visar styckena med en font på 12 punkter,

P {font: 12pt} web-designer
P {font: 14pt ! important} användare

däremot kommer ovanstående att visa styckena med en font på 14 punkter då användarens regel har mer vikt än web-designers.

P {font: 12pt ! important } web-designer
P {font: 14pt ! important} användare

kommer åter att visa styckena med en font på 12 punkter. Båda mallarna har samma vikt och i en sådan situation kommer web-designers mall överskrida användarens.

Den här ordningen kan dock "förstöras" av en www-klient då det är upp till den att välja på vilket sätt personliga stilmallar ska åberopas. Men för det mesta är det web-designers mallar som har mest inflytande på den slutliga stilen.

HTML är ett strukturellt hierarkiskt språk där varje element har sin specifika plats. Men ett element kan eller i vissa fall måste innehålla ett eller fler andra element. Elementet TABLE måste till exempel innehålla elementet TR (tabellens rad) som i sin tur måste innehålla TH (tabellens rubrik) eller TD (tabellens data - cell). Elementen TH och TD är barn till elementet TR (TR är förälder till TH och TD) och därför kommer att ärva förälders (TR) egenskaper (t ex färgen eller storleken på fonter) om de saknar egna deklarationer. Elementet TR är i sin tur barn till elementet TABLE och kommer att ärva det om egen deklaration saknas.

Tabellen tillhör de s.k. BODY-elementen, dvs de element som kan finnas i elementet BODY. Alla BODY-elementen skrivs mellan <BODY> och </BODY>. Elementet BODY är stamfader till alla BODY-elementen. Om tabellen fanns direkt i BODY och saknade en egen deklaration skulle den ärva de egenskaper som tilldelades elementet BODY.

Men om tabellen hade funnits i en post (LI) som tillhörde en onumrerad lista (UL) och listan fanns direkt i BODY skulle då tabellen ärva listans egenskaper, om sådana fanns. Om listan inte tilldelas någon stil kommer den tillsammans med tabellen ärva BODYs egenskaper.

Likaså om ett stycke innehöll betonad text:

<P>Lite text <EM>betonad text</EM> mer text</P>

samtidigt som du tilldelar selektorn P en viss stil i stilmallen ( t ex color: red) men inte selektorn EM kommer EM att ärva den stil som tilldelades P, dvs den ärver förälders egenskaper.

<P>Lite röd text <EM>betonad röd text</EM> mer röd text</P>

Om du vill att den betonade texten ska visas med en annan färg än förälders lista selektorn EM i din mall och tilldela den den önskade färgen eller använd dig av kontext-selektorer (se nedan).

Genom att tilldela selektorn BODY vissa egenskaper, t ex bakgrundsfärg eller färg och storlek på fonter kan du på så sätt utnyttja elementens arvegenskaper och låta alla andra BODY-elementen ärva dessa egenskaper. Med andra ord kan du sätta en standardfärg eller fontstorlek åt hela dokumentet istället för att lista varje selektor för sig.

BODY {background: white;
color: black; font: 12pt}

Sedan kan du lista bara de selektorer som ska formateras på ett annat sätt, dvs inte ärva förälders BODY-egenskaper:

H1 {color: red; font 140%}
H2 {color: navy; font: 130%}

Gruppering tillåter dig att gruppera olika selektorer som delar samma egenskaper. Det gör en stilmall kortare och med det mer överskådlig samtidigt som du sparar skrivtid.

En stil - olika element

Om du tilldelar olika element en viss specifik stil listar du de en i taget och deklarerar denna stil. Om du till exempel vill ha alla rubriker på nivå 1 röda, stycken svarta, poster i listorna gula och länkarna gröna skriver du:

H1 {color: red}
P {color: black}
LI {color: yellow}
A {color: green}

Men om du vill tilldela ett antal element en och samma stil, till exempel röd förgrundsfärg, istället för att lista dem en i taget enligt principen:

H1 {color: red}
P {color: red}
LI {color: red}
A {color: red}

kan du gruppera de och sedan tilldela hela gruppen denna stil. Alla ovannämnda element kan till exempel tilldelas den röda färgen enligt följande:

H1, P, LI, A {color: red}

Gruppmeddlemarna åtskiljs med ett komma.

Ett element (selektor) - olika stilar

Det är inte enbart element som kan grupperas i en selektor. Du kan även gruppera deklarationer som tilldelas en viss selektor. Istället för att du skriver:

P {font-size: 10pt}
P {font-weight: bold}
P {text-indent: 1cm}
P {color: blue}

skriver du:

P {font-size: 10pt; font-weight: bold; text-indent: 1cm; color: blue}

Listade deklarationer åtskiljs med en semikolon. De två första deklarationerna kan förkortas ännu mer. Se fontegenskaper

Med CSS kan du formatera ett och samma element med olika stilar, t ex ha både blå och röda stycken och även skapa en stil med vilken du kan formatera valfria element vid valfria tillfällen. Det kan du göra genom att skapa olika klasser av ett och samma selektor eller genom att skapa en selektor av själva klassen.

Klassade selektorer

Regeln P {color: red} kommer att visa alla stycken i ett dokument röda. Style Sheets ger dig möjligheten att välja ett unikt format åt varje stycke om du skulle önska så. Det gör du genom att klassa styckena, dvs att skapa underklasser till elementet P. På så sätt kan du ha olika varianter av elementet P och tilldela var och en den önskade stilen.

Klassa elementen genom att skriva en punkt direkt efter deras namn. Du kan skapa ett obegränsat antal klasser och därför måste du namnge varje klass med ett unikt namn för att kunna åtskilja dem, t ex:

P.namn

och sedan tilldelar du den klassade selektorn någon stil på samma sätt som om den var en vanlig selektor. Du kan namnge klasserna precis hur du vill men namnen får bara innehålla bokstäverna a-z, A-Z, siffror 0-9 och bindestreck -. Namn kan inte börja med en siffra eller ett bindestreck. För att undvika missvisande namn ifall då deklarationen ändras man bör alltid namnge klasserna enligt deras funktion och inte utseende, t ex P.fotnot och inte P.green. Bara en klass kan tilldelas per selektor. (OBS! texten mellan /* och */ är mina egna kommentarer.)

P {color: red) /* vanliga röda stycken */
P.namn1 {color: blue} /* klassade blåa stycken */
P.namn2 {color: green} /* klassade gröna stycken */

När du vill ha röda stycken skriver du i ditt HTML-dokument:

<P>Här kommer ett rött stycke</P>

När du vill ha blåa stycken skriver du i ditt HTML-dokument:

<P CLASS=namn1>Här kommer ett blått stycke</P>

När du vill ha gröna stycken skriver du i ditt HTML-dokument:

<P CLASS=namn2>Här kommer ett grönt stycke</P>

Selektor som klass

För att kunna tilldela en viss still till valfria element vid valfria tillfällen skapar du en klass av själva deklarationen. En klass för sig själv.

När du till exempel vill ha någon eller några rubriker röda eller något eller några stycken röda eller vilket annat element som helst. Då och då - vid behov.

I en sådan situation skapar du enbart deklarationen utan att tala om med vilket element den hör ihop, t ex:

{font: arial 14pt}

För att kunna tilldela ett valfritt element den här deklarationen skapar du en klass av den på samma sätt som du klassar selektorerna men utan selektorns namn. Om selektorns namn utesluts skapas då en ensam klass - en klass i sig själv.

En ensam klass skapas med hjälp av en vanlig punkt som följs direkt av det namn som du vill ge klassen. Du kan namnge klasserna precis hur du vill men namnen får bara innehålla bokstäverna a-z, A-Z, siffrorna 0-9 och bindestreck -. Namn kan inte börja med en siffra eller ett bindestreck.

.hej {font: arial 14pt}

Nu kan du formatera vilket element du vill och när du vill med denna stil. Om du till exempel vill att texten i en tabell ska visas med denna stil tilldelar du elementet TABLE i HTML-dokumentet den.

<TABLE CLASS=hej>...</TABLE>

eller ett stycke:

<P CLASS=hej>Ett stycke</P>

eller ett antal element:

<DIV CLASS=hej>
<TABLE>...</TABLE>
<P>Ett stycke</P>
<P>Ett annat stycke</P>
</DIV>

Selektorer i stilmallar baserar sig på de existerande HTML-elementen. Varje element har bara en selektor-motsvarighet. Det finns dock element, som A (ankare) vilket varierar sitt "utseende" beroende på det skede länken befinner sig i och "uppför" sig som det var tre olika element. Då det finns tre variationer av elementet A och bara ett markeringssätt, som i sin tur betyder att det finns bara en selektormotsvarighet, kan du åtskilja de olika skeden agenom att skapa fiktiva klasser av elementet A. Sådana fiktiva klasser kallas för pseudoklasser.

Pseudoklasser används i fiktiva element, dvs sådana element som inte finns i HTML, för att olika typer av ett och samma element, t ex ett ankare ska kunna åtskiljas.

En länk i ett HTML-dokument skapas med hjälp av elementet A och markeras med <A></A> men en och samma länk kan visas på tre olika sätt beroende på om länken var besökt eller inte eller om den är aktiv. Med andra ord går en och samma länk (element) igenom tre olika skeden som om den var tre olika element. För att kunna separera de tre olika länkarna och tilldela var och en en egen deklaration skapar du pseudoklasser av elementet A. Pseudoklasser, till skillnad från vanliga klasser som skapas med en punkt, skapas genom att man lägger till ett kolon till selektorn som direkt följs av pseudoklassens namn. (OBS! texten mellan /* och */ är mina egna kommentarer.)

A:link {color: blue} /* obesökt länk */
A:visited {color: red} /* besökt länk */
A:active {color: green} /* aktivt länk */

eller om det är en bild t ex

A:link {border: red}

Pseudoklasser kan kombineras med vanliga klasser:

A.namn:visited {color: red}

A.namn /* kolon - vanlig klass */
A:namn /* semikolon - pseudoklass */

Pseudoelement i likhet med pseudoklasser skapas när man vill få fram fiktiva element, dvs element som inte finns i HTML. Pseudoklasser används när man vill kunna åtskilja olika typer (skeden) av ett och samma element medan pseudoelement används till att kunna adressera underdelar av ett element.

Speciellt i typografiska kretsar vill man kunna bestämma mera i detalj hur styckena ska se ut. Man vill t ex kunna åtskilja första raden på ett stycke genom att visa det med kapitäler eller visa t ex styckets första bokstav i en annan font eller t o m göra en anfang. Det kan man lätt åstadkommas genom att skapa pseudoelement.

Pseudoelement skapas genom att man lägger ett kolon till selektorn som följs direkt av pseudoelementets namn:

Om du vill att första raden av ett stycke visas i kapitäler skriver du:

P:first-line {font-style: small-caps)

som kommer att se ut så här i HTML-dokumentet:

<P> DEN HÄR RADEN KOMMER ATT ATT VISAS I KAPITÄLER
men inte den här </P>

För att få första bokstaven av ett stycke större skriver du:

P {font-size: 14pt} P:first-letter {font-size: 200%}

Detta kommer att se ut så här i ett HTML-dokument:

<P>Vilken stor bokstav </P>

200% är ett relativt värde som kommer att förstora standardfonten, som i det här fallet är 14pt, till det dubbla, dvs till 28 punkter.

Om du vill få first-letter egenskapen att expandera över två rader använder du dig av elementet SPAN, t ex:

P {font-size: 14pt; line-height: 14pt}
P:first-letter {font-size: 200%; float: left}
SPAN {text-transform: uppercase}

Du kan kombinera pseudoelement med varandra.

P {color: red; font-size: 14pt}
P:first-letter {color: green; font-size: 200%}
P.first-line {color: blue}

Detta kommer att göra första bokstaven i varje stycke grön och 28 punkter stor, resten av första raden blå och resten av stycket rött.

Pseudoelement kan kombineras med klassade selektorer:

P.namn:first-letter {color: red}

P.namn /* kolon - vanlig element (selektor) */
P:namn /* semikolon - pseudoelement */

Med CSS har du en möjlighet att formatera varje element för sig. För att kunna göra det måste varje element identifieras och ges ett unikt ID-värde (nummer/namn). Varje värde börjas med stegena dvs tecknet # som ersätter punkten och som följer direkt efter selektorns namn. Du kan även skapa klasser av ID-selektorer.

H1#evp34 {color: red} /* ID-selektor */
#evp37 {color: red} /* ID-klass */

Rubriken i HTML-dokumentet identifierar du genom att skriva:

<H1 ID=evp34>Rubrik</H1>

och genom att identifiera något element, t ex ett stycke med klassens ID-värde kan du tilldela klassens deklaration:

<P ID=evp37>Ett stycke</P>

Värden kan innehålla bokstäverna A-Z, a-z, siffrona 0-9, och bindestreck -.

Använd kontext-selektorer när du vill låta selektorn med egen deklaration ärva en förälders stil vid speciella tillfällen.

Om du till exempel skrev:

H1 {color: blue}
EM {color: red}

och hade en rubrik i HTML-dokumentet som innehöll betonad text:

<H1>Rubrikens text <EM>betonad text</EM> mer text</H1>

skulle rubriken visas i blått medan den betonade texten mellan <EM> och </EM> skulle visas i rött. Om du vill undvika en sådan situation och visa hela rubriken i blått och ändå behålla den röda färgen i andra betoningar grupperar du H1 och EM i ett speciellt sökmönster som kallas för kontext-selektor.

H1 {color: blue} /* H1 vanlig selektor */
EM {color: red} /* EM vanlig selektor */
EM, H1 {color: red} /* EM och H1 vanliga selektorer */
H1 EM {color: blue} /* EM kontext-selektor */

Det betyder att endast de EM som hittas i H1 kommer att vara blå medan alla andra kommer att behålla sin röda färg. Elementet EM ärver färgen efter H1 men bara under förutsättning att H1 är förälder till EM. Kontext-selektorer listas som grupperade selektorer men utan ett komma.

H1 EM {color: blue} /* EM som kontext-selektor */
H1, EM {color: blue} /* EM som vanlig-selektor */

Ett sökmönster kan byggas på. Det är alltid den sista selektorn i strängen som CSS letar efter och ändrar men under förutsättning att den matchar hela mönstret. Mönstret:

H1 EM BR {color: blue} /* BR som kontext selektor */

letar CSS efter en avdelare BR men ändrar endast den om den finns i EM som i sin tur finns i H1.

Även klasser, både de som tilldelas till selektorer och de som är selektorer själva, kan innehålla kontext-selektorer. Nedanstående:

DIV.hej P {color: red} /* P som kontext-selektor */

kommer att ändra styckets färg till rött enbart om stycket befinner sig i blocket DIV still vilket tilldelades klassen .hej.

.hej P {color: red}

kommer att ändra färgen på de stycken som finns i de element till vilka tilldelades klass .hej.

Samma sak gäller ID-selektorer:

#evp34 P {color: red}

kommer att ändra färgen på de stycken som finns i de element till vilka tilldelades ID-värde 123p.

Kontext-selektorer kan grupperas som alla andra selektorer. Varje grupp separeras med ett komma:

H1 STRONG, H1 EM {color: red}/* STRONG och EM som kontext-selektorer */

För att undvika konflikter mellan de olika mallarna och deras eventuella motstridiga deklarationer måste de sorteras enligt vissa regler, s.k. cascading order. Både deklarationer och mallar sorteras.

Deklarationerna sorteras enligt följande regler:

1. Hitta alla deklarationer som tilldelades ett visst element eller en egenskap (i fall då egenskapen tar form av en selektor - en klass i sig själv)
   (och)
   tilldela deklarationen om selektoren motsvarar elementet
   (om inte)
   låt elementet ärva en förälders egenskaper
   (om sådana inte finns)
   använd standardvärden
2. Sortera deklarationer enligt deras vikt (!important)
   deklarationer med denna egenskap sorteras först
3. Sortera skaparna av stilmallar
   web-designers silmall överskrider användarens stilmall
   användarens stilmall överrider www-klientens standardvärden
   användarens stilmall med vikt överskrider web-designer utan vikt
   web-designers stilmall med vikt överskrider användarens med vikt
4. Sortera efter hur detaljerade selektorerna är (ju mer detaljerad selektor desto högre vikt)
   ID-selektorer har mest vikt (#evp34)
   (sedan kommer)
   klassade kontext-selektorer (TABLE P EM.blue)
   klassade selektorer (P.red)
   kontext-selektorer -- ju längre ner i strängen desto högre vikt, (TABLE P EM), (TABLE P EM STRONG) - STRONG har mer vikt än EM
   vanliga selektorer, pseudoelement och pseudoklasser (P, P:first-line, A:link)
5. Sortera efter den ordning i vilken reglerna skapades - den senaste har mer vikt

Stilmallarna sorteras enligt följande regler:

1. Importerade stilmallar kommer före alla andra mallar
2. Web-designers mall
3. Personlig mall med vikt kommer att överskrida designers utan vikt
4. Web-designers mall med vikt överskrider den personliga mallen med vikt

Om en regel med vikten {! important} hittas under sökningen avbryts sökningen och den sist hittade regeln kommer att gälla.

Då det finns tre olika metoder att länka formateringsmallar sorteras även de enligt specifika regler, dvs enligt regeln nr 5 ovan (sortera efter den ordning i vilken reglerna skapades - den senaste har mer vikt - ju närmare elementet desto mer vikt)

1. Attribut STYLE (inline-stil) överskrider alla andra
2. Element STYLE (inbäddad stil) kommer tvåa och överskriver nr 3
3. Extern fil

Generellt är reglerna som specificerats av en web-designer som gäller.

Du kan skriva egna kommentarer i både inbäddade och externa mallar som varken syns på skärmen eller stör informationen. Kommentaren skriver du mellan /* och */

H1 {color: red} /* Det är en kommentar */

Upp | CSS-referensbok | Referensböcker