Vererbung

In CSS steuert die Vererbung, was passiert, wenn für eine Eigenschaft eines Elements kein Wert angegeben ist.

CSS-Eigenschaften lassen sich in zwei Typen kategorisieren:

  • Vererbte Eigenschaften, die standardmäßig auf den berechneten Wert des Elternelements gesetzt sind.
  • Nicht vererbte Eigenschaften, die standardmäßig auf den Anfangswert der Eigenschaft gesetzt sind.

Schauen Sie in der Definition jeder CSS-Eigenschaft nach, ob eine bestimmte Eigenschaft standardmäßig vererbt wird ("Inherited: yes") oder nicht ("Inherited: no").

Vererbte Eigenschaften

Wenn für eine vererbte Eigenschaft kein Wert auf einem Element festgelegt wurde, erhält das Element den berechneten Wert dieser Eigenschaft von seinem Elternelement. Nur das Wurzelelement des Dokuments erhält den im Eigenschaftsüberblick angegebenen Anfangswert.

Ein typisches Beispiel für eine vererbte Eigenschaft ist die color-Eigenschaft. Betrachten Sie die folgenden Stilregeln und das Markup:

css
p {
  color: green;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

Die Worte "emphasized text" erscheinen grün, da das em-Element den Wert der color-Eigenschaft vom p-Element geerbt hat. Es erhält nicht den Anfangswert der Eigenschaft (welcher die Farbe ist, die für das Wurzelelement verwendet wird, wenn die Seite keine Farbe angibt).

Nicht vererbte Eigenschaften

Wenn für eine nicht vererbte Eigenschaft kein Wert auf einem Element festgelegt wurde, erhält das Element den Anfangswert dieser Eigenschaft (wie im Eigenschaftsüberblick angegeben).

Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die border-Eigenschaft. Betrachten Sie die folgenden Stilregeln und das Markup:

css
p {
  border: medium solid;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

Die Worte "emphasized text" werden keinen zusätzlichen Rahmen haben (da der Anfangswert von border-style none ist).

Anmerkungen

Das inherit-Schlüsselwort ermöglicht es Autoren, Vererbung ausdrücklich festzulegen. Es funktioniert sowohl bei vererbten als auch bei nicht vererbten Eigenschaften.

Sie können die Vererbung für alle Eigenschaften gleichzeitig mit der all-Kurzschreibweise steuern, die ihren Wert auf alle Eigenschaften anwendet. Zum Beispiel:

css
p {
  all: revert;
  font-size: 200%;
  font-weight: bold;
}

Dies setzt den Stil der Absätze für die font-Eigenschaft auf den Standard des Benutzer-Agents zurück, es sei denn, ein Benutzer-Stylesheet existiert, in welchem Fall dieses verwendet wird. Dann wird die Schriftgröße verdoppelt und ein font-weight von "bold" angewendet.

Überschreiben der Vererbung, ein Beispiel

Verwenden wir unser vorheriges Beispiel mit border, wenn wir die Vererbung ausdrücklich mit inherit setzen, erhalten wir Folgendes:

css
p {
  border: medium solid;
}

em {
  border: inherit;
}
html
<p>This paragraph has <em>emphasized text</em> in it.</p>

Hier sehen wir einen weiteren Rahmen um das Wort "emphasized text".

Spezifikationen

Specification
CSS Cascading and Inheritance Level 5
# css-inheritance

Siehe auch