Unter Vererbung versteht man die Weitergabe von Eigenschaften eines Elternelements an seine Kindelemente. In CSS steuert die Vererbung, was passiert, wenn für eine Eigenschaft eines Elements kein Wert angegeben wird.

CSS-Eigenschaften können in zwei Typen eingeteilt werden:

vererbte Eigenschaften, die standardmäßig auf den berechneten Wert des übergeordneten Elements gesetzt werden
nicht vererbte Eigenschaften, die standardmäßig auf den Standardwert der Eigenschaft gesetzt werden

In jeder CSS-Eigenschafts-Referenz kann man nachlesen, ob eine bestimmte Eigenschaft standardmäßig vererbt wird („Vererbt: ja“) oder nicht („Vererbt: nein“).

Vererbte Eigenschaften

Wenn für ein Element kein Wert für eine geerbte Eigenschaft angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft von seinem übergeordneten Element. Nur das Wurzelelement des Dokuments erhält den in der Zusammenfassung der Eigenschaft angegebenen Anfangswert.

Ein typisches Beispiel für eine geerbte Eigenschaft ist die color-Eigenschaft:

h1 { 
  color: green; 
  border-left: medium solid green; 
}

<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>

In diesem Beispiel werden die Eigenschaften color und border-left für das h1-Element deklariert. Die Farbangabe wird auch von dem abbr-Element verwendet, da color eine Eigenschaft ist, die vererbt wird. Der tatsächliche Standardwert der color-Eigenschaft (der entweder vom Benutzer oder vom Browser im Default-Stylesheet für das Wurzelelement festgesetzt wird), wird hier nicht angewendet.

Nicht vererbte Eigenschaften

Wenn für ein Element kein Wert für eine nicht vererbte Eigenschaft angegeben wurde, erhält das Element den Standardwert dieser Eigenschaft.

Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die border-Eigenschaft:

h1 { 
  color: green; 
  border-left: medium solid green; 
}

<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>

Die Eigenschaft border-left wird nicht vererbt, daher besitzt das abbr-Element im Gegensatz zum h1-Element keinen seitlichen Rahmen. Da border-left eine shorthand-Eigenschaft ist, werden die Standardwerte aller zusammengefassten Eigenschaften verwendet. Ausschlaggebend ist hier also, dass der Standardwert von border-left-style dem Wert none entspricht.

Wertvarianten

Standardwert

Eine CSS-Eigenschaft kann ohne einen gültigen Wert nicht existieren, sie kann nicht unbestimmt oder undefiniert sein. Es ist klar, dass ein Text in einer bestimmten Schriftfarbe dargestellt werden muss, auch ohne dass der Entwickler dazu eine Angabe macht. Dieser Wert wird als Standardwert, auch default-Wert, Ausgangswert, voreingestellter Wert oder initialer Wert bezeichnet.

Dieser wird teilweise vom W3C, teilweise auch von Browsern (mehr oder weniger gleich; vgl. margins bei li) festgelegt und findet sich in den Default-Stylesheets der Browser, die Sie in eigenen Stylesheets überschreiben können.

festgelegte Wert

Als „festgelegt“ bzw. „spezifiziert“ wird ein Wert bezeichnet, wenn er einer Eigenschaft zugeordnet wurde. Die Zuordnung kann während der Kaskade, durch das Prinzip der Vererbung oder durch die Eigenschaft selbst erfolgen. Der Ablauf stellt sich wie folgt dar:

Wird während der Kaskade ein Wert für die Eigenschaft gefunden, so wird dieser Wert verwendet. Das bedeutet, dass der verwendete Wert im Browser-, Autoren- oder Benutzer-Stylesheet definiert wurde.
Anderenfalls wird, wenn die Eigenschaft vererbt wird und es sich bei dem Element nicht um das Wurzelelement handelt, der für das Elternelement berechnete Wert derselben Eigenschaft verwendet.
Ansonsten gilt der Standardwert der Eigenschaft als festgelegter Wert.

font-size: 1.2em;

In diesem Beispiel enthält die Deklaration der Eigenschaft font-size den Wert 1.2em. Der festgelegte Wert lautet also „1.2em“.

