Direktnavigation

Bookmark and Share

Weitere Infos (Randbereich)

Sie lesen gerade:

Little Boxes 1

Little Boxes Teil 1 - Webseiten gestalten mit HTML und CSS (Grundlagen)

Inhaltsbereich

11.5 3. Sortiere nach Reihenfolge

Für das Beispiel ist die Suche für den Browser wie gesagt eigentlich erledigt, aber es kann noch eine weitere Stufe der Kaskade geben, nämlich die Sortierung nach der Reihenfolge des Auftretens im Quelltext.

Schauen Sie sich folgenden fiktiven Style an:

01 #navibereich ul {
02   margin: 20px;
03   margin-bottom: 0;
04 }

In diesem Fall wird margin-bottom genau genommen gleich zweimal beschrieben. In Zeile 2 werden in Kurzschreibweise 20px unterer Außenabstand definiert, in Zeile 3 hingegen explizit 0. Da beide Deklarationen dieselbe Wichtigkeit (Stufe 3) und eine gleich hohe Spezifität (101 Punkte) haben, sortiert der Browser nach Reihenfolge:

  • Wenn zwei Deklarationen aus demselben Stylesheet stammen und sowohl die gleiche Wichtigkeit als auch die gleiche Spezifität haben, gewinnt die zuletzt notierte Anweisung.

Die zuletzt notierte Anweisung. Also je dichter am zu gestaltenden Element die Deklaration steht, desto vorrangiger ist sie. Dabei liest der Browser von links nach rechts und von oben nach unten. Im Listing etwas weiter oben gilt also der Wert margin-bottom: 0.

Nach dieser Runde gibt es in jedem Fall eine Entscheidung und die Kaskade ist beendet.

Quellen zur Kaskade

Zum Abschluss noch ein paar Quellen zur Kaskade. Zuerst eine sehr gute Erklärung des Konzepts von Tommy Olsson (in English): 

Die offizielle CSS-Spezifikation vom W3C ist etwas unzugänglicher:

Auf Deutsch wird die Kaskade von Klaus Langenberg erklärt: