Cascading

Bislang haben Sie nur Fälle betrachtet, bei denen durch gewisse Regeln bestimmt wird, welche Eigenschaft ein Element erhält. Was aber wenn sich zwei identische Regeln überschneiden?

H1 { color: red; }
H1 { color: blue; }

Beide Definitionen haben die Specificity 1, können aber nicht gleichzeitig angewandt werden. Jetzt kommt die Cascade in Spiel. Es gibt folgende Regeln, die bestimmen, welche Definition letztendlich gewinnt:

  1. Zuerst werden alle Deklarationen gesucht, die einen Selector enthalten, der zu einem bestimmten Element passt.
  2. Alle Deklarationen, die zu einem Element gehören, werden nach ihrem Gewicht sortiert. Regeln mit dem Zusatz !important bekommen ein höheres Gewicht als solche ohne. Weiterhin werden die Deklarationen nach einem der drei folgenden Ursprünge sortiert: Autor, Leser oder Browser. Normalerweise gewinnen die Autoren- gegenüber den Leser-Definitionen. Sowohl Autoren- als auch Leser-Definitionen überschreiben Browser-Definitionen.
  3. Alle Deklarationen werden anschließend nach ihrer Specificity sortiert. Je höher die Specificity, desto mehr Gewicht bekommen sie.
  4. Zuletzt werden die Deklarationen nach ihrem Auftreten im Stylesheet oder Dokument sortiert. Je später sie auftreten desto mehr Gewicht bekommen sie.

Klassifikation von Elementen

In CSS werden Elemente in eine der drei folgenden Gruppen einsortiert:

Block-level Elemente

Elemente wie z.B. Absätze, Überschriften, Listen, Tabellen, DIV-Elemente und das BODY-Element. Bilder und Formfelder sind normalerweise keine Block-level Elemente, können es aber in bestimmten Fällen sein. Die Eigenschaften von Block-level Elementen werden auf alle weiteren Elemente vererbt und durch ein solches Element wird oft eine neue Zeile im Browser angefangen. Des Weiteren können Block-level Elemente unter bestimmten Voraussetzungen nur Eigenschaften von anderen Block-level Elementen erben.

Inline Elements

Elemente wie z.B. A, I, SPAN und fast alle weiteren Formatierungselemente, so wie auch Bilder und Formfelder. Sie können Eigenschaften von allen anderen Elementen erben.

List-item Elemente

Hauptsächlich Elemente wie das LI-Element. Diese Elemente ordnen oder sortieren zum Beispiel Aufzählungen.

Aus diesen drei Gruppen ergeben sich drei der vier Werte für die Eigenschaft “display”:

display
Werte block | inline | list-item | none
Standardwert block
Vererbung keine
Anwendbar auf alle Elemente

Welchen Standardwert ein Element wie H1 hat, ist in der sog. “Document Type Definition” festgelegt. H1 oder P sind demnach Block-Elemente. A und I sind Inline Elemente und LI List-item Elemente. Die Standardwerte sehen demnach so aus:

H1, P { display: block; }
A, I { display: inline; }
LI { display: list-item; }

Elemente wie Bilder oder Formularfelder haben je nach Kontext einen der drei Werte. Normalerweise sind Bilder Inline Elemente, ein Bild, um das der Text fließt, ist dagegen ein Block-level Element.

Mit Hilfe der Display-Eigenschaft lässt sich nun die gesamte (Standard-)Struktur eines Dokumentes ändern. Beispielsweise ist zwischen zwei Absätzen immer einen leere Zeile; die folgende Definition hebt diese Regel auf:

P { display: inline; }

Umgekehrt lassen sich auch aus Inline Elementen Block-level Elemente machen. Sie können z.B. durch die folgende Definition sicherstellen, dass jedes Bild im Dokument in einer eigenen Zeile steht:

IMG { display: block; }

Möglich wäre auch eine Abschaltung von Bildern im Dokument:

IMG { display: none; }

Dabei wird vom Browser die Existenz der Bilder völlig ignoriert. Es gibt keine Freiräume oder Leerzeichen, wo sich die Bilder eigentlich befinden sollten.

Dem Wert none kommt eine wichtige Bedeutung zu, wenn der Browser verschiedene Stylesheets unterstützt. So ist es möglich, einer Seite ein unterschiedliches Aussehen zu geben, je nach dem, ob sie in einem Browser gelesen oder ausgedruckt wird.