Der berechnete Wert

Für jeden Wert wird während der Kaskade der „berechnete Wert“ gebildet. Jede Eigenschaft besitzt eigene Regeln, wie dieser berechnete Wert bestimmt wird (die unser Wiki leider noch nicht enthält, bitte folgen Sie im Zweifelsfall den Links zur Mozilla-Dokumentation).

Relative Werte wie bestimmte Längenangaben (außer Prozentwerte) und Pfadangaben werden dabei in absolute Werte umgewandelt.

background-image: url('bilder/hintergrund.png'); }

In diesem Beispiel wird die Eigenschaft background-image deklariert. Der berechnete Wert dieser Eingenschaft kann z.B. url('http://www.example.org/bilder/hintergrund.png') lauten.

Bei einzelnen Eigenschaften sind spezielle Regeln für die Findung des berechneten Wertes definiert.

Anhand der font-size-Eigenschaft wird deutlich, warum berechnete anstatt festgelegter Werte vererbt werden.

<body>
 <h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
</body>

body {
  font-size: 20px; 
}
h1 {
  font-size: 1.5em; 
}

Für das h1-Element wird die Schriftgröße auf 30 Pixel berechnet (20 Pixel mal 1,5 ergibt 30 Pixel). font-size ist eine Eigenschaft, die vererbt wird, daher ist die Angabe font-size: inherit; beim abbr-Element nicht erforderlich.

Angenommen, es würde der festgelegte Wert vererbt. Dann betrüge die Schriftgröße des abbr-Elements 45 Pixel (30 Pixel mal 1,5 ergibt 45 Pixel). Dies wäre jedoch unerwünscht, da das Element der strukturellen Auszeichnung und nicht der zusätzlichen Gestaltung dient.

Tatsächlich wird daher der berechnete Wert des h1-Elements (30 Pixel) geerbt.

benutzte Wert

Die berechneten Werte entstehen während der Kaskade, bevor die Darstellung erfolgt. Dies hat zur Folge, dass sich nicht aus allen festgelegten Werten ein spezialisierter berechneter Wert bilden lässt, z. B. aus Prozentangaben, da die Basis dafür erst während der Darstellung berechnet wird. Während der Darstellung werden daher „benutzte“ bzw. „verwendete“ Werte ermittelt.

p {
   width: 80%; 
}
 
In diesem Beispiel wird dem p-Element eine Breite von 80% zugewiesen. Während der Kaskade ist es nicht möglich, die Breite des Elternelements von p herauszufinden. Der berechnete Wert von width beträgt also 80%. Erst nach der Kaskade, wenn die Darstellung erfolgt, kann der benutze Wert ermittelt werden. Besitzt das Elternelement von p beispielsweise eine Breite von 220 Pixel, beträgt der benutze Wert für die Breite des Absatzes 176 Pixel (220 Pixel mal 0,8 ergibt 176 Pixel).

tatsächliche Wert

Durch die Einschränkungen, die einem Ausgabemedium innewohnen können, ist es manchmal nicht möglich, dass der benutzte Wert verwendet wird. Beispielsweise können auf einem Bildschirm keine Pixelwerte mit Dezimalstellen dargestellt werden. Der Browser muss hier einen Annäherungswert an den benutzten Wert ermitteln. Dieser Wert wird als „tatsächlicher“ Wert bezeichnet.

<div id="information">
  <p class="kleingedrucktes">Kleine Information.</p>
</div>

#information     { font-size: 16px; }
.kleingedrucktes { font-size: .8em; }

In diesem Beispiel wird die Schriftgröße des div-Elements auf 16 Pixel festgesetzt. Bei Elementen mit der Klasse kleingedrucktes soll die Schriftgröße nur 80% der normalen Schriftgröße betragen. Der Browser errechnet daher den berechneten und benutzten Wert 12,8 Pixel (16 Pixel mal 0,8 ergibt 12,8 Pixel). Auf einem Ausgabemedium auf dem nur ganzzahlige Pixelwerte dargestellt werden können, rundet der Browser den berechneten Wert auf und bildet so den tatsächlichen Wert: 13 Pixel.