CSS Kaskade

Auf einer Website sind viele Elemente, die bei einer sauberen Trennung von Design und Struktur mit CSS formatiert werden. Eine Besonderheit dabei ist, dass einem Element verschiedene Stile zugewiesen werden kann, die zudem von unterschiedlichen Quellen stammen und auch widersprüchlich sein können. Daher muss es Regeln geben, mit denen festgelegt wird, welche Stile beim Zutreffen mehrerer Stile angewendet werden und welche nicht. Das Regelwerk für Zuweisung und Anwendung der Stile auf ein Element wird auch CSS Kaskade genannt, da der Vorgang über verschiedene Kaskaden (Stufen) erfolgt. Diesem Umstand ist sogar der Name zu verdanken. Denn, CSS ist die Abkürzung von Cascading Syle Sheets und bedeutet auf Deutsch in etwa Kaskadierende Stil Vorlagen.

Struktur einer Website - Basis für das DOM

Die Basis für die Kaskadierung bietet die Dokumentenstruktur einer Website, die auch als Basis für das Document Object Model (DOM) dient. Sie ist hierarchisch aufgebaut und besteht in der Regel aus folgenden Elementen.

  • 1 Wurzelelement
  • Mehrere Elternelemente
  • Mehrere Kindelemente

Hierzu ein kleines Beispiel mit dem HTML-Code einer Website (ohne DTD).

<html>

<head>
<title>Website-Titel</title>
</head>

<body>
<div>
<h1>Überschrift</h1>
<p>Absatz</p>
</div>
</body>

<html>

Der gesamte Bereich ist von den Tags <html>...</html> umschlossen. Somit stellt html die oberste Ebene (Wurzelebene) dar. Darin befinden sich die beiden Bereiche <head>...</head> und <body>...</body>. Das sind sozusagen Kindelemente von html, sind jedoch auch gleichzeitig selbst Elternelemente von untergeordneten Kindelementen. Dementsprechend lässt sich die folgende Dokumentenstruktur aus dem Code ableiten.

HTML-Dokumentenstruktur

Zuweisung verschiedener Stile

Das Verständnis für die Dokumentenstruktur (wird auch häufig mit der DOM-Struktur gleichgesetzt) ist wichtig, weil die CSS-Regeln von den Elternelementen an die Kindelemente vererbt werden (bis auf einige Ausnahmen). Auf das Element p (Absatz) könnten aufgrund der Struktur und der Vererbung viele Stildefinitionen wirken. Einige Beispiele mit Elementselektoren.

html { font-family: Arial; }
body { font-size: 14px; }
div { font-weight: bold; }
p { color: red; }

Es können natürlich auch andere Selektor-Typen zur Anwendung kommen. Sie sind unter Selektoren beschrieben. Auf den Absatz würden bei diesem Beispiel folgende Stile angewendet werden:

  • Schriftart: Arial
  • Schriftgröße: 14px
  • Schriftschnitt: Fett
  • Schriftfarbe: Rot

Die Schriftfarbe Rot ist den Absätzen direkt zugewiesen. Die übrigen Stile erhält der Absatz durch die Vererbung. Bei diesem Beispiel könnte man denken, dass die ersten drei Stile auch der Überschrift zugewiesen werden würde. Schließlich befindet sich das Element h1 ebenfalls unterhalb des DIV-Containers. Dem ist aber nicht so. Das einzige was vererbt wird ist die Schriftart. Die Schriftgröße und der Schriftschnitt kommen nicht zur Anwendung, da es bei der Vererbung Ausnahmen gibt und die Überschrift ist ein Beispiel dafür. Welche Stile wann vererbt werden, wird unter Vererbungsregeln erläutert.

Nicht immer ist die Zuweisung der CSS-Stile eindeutig oder lässt sich aus der Vererbung ableiten. Das ist dem Umstand geschuldet, dass es mehrere Informationsquellen für die Stile geben kann. Außerdem können CSS-Regeln mit !important als wichtig markiert werden oder es können mehrere Selektoren mit Kombinatoren kombiniert werden, die auf ein Element zutreffen können. In dem Fall kann man die Anwendung der Stile nach der folgenden Kaskade ermitteln.

Die Kaskadierung

Vor der Anwendung der Stile sammelt der Browser daher zuerst alle Informationsquellen. Dazu zählen:

  • Stylesheet-Dateien des Browsers.
  • Stylesheet-Dateien des Benutzers.
  • Stylesheet-Angaben des Autors der Website über CSS-Datei(en), inline über STYLE-Tag oder als Attribut bei den Elementen.

Die Reihenfolge entspricht dabei der aufsteigenden Priorität. Das Benutzer-Stylesheet kann das Browser-Stylesheet überschreiben. Die Stylesheet-Datei des Autors der Website überschreibt wiederum das Benutzer-Stylesheet.

Entscheidung nach Wichtigkeit

Wenn im Autoren-Stylesheet zu einem Element mehrere CSS-Regeln vorhanden sind, gelten die Regeln, die zuletzt angegeben wurden, da sie die vorherigen Regeln überschreiben. Das gilt jedoch nicht für Eigenschaften, die mit dem Schlüsselwort !important als wichtig markiert wurden. In dem Fall gilt, dass wichtige Angaben Vorrang vor den übrigen Angaben haben. Auch Benutzer-Stylesheets können Angaben enthalten, die mit !important als wichtig markiert wurden. Wichtige Benutzer-Stylesheets haben Vorrang vor wichtigen Autoren-Stylesheets.

Entscheidung nach Spezifität

Werden einem Element mehrere Stile zugewiesen, die alle keine oder mehrere Markierungen mit !important enthalten, entscheidet die Spezifität. Je spezifischer eine Regel, umso höher ist die Priorität. Dabei gilt die folgende Reihenfolge, sortiert nach aufsteigender Spezifität.

  • Elementselektoren und Pseudoelemente
  • Klassenselektoren und Pseudoklassen
  • ID-Selektoren
  • Attribut style="..." bei den Elementen

Entscheidung nach der Reihenfolge

Wenn einigen Elementen immer noch widersprüchliche CSS-Angaben zugewiesen werden, gilt die Reihenfolge. Die zuletzt angegebenen CSS-Regeln überschreiben die vorherigen.