Vererbung
In CSS steuert die Vererbung, was passiert, wenn für eine Eigenschaft an einem Element kein Wert angegeben ist.
CSS-Eigenschaften können in zwei Typen kategorisiert werden:
- vererbte Eigenschaften, die standardmäßig auf den berechneten Wert des Elternelements eingestellt sind
- nicht vererbte Eigenschaften, die standardmäßig auf den Anfangswert der Eigenschaft eingestellt sind
Sehen Sie sich die Definition irgendeiner CSS-Eigenschaft an, um zu erfahren, ob eine spezifische Eigenschaft standardmäßig vererbt wird ("Inherited: yes") oder nicht ("Inherited: no").
Vererbte Eigenschaften
Wenn für eine vererbte Eigenschaft an einem Element kein Wert angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft vom Elternelement. Nur das Wurzelelement des Dokuments erhält den im Eigenschaftszusammenfassungsbericht 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 (der 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 an einem Element kein Wert angegeben wurde, erhält das Element den Anfangswert dieser Eigenschaft (wie in der Eigenschaftszusammenfassung 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 weiteren Rahmen haben (da der Anfangswert von border-style
none
ist).
Hinweise
Das inherit
Schlüsselwort ermöglicht es Autoren, ausdrücklich Vererbung festzulegen. 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 Benutzeragenten zurück, es sei denn, es existiert ein Benutzer-Stylesheet, in diesem Fall wird dieses verwendet. Dann wird die Schriftgröße verdoppelt und ein font-weight
von "bold"
angewendet.
Die Vererbung überschreiben, ein Beispiel
Verwenden wir unser vorheriges Beispiel mit border
, setzen wir die Vererbung ausdrücklich mit inherit
, 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.
Siehe auch
- CSS-Werte zur Steuerung der Vererbung:
inherit
,initial
,revert
,revert-layer
undunset
- CSS Fehlerbehandlung
- Einführung in die CSS-Kaskade
- Lernen: Konflikte handhaben
- Lernen: Kaskadenebenen
- CSS-Kaskade und Vererbung Modul
- CSS-Syntax Leitfaden
- CSS-Syntax Modul
- At-Rules
- Anfangs, berechnete, verwendete und aktuelle Werte
- Wertedefinition-Syntax
- CSS-Verschachtelungsmodul