Vererbung

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

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

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

Sehen Sie sich die Definition einer beliebigen 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 kein Wert auf einem Element angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft von seinem Elternelement. Nur das Root-Element des Dokuments erhält den Anfangswert, der 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 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 Root-Element verwendet wird, wenn die Seite keine Farbe angibt).

Nicht-vererbte Eigenschaften

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

Anmerkungen

Das inherit-Schlüsselwort ermöglicht es Autoren, die Vererbung explizit anzugeben. Es funktioniert sowohl bei vererbten als auch 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 Absätze' font-Eigenschaft auf den Standard des User-Agents zurück, es sei denn, es existiert ein Benutzerstylesheet, in diesem Fall wird dies stattdessen verwendet. Dann wird die Schriftgröße verdoppelt und ein font-weight von "bold" angewendet.

Überschreiben der Vererbung, ein Beispiel

Wenn wir das vorherige Beispiel mit border verwenden und die Vererbung mit inherit explizit festlegen, erhalten wir folgendes:

css
p {
  border: medium solid;
}

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

Wir können hier einen weiteren Rahmen um das Wort "emphasized text" sehen.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 5
# css-inheritance

Siehe auch