Kapitel 3: Struktur und Kaskadierung
Die Kaskade ist für die Auswahl der jeweils gültigen CSS-Definition und deren Anwendung auf die HTML-Elemente verantwortlich.
Sie erfolgt nach ganz bestimmten Regeln, welche einerseits die Spezifizität (Specificity) der Regeldefinition auswertet, andrerseits die Vererbungsregeln(Inheritance) von CSS berücksichtigt.
Die Spezifizität (Specificity)
Jede Regeldefinition in CSS erhält eine interne Zahlenreihe von vier Ziffern zugeordnet (ab CSS 2.1), welche eine interne Gewichtung der Regeldefinition vornimmt, die bei der Kaskadierung berücksichtigt wird (Priorität). Dabei gelten folgende Regeln:
Jeder ID (#)-Attribut-Selektor erhält eine Gewichtung von 0,1,0,0;
Jeder Class-Attribut-(.)-Selektor wie[abc] oder Pseudo-Class-Selektor(:link) erhält 0,0,1,0
Jeder Element- oder Pseudo-Element-Selektor(:) erhält 0,0,0,1 an Gewicht.
Kombinatoren und Universalelement-Selektoren(*) erhalten keine Gewichtung.
Beispiele: p, em{color:purple} Spezifizität:0,0,0,2
*.breit{color:red} Spezifität: 0,0,1,0
div#sidebar *[href] p.hell{color:yellow} Spezifizität: 0,1,2,2
Die Regel wird vom Browser von links nach rechts interpretiert und ebenso gewichtet.
Zahlen weiter links erhalten – bei konkurrierenden Definitionen – immer den Vorrang bei der Anwendung
.
Inline-Styles erhalten (gemäss Vererbungsregeln) immer die höchste Priorität: 1,0,0,0.
Dies ist erst seit CSS 2.1 so. Bei CSS2.0 gab es nur drei Gewichtungen, wobei Inline-Styles gleich gewichtet wurden wie der ID-Selektor.
Die !important Regel
Die Important – Regel steht immer am Schluss, vor dem ; der jeweiligen Definition und wird für jedes definierte Element einzeln ausgegeben. Sie hat vor allen andern Spezifitäten immer Vorrang.
Beispiel: p.dark{color: #333 !important; background-color:white} //Regel 1 hat Vorrang.
Demo 1
Inheritance (Vererbung)
Wir erwarten zu recht, dass die Definition
Beispiel: <h1>Überschrift <em>ersten</em> Grades</h1> nach der Regel h1{color:red} gesamthaft rot erscheint, was auch der Fall ist. Das trifft solange zu, als die Unterdefinitionen innerhalb des Baumes der Abkömmlinge eines Tags erscheinen (Listen). Die Vererbung geschieht immer von oben nach unten (mit einer einzigen Ausnahme: Background-Definitionen im <body-Tag> gelten für das gesamte HTML-Element.)
Keine Vererbung erfolgt bei den internen Eigenschaften des Box-Models (u.a. margin, padding, border, backgrounds), was auf der Hand liegt und dem Common-Sense entspricht. Vererbte Eigenschaften haben generell keine Spezifität (auch nicht 0,0,0,0).
Einige frühere Browser (NS4, IE4 und IE5) vererben nicht auf table-elemente, was jeweils zum Hack
body,table,th,td{color:xy} führt.
Obige Tatsache führt Beispielsweise dazu, dass folgende Definitionen
Beispiel:
h1{color:black} und *{color:grey} bei <h1>Diese Überschrift <em>ist grau</em> und schwarz</h1> führt.
Die Nicht-Spezifität von vererbten Eigenschaften ist nicht ganz trivial. Sie gilt nämlich nur, solange der Inhalt reiner Text (ohne weitere Tags) ist (Z.B. bei einer ID- oder Class-Angabe). Sobald im Text ein beispielsweise ein em-Element auftaucht, gelten andere Regeln (Z.B. browserdefinierte).
Dem entgeht man nur, wenn beispielsweise folgende Regel notiert wird:
Beispiel: #toolbar{color:white;background:black;}
#toolbar a:link{color:white}
Die Kaskade (Cascade)
Angebommen, es bestehen folgende widersprüchlichen Definitionen:
h1{color:blue} //0,0,0,1
h1{color:red} //0,0,0,1
Für die Lösung dieses Problems bestehen folgende Kaskadierungsregeln:
1.Alle Deklarationen finden, welche ein bestimmtes Element betreffen
2.Sortierung nach dem expliziten Gewicht (!important), Sortierung nach der Herkunft, in der Reihenfolge: Author, Benutzer, Browser. Dabei werden !important –Angaben des Benutzers höher gewichtet als !important -Angaben des Autors, sonst hat jedoch immer der Author Vorrang. Die Browser-Regeln werden vom Author und vom Benutzer überschrieben.
3.Sortierung nach der Spezifität
4.Sortierung nach der Reihenfolge, in der die Elemente im Code erscheinen. Spätere Definitionen überschreiben frühere Definitionen: Importierte Regeln werden von Seitenregeln, Seitenregeln werden von Inline-Styles überschrieben. (Nähe zum eigentlichen Element ist massgebend).
Demo 2
Dazu einige Beispiele:
Sortierung nach expliziter Gewichtung:
Beispiel: p{color:grey !important;} //important
<p style="color:black">Ein unspefifizierter Text</p> //Inline-Style
Die erste Definition gewinnt, auch bei allfälliger Vererbung!!
Sortierung nach Herkunft:
Beispiel 1:
p em {color:black} //Author
p em {color:Yellow} //User
Der Autor gewinnt über den User.
Beispiel 2:
p em {color:black !important} //Author
p em {color:Yellow !important} //User
Der User gewinnt über den Autor!
Die Reihenfolge der Gewichtung:
1.Users !important-Regel
2.Authors !important-Regel
3.Authors Normaldeklaration
4.Users Normaldeklaration
5.User-Agent(Browser)-Einstellungen
Sortierung nach Spezifität wird von der Zahlenreihe der Definition bestimmt.
Sortierung nach Reihenfolge
Beispiel 1: h1{color:green}
h1{color:blue}
Nummer 2 gewinnt aufgrund der Reihenfolge-Regel!
Beispiel 2: h1{color:green} //importiert
h1{color:blue} //auf der Seite definiert
Nummer 2 gewinnt aufgrund der Reihenfolge-Regel!
Besonderheiten der a:Pseudoklassen
Für die Reihenfolge der Pseudoklassen gilt gemeinhin: LVHA oder VLHA(:link,:visited,:hover,:active)
Da alle Pseudo-Klassen dieselbe Spezifität aufweisen, spielt die Reihenfolge eine wichtige Rolle.
Ihre Umkehrung führt dazu, dass :hover oder :active nie angezeigt werden, weil sie nicht am Ende stehen:
Wird nicht richtig angezeigt...
Beispiel: :active{color:orange}
:hover{color:white}
:link{color:black}
:visited{color:green} //Active und Hover werden nie angezeigt (Reihenfolge)
.
Mit der Verkettung von Pseudoklassen kann das Reihenfolge-Problem zwar gelöst werden, aber IE6 versteht diese Verkettung nicht!
Nicht-CSS –Definitionen
<font> Sie erscheinen immer ganz zuerst in der sortierten Liste und werden dementsprechend auf jeden Fall überschrieben.
Weiter zu Kapitel 4: Werte und Masseinheiten