Vererbung

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 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:

p {
  color: green;
}

<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 auf einem Element kein Wert angegeben 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:

p {
  border: medium solid;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

Die Worte "emphasized text" werden keinen anderen 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 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:

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

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

Überschreiben der Vererbung, ein Beispiel

Unter Verwendung unseres vorherigen Beispiels mit border, wenn wir die Vererbung mit inherit explizit festlegen, erhalten wir Folgendes:

p {
  border: medium solid;
}

em {
  border: inherit;
}

<p>This paragraph has <em>emphasized text</em> in it.</p>

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

Spezifikationen

Siehe auch

• CSS-Werte zur Steuerung der Vererbung: inherit, initial, revert, revert-layer, und unset
• CSS Kaskadierung und Vererbung Modul
• CSS Fehlerbehandlung
• Einführung in die CSS Kaskade
• Lernen: Konflikte Handhaben
• Lernen: Kaskadenebenen
• Einführung in die CSS-Syntax: Deklarationen, Regelmengen und Anweisungen
• At-Rules
• Werte: initial, computed, used, und actual
• Wertedefinitionssyntax
• CSS-Nesting Modul