Kaskad och specificitet i CSS

HTML-dokument kan ha tre olika slags stilmallar .

1) Webbläsarens stilmall Webbläsare använder stilmallar på alla webbdokument. Dessa kallas webbläsarens inbyggda/standard stilmall.

2) Användarens stilmall De flesta moderna webbläsare ger användare möjlighet att tillämpa en egen stilmall.

3) Utvecklarens stilmall Webbutvecklare kan använda en eller flera stilmallar på ett HTMLdokument.

Det finns tre sätt som utvecklaren kan lägga till stilmallar i CSS till ett HTML-dokument.

1) Inline-stilar används på element i HTML-koden genom att använda attributet style. <body> <h2 style=“color: red;” > Heading here </h2> <p> Inlinestil med attributet style

2) Interna stilar placeras dokumentets huvud ( <head> ) med elementet <style> <head> <title>Document title</titl <style type="text/css" medi h2 { color: blue; } </style> Intern stil ligger i <style>

3) Externa stilmallar tillämpas genom att använda link eller @import . <title>Document title</titl <link rel="stylesheet" href=”my-styles.css” type=”text/css" media="screen” /> Extern stillmall med elementet link

Webbläsaren måste handskas med CSS-regler från både webbläsarens, användarens och utvecklarens stilmallar .

Webbläsaren måste även handskas med CSS-regler som kommer från olika stilmallar från utvecklaren (externa, interna och inline)

Förr eller senare måste webbläsaren handskas med CSS-regler som krockar .

En krock uppträder när mer än en CSS-regel hänvisar till samma element och egenskap . h2 { color : blue; } h2 { color : red; } CSS-regler som krockar

En krock kan uppstå mellan CSS-regler i olika slags stilmallar . h2 { color: blue; } h2 { color: red; } Webbläsarens stilmall Utvecklarens stilmall

En krock kan uppstå mellan CSS-regler i en eller flera av utvecklarens stilmallar . h2 { color: blue; } h2 { color: red; } h2 { color: green; } Utvecklarens stilmall 1 Utvecklarens stilmall 2

Vilka CSS-regler “vinner”?

Det finns fyra steg för att avgöra vilken CSS-regel som kommer att “vinna” (användas i HTML-dokumentet)

Samla alla deklarationer som gäller för ett element och en egenskap från webbläsarens, utvecklarens och användarens stilmallar.

Leta t.ex. fram alla deklarationer som gäller för: elementet = h2 egenskapen= color

h2 { color : black; } Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall h2 { color : green; } h2 { color : blue; } #nav h2 { color : lime; } Samlade deklarationer

Om det finns deklarationer från fler än en av dessa tre källor , fortsätt till steg 2.

Sortera de samlade deklarationerna efter ursprung (webbläsarens, utvecklarens och användarens stilmall) och vikt (normal eller !important).

Utvecklare kan använda “ !important ” till vilken deklaration som helst. h2 { color: red !important ;} !important

Deklarationer med "!important" går före normala deklarationer (Normala deklarationer är deklarationer som inte innehåller !important).

webbläsarens stilmall normala deklarationer i användarens stilmall normala deklarationer i utvecklarens stilmall !important-deklarationer i utvecklarens stilmall !important-deklarationer i användarens stilmall 1 2 3 4 5 Från lägsta till högsta prioritering

h2 { color: black; } Om det inte finns någon annan deklaration vinner webbläsaren 1. Webbläsarens stilmall Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall

h2 { color: black; } h2 { color: green; } 2. Användarens normala stilmall Användarens normala deklarationer vinner över webbläsarens deklarationer Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall

h2 { color: black; } h2 { color: green; } h2 { color: blue; } 3. Utvecklarens normala stilmall Utvecklarens normala deklarationer vinner över webbläsarens och användarens Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall

h2 { color: black; } h2 { color: green; } h2 { color: blue; } h2 { color: lime !important; } Utvecklarens deklarationer med !important vinner över alla normala 4. !important från utvecklaren Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall

h2 { color: black; } h2 { color: green; } h2 { color: red !important;} h2 { color: blue; } h2 { color: lime !important; } 5. !important från användaren Användarens !important-deklarationer vinner över utvecklarens !important-deklarationer Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall

