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:
p {
color: green;
}
<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:
p {
border: medium solid;
}
<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:
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:
p {
border: medium solid;
}
em {
border: inherit;
}
<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
- CSS-Werte zur Steuerung der Vererbung:
inherit,initial,revert,revert-layerundunset - Fehlerbehandlung in CSS
- Einführung in den CSS-Cascade
- Lernen: Behebung von Konflikten
- Lernen: Cascade-Schichten
- Modul CSS-Cascading und Vererbung
- CSS-Syntax-Leitfaden
- Modul CSS-Syntax
- At-Regeln
- Anfangs, berechnete, benutzte und tatsächliche Werte
- Wert-Definitionssyntax
- CSS-Nesting-Modul