Vererbung

Vererbte Eigenschaften

Wenn kein Wert für eine vererbte Eigenschaft bei einem Element angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft des übergeordneten Elements. Nur das Wurzelelement des Dokuments erhält den Initialwert, 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 "hervorgehobener Text" erscheinen grün, da das em-Element den Wert der color-Eigenschaft vom p-Element geerbt hat. Es erhält nicht den Initialwert der Eigenschaft (welche die Farbe ist, die für das Wurzelelement verwendet wird, wenn die Seite keine Farbe angibt).

Nicht-vererbte Eigenschaften

Wenn kein Wert für eine nicht-vererbte Eigenschaft bei einem Element angegeben wurde, erhält das Element den Initialwert 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 "hervorgehobener Text" haben keinen weiteren Rahmen (da der Initialwert von border-style none ist).

Hinweise

Das inherit-Schlüsselwort ermöglicht es Autoren, 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 font-Eigenschaft der Absätze auf den Standard des User Agents zurück, es sei denn, es existiert ein Benutzer-Stylesheet, in welchem Fall dieses stattdessen verwendet wird. 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 explizit mit inherit setzen, 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 "hervorgehobener 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: Umgang mit Konflikten
• Lernen: Kaskadenschichten
• Einführung in die CSS-Syntax: Deklarationen, Regelsätze und Anweisungen
• At-Regeln
• Werte: initial, berechnet, verwendet und tatsächlich
• Wertdefinitionssyntax
• CSS-Verschachtelung-Modul