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 des Elternelements. 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 Wörter „hervorgehobener 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 (dies ist die Farbe, 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 Wörter „hervorgehobener Text“ haben keinen zusätzlichen Rahmen (da der Anfangswert von border-style none ist).

Anmerkungen

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

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

Dies setzt den Stil der Absatz-font Eigenschaft auf den Standard 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.

Überschreiben der Vererbung, ein Beispiel

Verwenden Sie unser vorheriges Beispiel mit border, wenn wir die Vererbung explizit mit inherit festlegen:

p {
  border: medium solid;
}

em {
  border: inherit;
}

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

Wir sehen hier einen zusätzlichen Rahmen um das Wort „hervorgehobener 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: Konflikte handhaben
• Lernen: Kaskadenschichten
• CSS-Kaskade und Vererbung Modul
• CSS-Syntax Leitfaden
• CSS-Syntax Modul
• At-Rules
• Anfangs-, berechnete, verwendete und tatsächliche Werte
• Wertdefinitionssyntax
• CSS-Verschachtelungsmodul