Vererbung

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

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

  • Vererbte Eigenschaften, die standardmäßig auf den berechneten Wert des übergeordneten Elements gesetzt werden
  • Nicht-vererbte Eigenschaften, die standardmäßig auf den Initialwert der Eigenschaft gesetzt werden

Schauen Sie in die Definition irgendeiner CSS-Eigenschaft nach, ob eine spezifische 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 von seinem übergeordneten Element. Nur das Wurzelelement des Dokuments erhält den Initialwert, wie er in der Zusammenfassung der Eigenschaft angegeben ist.

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 "hervorgehobener Text" erscheinen grün, da das em-Element den Wert der color-Eigenschaft vom p-Element geerbt hat. Es erhält nicht den Initialwert der Eigenschaft (welches 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 bei einem Element kein Wert angegeben wurde, erhält das Element den Initialwert dieser Eigenschaft (wie in der Zusammenfassung der Eigenschaft 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 "hervorgehobener Text" werden keinen zusätzlichen Rahmen haben (da der Initialwert von border-style none ist).

Anmerkungen

Das inherit-Schlüsselwort erlaubt es Autoren, Vererbung explizit anzugeben. 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-Kurznotation 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 diesem Fall wird dieses verwendet. Dann verdoppelt es die Schriftgröße und wendet ein font-weight von "bold" an.

Vererbung überschreiben, ein Beispiel

Wenn wir unser vorheriges Beispiel mit border nehmen und die Vererbung mit inherit explizit festsetzen, 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 "hervorgehobener Text".

Spezifikationen

Specification
CSS Cascading and Inheritance Level 5
# css-inheritance

Siehe auch