Vererbung

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

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

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

Schauen Sie in die Definition einer beliebigen CSS-Eigenschaft, 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 auf seinem übergeordneten Element. Nur das Wurzelelement des Dokuments erhält den in der Zusammenfassung der Eigenschaft angegebenen Standardwert.

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" werden grün erscheinen, da das em-Element den Wert der color-Eigenschaft vom p-Element geerbt hat. Es erhält nicht den Standardwert der Eigenschaft (die Farbe, die für das Wurzelelement verwendet wird, wenn die Seite keine Farbe angibt).

Nicht vererbte Eigenschaften

Wenn für eine nicht vererbte Eigenschaft auf einem Element kein Wert angegeben wurde, erhält das Element den Standardwert 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 keine zusätzliche Umrandung haben (da der Standardwert von border-style none ist).

Hinweise

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 gleichzeitig mit der all-Kurzform steuern, die ihren Wert auf alle Eigenschaften anwendet. Zum Beispiel:

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

Dies stellt den Stil der font-Eigenschaft der Absätze auf den Standardwert des Nutzer-Agents zurück, es sei denn, ein Benutzer-Stylesheet ist vorhanden, in diesem Fall wird dieses verwendet. Dann wird die Schriftgröße verdoppelt und ein font-weight von "bold" angewendet.

Vererbung überschreiben, ein Beispiel

Verwenden wir unser vorheriges Beispiel mit border, wenn wir 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>

Hier sehen wir eine weitere Umrandung um das Wort "emphasized text".

Siehe auch