Vererbung

Cascade

Stylesheet bietet eine weitere wichtige Eigenschaft, die Cascade (stufenförmiger Wasserfall; wasserfallähnliches Feuerwerk; Anordnung von hintereinander geschalteten Bauteilen). Sie beschreibt, in welcher Reihenfolge Style-Angaben überschrieben werden.
Die Regeln werden in der folgenden Reihenfolge abgearbeitet.

  1. Als !important markierte Anweisungen wichtiger als andere.
  2. Spezifische Anweisungen sind wichtiger als allgemeine.
  3. Anweisungen des Users sind wichtiger als die des Dokumentes. Diese sind wiederum wichtiger als die des Browsers.
  4. Später definierte Anweisungen sind bei gleichem Wert wichtiger als früher definierte. Das heisst, dass im selben CSS etwas mit gleichem Wert weiter unten im file wichtiger ist.

CSS-Definitionen werden innerhalb der Dokumentenstruktur weitervererbt. Kinder von HTML-Tags übernehmen die meisten Formatierungen. Elemente können Werte von ihrem übergeordneten Element (Eltern) erben. In CSS2 ist der Wert "inherit" erlaubt. Inherit gibt an, dass eine Eigenschaft eines Elementes den Wert des Elternelementes erben soll. Wenn "inherit" angegeben ist, wird der berechnete Wert des übergeordneten Elements verwendet.

Beispiel

Hier wird im <body> -Tag die Schriftart und -größe festgelegt. Diese Angaben werden an das <p> <h1> Tag usw. vererbt. Dies garantiert für das ganze Dokument eine einheitliche Schrift.

body { 
font-family: Verdana, SunSans-Regular, Sans-Serif; 
font-size: 11px;
color: #000; 
background-color: #fff; 
}

Oben wurde die Schriftart und Farbe definiert. Das Elements <h1> wird hier unten mit der Farbe Rot überschrieben.

h1 { 
color: #f00; 
background-color: transparent; 
}

Taucht im Element <h1> ein mit <em> hervorgehobenes Wort auf, und <em> keine Farbe zugewiesen wurde, so erbt dieses vom übergeordnetem Element die Farbe Rot.

<h1>Dieses Wort rot, <em>schräg</em> und schön</h1>

Es gibt Werte, die nicht vererbt werden, so z.B. die background-color. transparent kann neu ebenfalls als Wert angegeben werden, muss sogar, wenn man Wert darauf legt, dass das CSS valid ist. Denn eine color Angabe braucht immer auch eine background-color:transparent; Angabe.

!important -Regel

!important gekennzeichnete Definitionen überschreiben normale Angaben. Autoren- so wie User-Stylesheet können !important -Regeln enthalten. !important -Regeln des Users überschreiben dabei !important -Regeln des Autoren.
Dies wurde erst in CSS 2 festgelegt. In CSS 1 überschreiben die !important -Regeln des Autoren die des Users. Browser, die nur den CSS 1-Standard beherrschen, interpretieren die !important -Regeln nach heutiger Sichtweise falsch. Die Accessibility der Seiten wird durch CSS2 wesentlich verbessert, beispielsweise für sehbehinderte Menschen, die auf eine Mindestschriftgrösse angewiesen sind.

p { font-size: 20px !important; }