CSS/Tutorials/Einstieg/Vererbung
Dieser Artikel behandelt die Vererbung in CSS. Für die Vererbung in JavaScript siehe JavaScript/Vererbung.
Vererbung bedeutet, dass anstatt des Standardwertes der berechnete Wert der Eigenschaft des Elternelements verwendet wird.
Inhaltsverzeichnis
Allgemein[Bearbeiten]
Für jede Eigenschaft ist ein bestimmter Wert als Standardwert definiert. Wird einer Eigenschaft kein Wert zugewiesen, so gilt der Standardwert als festgelegt.
Abweichend von dieser Regelung tritt das Prinzip der Vererbung in Kraft. Vererbung bedeutet, dass anstatt des Standardwertes der berechnete Wert der Eigenschaft des Elternelements verwendet wird.
Daraus folgt, dass das Wurzelelement keine Eigenschaften erben kann. Hier gilt der Standardwert. Zudem ist für jede Eigenschaft geregelt, ob sie vererbt werden kann oder nicht.
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
h1 { color: green; border-left: 3px solid green; }
Anhand der Eigenschaft font-size wird deutlich, warum berechnete anstatt festgelegter Werte vererbt werden.
<body>
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
</body>
body { font-size: 20px; }
h1 { font-size: 1.5em; }
h1-Element wird die Schriftgröße auf 30 Pixel berechnet (20 Pixel mal 1,5 ergibt 30 Pixel). font-size ist eine Eigenschaft, die vererbt wird, daher ist die Angabe font-size: inherit; beim abbr-Element nicht erforderlich.
Angenommen, es würde der festgelegte Werte vererbt. Dann betrüge die Schriftgröße des abbr-Elements 45 Pixel (30 Pixel mal 1,5 ergibt 45 Pixel). Dies wäre jedoch unerwünscht, da das Element der strukturellen Auszeichnung und nicht der zusätzlichen Gestaltung dient.
h1-Elements (30 Pixel) geerbt.inherit: Vererbung erzwingen[Bearbeiten]
Obwohl nur bestimmte Eigenschaften vererbt werden können, ist es möglich, das Prinzip der Vererbung auf jede beliebige Eigenschaft anzuwenden. Hierzu wird einer Eigenschaft das Schlüsselwort „inherit“ (englisch: „erben“) als einziger Wert zugeordnet.
Wird die Vererbung erzwungen, entsprechen sowohl der festgelegte als auch der berechnete Wert der Eigenschaft dem berechneten Wert der Eigenschaft des Elternelements.
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
h1 { border-left: 3px solid green; }
abbr { border-left: inherit; }
inherit, dass die Eigenschaft border-left vom h1-Element an das abbr-Element vererbt wird. Beide Elemente erhalten also einen seitlichen Rahmen.inherit kann jeder Eigenschaften zugewiesen werden. Legen Sie den Wert jedoch für eine Eigenschaft des Wurzelelements fest, so nimmt diese Eigenschaft ihren Standardwert an.Achtung!
Ältere Versionen des Internet Explorers verarbeiten die Angabe „inherit“ fehlerhaft: Mit Ausnahme der Eigenschaft font-size, erben Eigenschaften den spezifizierten anstatt des berechneten Werts ihres Elternelements. Dies kann zu Darstellungsfehlern führen, wenn Werte in relativen Einheiten wie em oder ch festgelegt sind, die Basis dieser Einheiten jedoch pro Element unterschiedlich definiert ist.
initial: Standardwert wiederherstellen[Bearbeiten]
Die Vererbung verhindert bei den Eigenschaften, die sie betrifft, dass nach dem Festlegen eines Werts der Standardwert wiederhergestellt werden kann. Andere Eigenschaften verfügen nicht über Werte, die dem definierten Standardverhalten entsprechen (z. B. text-align).
Details: caniuse.com
In CSS 3 wurde daher das Schlüsselwort initial (englisch sinngemäß „Ausgangspunkt“) hinzugefügt. Wird initial einer Eigenschaft als Wert zugeordnet, so wird der Standardwert der Eigenschaft verwendet.
<div id="kommentare">
<h1>Kommentare zum Artikel</h1>
<p>Erster Kommentar</p>
</div>
#kommentare { text-align: center; }
#kommentare p { text-align: initial; }
div-Elements zentriert. Anschließend wird die Textausrichtung der p-Elemente auf den Standardwert zurückgesetzt. Dadurch werden Texte, deren Schrift von links nach rechts verläuft, linksbündig; Texte, deren Schrift von rechts nach links verläuft rechtsbündig dargestellt.initial setzen Sie eine Eigenschaft auf den Standardwert der CSS Spezifikation, nicht auf den Wert des Default-Stylesheetsunset: Kombination von inherit und initial[Bearbeiten]
Ob eine CSS Eigenschaft ihren Wert vom Elternelement erbt, ist für jede Eigenschaft einzeln festgelegt. Der Wert von color wird beispielsweise vererbt, der Wert von display nicht.
Es mag gelegentlich gewünscht sein, bei einer nicht vererbten Eigenschaft eine Vererbung zu erzwingen, aber wenn es nur darum geht, Standardwerte wieder herzustellen, muss man bei jeder Eigenschaft einzeln prüfen, ob man sie korrekterweise auf inherit oder initial setzen muss. Das CSS3 Schlüsselwort unset wählt je nach Eigenschaft den richtigen Wert aus. Für vererbte Eigenschaften wirkt es wie inherit und für nicht vererbte Eigenschaften wirkt es wie initial.
revert: Den Wert auf die vorige Kaskadenstufe zurücksetzen[Bearbeiten]
Im Abschnitt zur Kaskade haben Sie gelesen, dass es drei Stufen beim Zuweisen von Stylesheets gibt: Browser, User und Autor. Der Wert initial ist radikal und entfernt die Zuweisungen aus allen Kaskadestufen. Weil das oft zu radikal ist, wurde mit CSS4 der Wert revert hinzugefügt. Damit werden alle Einstellungen der aktuellen Kaskadenstufe entfernt und der Wert der davor liegenden Kaskadenstufe wieder hergestellt.
<div id="kommentare">
<h1>Kommentare zum Artikel</h1>
<p class="showAlways">Erster Kommentar</p>
</div>
#kommentare * { display: none; }
#kommentare .showAlways { display: revert; }
kommentare durch display:none; von der Anzeige ausgeschlossen. Ausnahme sind diejenigen Elemente, denen die Klasse showAlways zugewiesen ist. Hier wird mit display: revert; der Wert aus dem User- oder Browser-Stylesheet wiederhergestellt. Die Verwendung von display: initial; würde zu Problemen führen, weil der Standardwert vom display inline ist und Blockelemente nur vom Browser-Stylesheet auf display:block; gesetzt werden.
colorundborder-leftfür dash1-Element deklariert.Die Farbangabe wird auch von dem
Die Eigenschaftabbr-Element verwendet, dacoloreine Eigenschaft ist, die vererbt wird. Der tatsächliche Standardwert dercolor-Eigenschaft (der vom Benutzer festgesetzt und vom Browser für das Wurzelement verwendet wird), wird hier nicht angewendet.border-leftwird nicht vererbt, daher besitzt dasabbr-Element im Gegensatz zumh1-Element keinen seitlichen Rahmen. Daborder-lefteine shorthand-Eigenschaft ist, werden die Standardwerte aller zusammengefassten Eigenschaften verwendet. Ausschlaggebend ist hier also, dass der Standardwert vonborder-left-styledem Wertnoneentspricht.