SELF-Treffen in Mainz 2023

Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.

CSS/Tutorials/Einstieg/Vererbung

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

Unter Vererbung versteht man die Weitergabe von Eigenschaften eines Elternelements an seine Kindelemente. In CSS steuert die Vererbung, was passiert, wenn für eine Eigenschaft eines Elements kein Wert angegeben wird.

CSS-Eigenschaften können in zwei Typen eingeteilt werden:

  1. vererbte Eigenschaften, die standardmäßig auf den berechneten Wert des übergeordneten Elements gesetzt werden
  2. nicht vererbte Eigenschaften, die standardmäßig auf den Standardwert der Eigenschaft gesetzt werden

In jeder CSS-Eigenschafts-Referenz können Sie nachlesen, ob eine bestimmte Eigenschaft standardmäßig vererbt wird ("Vererbt: ja") oder nicht ("Vererbt: nein").

Vererbte Eigenschaften

Wenn für ein Element kein Wert für eine geerbte Eigenschaft angegeben wurde, erhält das Element den berechneten Wert dieser Eigenschaft von seinem übergeordneten Element. Nur das Wurzelelement des Dokuments erhält den in der Zusammenfassung der Eigenschaft angegebenen Anfangswert.

Ein typisches Beispiel für eine geerbte Eigenschaft ist die color-Eigenschaft:

Vererbung der Textfarbe 
h1 { 
  color: green; 
  border-left: medium solid green; 
}

<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
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 entweder vom Benutzer oder vom Browser im Default-Stylesheet für das Wurzelelement festgesetzt wird), wird hier nicht angewendet.

Nicht vererbte Eigenschaften

Wenn für ein Element kein Wert für eine nicht vererbte Eigenschaft angegeben wurde, erhält das Element den Standardwert dieser Eigenschaft.

Ein typisches Beispiel für eine nicht vererbte Eigenschaft ist die border-Eigenschaft:

keine Vererbung von Rahmeneigenschaften 
h1 { 
  color: green; 
  border-left: medium solid green; 
}

<h1>Ein <abbr>CSS</abbr>-Beispiel</h1>
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.

Wertvarianten

Ein Wert, der einer Eigenschaft zugewiesen wird, ist nicht unveränderlich. Tatsächlich werden während der Verarbeitung eines Stylesheets verschiedene spezialisierte Werte, sogenannte Wertvarianten aus dem festgelegten Wert gebildet.

Ausgangspunkt ist …

Der Standardwert

Eine CSS-Eigenschaft kann ohne einen gültigen Wert nicht existieren, sie kann nicht unbestimmt oder undefiniert sein. Es ist klar, dass ein Text in einer bestimmten Schriftfarbe dargestellt werden muss, auch ohne dass der Entwickler dazu eine Angabe macht. Dieser Wert wird als Standardwert, auch default-Wert, Ausgangswert, voreingestellter Wert oder initialer Wert bezeichnet.

Dieser wird teilweise vom W3C, teilweise auch von Browsern (mehr oder weniger gleich; vgl. margins bei li) festgelegt und findet sich in den Default-Stylesheets der Browser, die Sie in eigenen Stylesheets überschreiben können.

Der festgelegte Wert

Als „festgelegt“ bzw. „spezifiziert“ wird ein Wert bezeichnet, wenn er einer Eigenschaft zugeordnet wurde. Die Zuordnung kann während der Kaskade, durch das Prinzip der Vererbung oder durch die Eigenschaft selbst erfolgen. Der Ablauf stellt sich wie folgt dar:

  1. Wird während der Kaskade ein Wert für die Eigenschaft gefunden, so wird dieser Wert verwendet. Das bedeutet, dass der verwendete Wert im Browser-, Autoren- oder Benutzer-Stylesheet definiert wurde.
  2. Anderenfalls wird, wenn die Eigenschaft vererbt wird und es sich bei dem Element nicht um das Wurzelelement handelt, der für das Elternelement berechnete Wert derselben Eigenschaft verwendet.
  3. Ansonsten gilt der Standardwert der Eigenschaft als festgelegter Wert.
