Vererbung

In CSS steuert die Vererbung, was passiert, wenn für eine Eigenschaft auf einem Element kein Wert angegeben ist.

CSS-Eigenschaften lassen sich in zwei Typen kategorisieren:

  • vererbte Eigenschaften, die standardmäßig auf den berechneten Wert des übergeordneten Elements eingestellt sind
  • nicht vererbte Eigenschaften, die standardmäßig auf den Anfangswert der Eigenschaft eingestellt sind

Schauen Sie sich die Definition jeder CSS-Eigenschaft an, um zu sehen, ob eine bestimmte Eigenschaft standardmäßig vererbt wird ("Inherited: yes") oder nicht ("Inherited: no").

Vererbte Eigenschaften

Wenn für eine vererbte Eigenschaft auf einem Element kein Wert angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft vom übergeordneten Element. Nur das Wurzelelement des Dokuments erhält den in der Eigenschaftszusammenfassung 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 Wörter "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 festlegt).

Nicht vererbte Eigenschaften

Wenn für eine nicht vererbte Eigenschaft auf einem Element kein Wert angegeben wurde, erhält das Element den Anfangswert dieser Eigenschaft (wie in der Eigenschaftszusammenfassung 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 Wörter "emphasized text" werden keinen zusätzlichen Rahmen haben (da der Anfangswert von border-style none ist).

Hinweise

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

Sie können die Vererbung für alle Eigenschaften auf einmal mit der all-Kurzform-Eigenschaft 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 font-Eigenschaft der Absätze auf den Standard des Benutzer-Agents zurück, es sei denn, es existiert ein Benutzer-Stylesheet, in welchem Fall dieses verwendet wird. Anschließend verdoppelt es die Schriftgröße und wendet ein font-weight von "bold" an.

Überschreiben der Vererbung, ein Beispiel

Verwenden wir unser vorheriges Beispiel mit border, wenn wir die Vererbung ausdrücklich auf 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 zusätzlichen Rahmen um das Wort "emphasized text".

Siehe auch