Vererbung
Die geschickte Anwendung dieses Konzepts ermöglicht Ihnen, allgemeingültige Eigenschaften wie zum Beispiel Schriftart und -größe, Hintergrundfarbe usw. zentral zu definieren, statt dieselben Eigenschaften jedem einzelnen Element zuzuweisen. So bleiben Ihre Stylesheets schlank und übersichtlich und sind leichter zu pflegen.
Eigenschaften, die bestimmten Elementen zugewiesen wurden, werden auf die Kindelemente vererbt. Natürlich kann ein Element seine vom Elternelement geerbten Eigenschaften auch auf die eigenen Kinder weiter vererben. Wie geht das nun genau mit der Vererbung? Stellen Sie sich für einen Moment vor, dass es in CSS keine Vererbung gäbe und betrachten dies an folgendem HTML-Code:
<div id="box1">
<p>Hier ein Text.</p>
<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
</ul>
<p> Hier ein weiterer Text.</p>
</div>Angenommen, die Texte in Box1 sollen eine andere Schriftart und Schriftgröße als der Rest des Dokuments haben. Ohne Vererbung müssten Sie diese Veränderung für jeden einzelnen Element-Typ innerhalb von Box1 explizit festlegen, also zum Beispiel mit Hilfe eines Nachfahrenselektors:
#box1 p {
font-family: Arial, sans-serif;
font-size: 85%;
}
#box1 li {
font-family: Arial, sans-serif;
font-size: 85%;
}Für jeden weiteren Element-Typ innerhalb von Box1 müssten Sie einen weiteren Selektor hinzufügen. Dank des Vererbungsmechanismus benötigen Sie jedoch nur einen einzigen Selektor, nämlich:
#box1 {
font-family: Arial, sans-serif;
font-size: 85%;
}Die definierte Schriftart und Schriftgröße wird an alle Kindelemente des Elements mit der id="box1" vererbt, in diesem Falle an die Elemente <p> und <li>.
Hier können Sie schon erkennen, dass es vorteilhaft ist, gewisse Basiseigenschaften wie Schriftarten, Schriftgrößen und Farben möglichst früh, zum Beispiel für das <body>-Element, zu bestimmen, so dass diese nicht für jedes Element im Dokument wiederholt werden müssen.
Vererbung relativer Werte
Vor allem die Vererbung von relativen Werten wie zum Beispiel Schriftgrößen in EM oder Prozenten kann immer wieder zu unliebsamen Überraschungen führen. Relative Werte werden im Verhältnis zu anderen Größen definiert. Daher muss aus dem in einer Anweisung festgelegten Wert ein (am Bildschirm) darstellbarer Wert berechnet werden. Dies geschieht in vier Schritten, die hier nur kurz und stark vereinfacht beschrieben werden:
- Basierend auf den Anweisungen aller referenzierten Stylesheets wird ein Spezifizierter Wert zugeordnet.
- Unter Berücksichtigung der Kaskade wird der Berechnete Wert abgeleitet und an die Kindelemente vererbt.
- Im nächsten Schritt wird der relative Wert in Pixel umgerechnet. Das Ergebnis ist der Verwendete Wert, also der endgültige absolute Wert, der für das eigentliche Layout verwendet wird.
- Für die Darstellung am Bildschirm wird ein Pixelwert aus ganzen Zahlen benötigt. Der vierte und letzte Schritt besteht aus einem Rundungsverfahren, mit dem der Aktuelle Wert ermittelt und auf das jeweilige Element angelegt wird.
inherit
Bitte beachten Sie, dass nicht alle Eigenschaften vererbbar sind. Trotzdem können Sie eine Vererbung auch für Elemente bestimmen, deren CSS-Eigenschaften normalerweise nicht weiter vererbt werden. Das Schlüsselwort dafür ist inherit.
Welche Eigenschaften automatisch vererbt werden, können Sie den detaillierten Eigenschaftsbeschreibungen in der Rubrik CSS2.1-Referenz entnehmen.