Men om två deklarationer har samma ursprung och vikt ?

h2 { color: black; } h2 { color: green; } h2 { color: blue; } h2 { color: lime; } Två deklarationer med samma ursprung och vikt Två lika deklarationer Webbläsarens stilmall Användarens stilmall Utvecklarens stilmall

Om deklarationer har samma ursprung och vikt fortsätt till steg 3.

Om deklarationer har samma ursprung och vikt behöver deklarationens selektorer “räknas” för att se vilken deklaration som “vinner”.

Selektorer #nav h2 { color: blue; } h2.intro { color: red; } Selektorer

Fyra siffror slås samman (länkas som i en kedja) för att få fram ett slutgiltigt tal. a,b,c,d

Detta tal hänvisar man till som selektorns specificitet .

Hur räknar man ut specificiteten?

A. Finns det någon inlinestil? <h2 style=“color: red;” > This is a heading </h2> <p> Here is a paragraph of a = 1 x inline-stil b = 0 x ID c = 0 x klass d = 0 x element Specificitet = 1,0,0,0

B. Räkna antalet ID-selektorer. #nav { color: red; } a = 0 x inline-stil b = 1 x ID c = 0 x klass d = 0 x element Specificitet = 0,1,0,0

C. Räkna antalet klasser, attribut och pseudo-klasser. .main { color: red; } a = 0 x inline-stil b = 0 x ID c = 1 x klass d = 0 x element Specificitet = 0,0,1,0

D. Räkna antalet elementnamn eller pseudo-element. h2 { color: red; } a = 0 x inline-stil b = 0 x ID c = 0 x klass d = 1 x element Specificitet = 0,0,0,1

Notera följande om sammanslagningen

“ A ” slår alltid “ B ”, som alltid slår “ C ”, som alltid slår “ D ”.

Oavsett hur många ID som används i en selektor kommer en inline-stil alltid att vinna. (om inte !important används i deklarationen av ID)

Extern och intern stilmall (utvecklarens stilmall) #one #two #three #four #five #six #seven #eight #nine #ten { color: green; } HTML-dokument med inlinestil (utvecklarens stilmall) <h2 style=“color: purple;” > Den markerade stilen vinner p.g.a. specificitet - 1,0,0,0 slår 0,10,0,0

Oavsett hur många klasser som används av en selektor, vinner en ID enkelt.

Extern och intern stilmall (utvecklarens stilmall) .one .two .three .four .five .six .seven .eight .nine .ten { color: green; } #nav { color: lime; } Den markerade selektorn vinner p.g.a. specificitet - 0,1,0,0 slår 0,0,10,0

Oavsett hur många element som används av en selektor, vinner en klass enkelt.

Extern och intern stilmall (utvecklarens stilmall) div div div div div form fieldset div label span { color: green; } .intro { color: lime; } Den markerade selektorn vinner p.g.a. specificitet - 0,0,1,0 slår 0,0,0,10

Mer avancerade exempel på specificitet

ID och element #nav h2 { color: red; } a = 0 x inline-stil b = 1 x ID (#nav) c = 0 x klass d = 1 x element (h2) Specificitet = 0,1,0,1

Element och klass h2.intro { color: red; } a = 0 x inline-stil b = 0 x ID c = 1 x klass (.intro) d = 1 x element (h2) Specificitet = 0,0,1,1

ID, element och pseudo-klasser #nav ul li a:hover { color: a = 0 x inline-stil b = 1 x ID (#nav) c = 1 x pseudo-klass (:hover) d = 3 x element (ul, li, a) Specificitet = 0,1,1,3