Beispiel 
font-size: 1.2em;
In diesem Beispiel enthält die Deklaration der Eigenschaft font-size den Wert 1.2em. Der festgelegte Wert lautet also „1.2em“.

Der berechnete Wert

Für jeden Wert wird während der Kaskade der „berechnete Wert“ gebildet. Jede Eigenschaft besitzt eigene Regeln, wie dieser berechnete Wert bestimmt wird (die unser Wiki leider noch nicht enthält, bitte folgen Sie im Zweifelsfall den Links zur Mozilla-Dokumentation).

Relative Werte wie bestimmte Längenangaben (außer Prozentwerte) und Pfadangaben werden dabei in absolute Werte umgewandelt.

Beispiel 
background-image: url('bilder/hintergrund.png'); }
In diesem Beispiel wird die Eigenschaft background-image deklariert. Der berechnete Wert dieser Eingenschaft kann z.B. url('http://www.example.org/bilder/hintergrund.png') lauten.

Bei einzelnen Eigenschaften sind spezielle Regeln für die Findung des berechneten Wertes definiert.

Anhand der font-size-Eigenschaft 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 Wert 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.

Der benutzte Wert

Die berechneten Werte entstehen während der Kaskade, bevor die Darstellung erfolgt. Dies hat zur Folge, dass sich nicht aus allen festgelegten Werten ein spezialisierter berechneter Wert bilden lässt, z. B. aus Prozentangaben, da die Basis dafür erst während der Darstellung berechnet wird. Während der Darstellung werden daher „benutzte“ bzw. „verwendete“ Werte ermittelt.

Beispiel 
p {
   width: 80%; 
}
In diesem Beispiel wird dem p-Element eine Breite von 80% zugewiesen. Während der Kaskade ist es nicht möglich, die Breite des Elternelements von p herauszufinden. Der berechnete Wert von width beträgt also 80%. Erst nach der Kaskade, wenn die Darstellung erfolgt, kann der benutze Wert ermittelt werden. Besitzt das Elternelement von p beispielsweise eine Breite von 220 Pixel, beträgt der benutze Wert für die Breite des Absatzes 176 Pixel (220 Pixel mal 0,8 ergibt 176 Pixel).

Der tatsächliche Wert

Durch die Einschränkungen, die einem Ausgabemedium innewohnen können, ist es manchmal nicht möglich, dass der benutzte Wert verwendet wird. Beispielsweise können auf einem Bildschirm keine Pixelwerte mit Dezimalstellen dargestellt werden. Der Browser muss hier einen Annäherungswert an den benutzten Wert ermitteln. Dieser Wert wird als „tatsächlicher“ Wert bezeichnet.

Beispiel 
<div id="information">
  <p class="kleingedrucktes">Kleine Information.</p>
</div>

#information     { font-size: 16px; }
.kleingedrucktes { font-size: .8em; }

In diesem Beispiel wird die Schriftgröße des div-Elements auf 16 Pixel festgesetzt. Bei Elementen mit der Klasse kleingedrucktes soll die Schriftgröße nur 80% der normalen Schriftgröße betragen. Der Browser errechnet daher den berechneten und benutzten Wert 12,8 Pixel (16 Pixel mal 0,8 ergibt 12,8 Pixel). Auf einem Ausgabemedium auf dem nur ganzzahlige Pixelwerte dargestellt werden können, rundet der Browser den berechneten Wert auf und bildet so den tatsächlichen Wert: 13 Pixel.


Wie können Sie die berechneten und tatsächlichen Werte von CSS-Eigenschaften ermitteln?

Spezielle Eigenschaftswerte, um die Vererbung zu steuern

Sie können jeder CSS Eigenschaft einen der folgenden Werte zuweisen, um die Vererbungsregeln für diese Eigenschaft zu überschreiben.

Beachten Sie: Bei den Shorthand-Eigenschaften können Sie diese Schlüsselworte nur ein einziges Mal angeben. Angaben wie font: inherit 2em Arial; oder margin: 1em initial; sind unzulässig.

inherit: Vererbung erzwingen

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.

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

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

Browserunterstützung
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

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

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.


Weblinks

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