SELFHTML ist in diesem Jahr Medienpartner der IJC.
Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.
Weitere Informationen finden sich im SELFHTML-Forum.
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.
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.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.
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.
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.