Vererbung

In CSS steuert die Vererbung, was passiert, wenn für eine Eigenschaft eines Elements kein Wert angegeben ist.

CSS-Eigenschaften lassen sich in zwei Typen unterteilen:

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

Siehe in der Definition jeder CSS-Eigenschaft nach, 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 von seinem Elternelement. Nur das Wurzelelement 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:

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

p {
 border: medium solid;
}

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

Die Worte "emphasized text" werden keinen zusätzlichen Rahmen haben (da der Anfangswert von border-style none ist).

Hinweise

Das inherit Schlüsselwort erlaubt 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 Kurzschreibweise steuern, die ihren Wert auf alle Eigenschaften anwendet. Zum Beispiel:

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

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

Übersteuern der Vererbung, ein Beispiel

Verwenden wir unser vorheriges Beispiel mit border, erhalten wir das folgende, wenn wir die Vererbung mit inherit explizit setzen:

p {
 border: medium solid;
}
em {
 border: inherit;
}

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

Wir sehen hier 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-Fehlerbehandlung
• Einführung in die CSS-Kaskade
• Lernen: Umgang mit Konflikten
• Lernen: Kaskadenschichten
• CSS-Kaskade und Vererbung Modul
• CSS-Syntax Leitfaden
• CSS-Syntax Modul
• At-rules
• Initial-, berechnete, benutzte, und tatsächliche Werte
• Definition der Wertesyntax
• CSS-Verschachtelungsmodul