Element och pseudo-element p:first-line { color: green a = 0 x inline-stil b = 0 x ID c = 0 x klass d = 2 x element (p) och pseudo-element (:first-line) Specificitet = 0,0,0,2

Element och attribut-selektor h2[title= “ intro ” ] { color: a = 0 x inline-stil b = 0 x ID c = 1 x attribut-selektor ([title=“intro”]) d = 1 x element (h2) Specificitet = 0,0,1,1

Om det ändå inte finns någon tydlig vinnare?

Selektorer med samma specificitet #nav h2 { color: red; } #nav h2 { color: green; } Specificitet = 0,1,0,1

Om det fortfarande inte finns en klar vinnare fortsätt till steg 4.

Om två deklarationer har samma vikt, ursprung och specificitet, vinner den som deklarerats sist.

#nav h2 { color: green; } #nav h2 { color: red; } Deklarationer med samma vikt Den andra deklarationen vinner eftersom den kommer efter den första.

Övning 1 webbläsare, användare, utvecklare

h2 { color: black; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall) h2 { color: green; }

h2 { color: black; } h2 { color: green; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall) Normal användardeklaration vinner över webbläsaren p.g.a. ursprung.

h2 { color: black; } h2 { color: green; } h2 { color: blue; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } HTML-dokument med inline-stil (utvecklarens stilmall) h2 { color: green; } h2 { color: blue; } Utvecklarens normala deklaration vinner över webbläsaren och användaren p.g.a. ursprung. Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall)

h2 { color: black; } h2 { color: green; } <h2 style=“color: purple;”> h2 { color: blue; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } User style sheet h2 { color: green; } <h2 style=“color: purple;”> h2 { color: blue; } Normal inline-deklaration vinner över extern och intern p.g.a. specificitet: 1,0,0,0 slår 0,0,0,1 Webbläsarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } h2 { color: green; } <h2 style=“color: purple;”> h2 { color: blue; } h2 { color: lime !important; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } h2 { color: green; } <h2 style=“color: purple;”> h2 { color: blue; } h2 { color: lime !important; } Utvecklarens !important-deklaration vinner över normala deklarationer från webbläsare, användare och utvecklare Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } h2 { color: green; } <h2 style=“color: purple !important;”> h2 { color: blue; } h2 { color: lime !important; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } User style sheet h2 { color: green; } <h2 style=“color: purple !important;”> h2 { color: blue; } h2 { color: lime !important; } Utvecklarens !important inline-deklarationer vinner över utvecklarens !important externa och interna deklarationer p.g.a. specificitet: 1,0,0,0 slår 0,0,0,1 Webbläsarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } h2 { color: green; } h2 { color: gray !important; } <h2 style=“color: purple !important;”> h2 { color: blue; } h2 { color: lime !important; } Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

h2 { color: black; } h2 { color: green; } h2 { color: gray !important; } <h2 style=“color: purple !important;”> h2 { color: blue; } h2 { color: lime !important; } Användarens !important-deklarationer vinner över utvecklarens !important-deklarationer (oavsett om de är externa, interna eller inline). Webbläsarens stilmall Användarens stilmall Extern och intern stilmall (utvecklarens stilmall) HTML-dokument med inline-stil (utvecklarens stilmall)

Övning 2 utvecklarens externa, interna och inline CSS

h2.news { color: #eee; } h2 { color: blue; } Extern och intern stilmall (utvecklarens stilmall)

h2.news { color: #eee; } h2 { color: blue; } Den markerade deklarationen vinner p.g.a. specificitet - 0,0,1,1 slår 0,0,0,1 Extern och intern stilmall (utvecklarens stilmall)

h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } Extern och intern stilmall (utvecklarens stilmall)

h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } Den markerade deklarationen har samma specificitet som den första (0,0,1,1). Men eftersom den är skriven sist vinner den! Extern och intern stilmall (utvecklarens stilmall)

#nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } Extern och intern stilmall (utvecklarens stilmall)

#nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } Den markerade selektorn vinner p.g.a. specifictet - 0,1,0,1 slår 0,0,1,1 och 0,0,0,1 Extern och intern stilmall (utvecklarens stilmall)

#nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } div#nav h2 { color: lime; } Extern och intern stilmall (utvecklarens stilmall)

#nav h2 { color: lime; } h2.news { color: #eee; } h2 { color: blue; } h2.news { color: green; } div#nav h2 { color: lime; } Den markerade selektorn vinner p.g.a. specifictet - 0,1,0,2 slår 0,1,0,1 och 0,0,1,1 och 0,0,0,1 Extern och intern stilmall (utvecklarens stilmall)

Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley (översättning: Thomas Lindbjer)

Kaskad och specificitet i CSS

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Kaskad och specificitet i CSS

Similar to Kaskad och specificitet i CSS (11)

More from kurs-resurs

More from kurs-resurs (6)

Kaskad och specificitet i CSS