Thema : Kaskaden

Was passiert eigentlich, wenn mehrere Stylesheet-Anweisungen aufeinander
treffen?

Die meisten Browser haben eine Standard-Stylesheet-Datei, die
die Grundeinstellungen zum Anzeigen einer Webseite enthält und eine
Stylesheet-Datei, in der die Anwender-Einstellungen gespeichert sind.
Zzgl. der Stylesheets der Webseite, die der Autor festlegt, treffen vier
oder mehr Stylesheet-Dateien aufeinander. Da in allen Dateien
Eigenschaften für gleiche Elemente, wie z.B. Absätze, Überschriften,
Hyperlinks, usw. angegeben sind, stellt sich die Frage, welche Angaben
sich durchsetzen. Für diesen Fall gibt es die kaskadierten Regeln nach
denen die spezifischste (genaueste, detaillierteste) Angabe gewinnt.

Was das bedeutet, soll das nächste Beispiel erklären.

Die spezifischste Angabe setzt sich durch

Ein XHTML-Dokument mit folgender Struktur:

Ein Absatz mit 


nun in einem Tag

und jetzt sogar mit class-Selektor

gefolgt von einem ID-Selektor

dazu die folgenden Stylesheets:

span{ color: blue; }

p{ color: black; }

p span { color: green; }

span.em { color: yellow; }

#id { color: red; }

Die korrekte Darstellung der Schriftfarben sollte so aussehen:

Quote: Ein Absatz mit nun in einem Tag und jetzt sogar mit class-Selektor gefolgt von einem ID-Selektor

Die erste Zeile legt für -Tags die Schriftfarbe Blau fest, die
zweite Zeile für

-Tags die Schwarz. Die dritte Zeile verwendet einen
verschachtelten Selektor, um für -Tags, die innerhalb von Absätzen mit

-Tags vorkommen, die Schriftfarbe Grün festzulegen. Diese Angabe ist spezifischer (genauer) als die erste Zeile, da sie -Tags, die in

-Tags vorkommen, formatiert, anstatt "nur" -Tags allgemein,
wie in der ersten Zeile. Deshalb erscheint die zweite Zeile in Grün.
Eine Kaskaden-Regel besagt:

»Je mehr Elementnamen aufgeführt werden, desto spezifischer die Angabe.«

In der vierten Zeile wird mit dem class-Selektor em, der in diesem Beispiel nur für -Tags gültig ist (span.em {..} ist gültig für ), eine gelbe Schriftfarbe festgelegt. class-Selektoren sind mit attributabhängige Selektor gleichzusetzen, da sie Elemente mit dem Attribut class formatieren. Und zwei weitere Regel besagen:

»Je mehr Attribute aufgeführt werden, desto
spezifischer die Angabe.«

und

»Attribute sind spezifischer als Elementnamen«.

Folglich ist span.em spezifischer als p span.

Die höchste Spezifikation besitzen die ID-Selektoren.

Dementsprechend wird der letzte Abschnitt in dem Beispiel in Rot dargestellt.