CSS/Tutorials/Einstieg/Vererbung

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt die Vererbung in CSS. Für die Vererbung in JavaScript siehe JavaScript/Vererbung.


Text-Info

Lesedauer
10min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Einstieg in CSS


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.

Vererbung der Textfarbe 
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>

h1 { color: green; border-left: 3px solid green; }
In diesem Beispiel werden die Eigenschaften color und border-left für das h1-Element deklariert.

Die Farbangabe wird auch von dem abbr-Element verwendet, da color eine Eigenschaft ist, die vererbt wird. Der tatsächliche Standardwert der color-Eigenschaft (der vom Benutzer festgesetzt und vom Browser für das Wurzelement verwendet wird), wird hier nicht angewendet.

Die Eigenschaft border-left wird nicht vererbt, daher besitzt das abbr-Element im Gegensatz zum h1-Element keinen seitlichen Rahmen. Da border-left eine shorthand-Eigenschaft ist, werden die Standardwerte aller zusammengefassten Eigenschaften verwendet. Ausschlaggebend ist hier also, dass der Standardwert von border-left-style dem Wert none entspricht.

Anhand der Eigenschaft font-size wird deutlich, warum berechnete anstatt festgelegter Werte vererbt werden.

Vererbung der Schriftgröße 
<body>
 <h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
</body>

body { font-size: 20px; }
h1 { font-size: 1.5em; }

Für das 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.

Tatsächlich wird daher der berechnete Wert des 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.

  • CSS 2.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Wird die Vererbung erzwungen, entsprechen sowohl der festgelegte als auch der berechnete Wert der Eigenschaft dem berechneten Wert der Eigenschaft des Elternelements.

Vererbung auch des linken Randes 
<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>

h1 { border-left: 3px solid green; }
abbr { border-left: inherit; }

In diesem Beispiel bewirkt das Schlüsselwort inherit, dass die Eigenschaft border-left vom h1-Element an das abbr-Element vererbt wird. Beide Elemente erhalten also einen seitlichen Rahmen.

Beachten Sie: Der Wert 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.

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).

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

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.

Vererbung aufheben - Defaultwert verwenden 
<div id="kommentare">
 <h1>Kommentare zum Artikel</h1>
 <p>Erster Kommentar</p>
</div>

#kommentare { text-align: center; }
#kommentare p { text-align: initial; }

In diesem Beispiel wird jeder Text innerhalb des 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.

Beachten Sie: Der Standardwert einer Eigenschaft ist nicht unbedingt das, was Sie in einer HTML Seite ohne eigene Styles vorfinden. Die CSS Spezifikation legt für jede CSS Eigenschaft einen Standardwert fest. Diese Standardwerte werden dann aber vom Browser über das in ihn integrierte Default-Stylesheet modifiziert. Mit initial setzen Sie eine Eigenschaft auf den Standardwert der CSS Spezifikation, nicht auf den Wert des Default-Stylesheets
.

unset: 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.

Beispiel 
<div id="kommentare">
 <h1>Kommentare zum Artikel</h1>
 <p class="showAlways">Erster Kommentar</p>
</div>

#kommentare * { display: none; }
#kommentare .showAlways { display: revert; }

In diesem Beispiel werden alle Nachfahrenelemente des div-Elementes mit der id 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.


← Kaskade
Einstieg in CSS
(Übersicht) )
Ausblick →

Weblinks[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Einstieg/Vererbung&oldid=80780“