CSS - Kaskadierung - Vererbung

1. Einfache Vererbung

Bei der Einführung zur Kaskadierung haben wir gelernt, dass es bei HTML Eltern- und Kind-Elemente gibt. Und wie im richtigen Leben auch können Eltern Eigenschaften an ihre Kinder vererben. Ein kleines Beispiel soll das Prinzip illustrieren. Wenn man sich mal die Mühe macht und CSS-Dateien auf unterschiedlichsten Webseiten analysiert, so findet man sehr oft solche Anweisungen.


td, p
{
  font-family: Arial, Helvetica, sans-serif;
  ...
}
a:link, a:active, a: visited, a:hover
{
  font-family: Arial, Helvetica, sans-serif;
  ...
}
.fliesstext
{
  font-family: Arial, Helvetica, sans-serif;
  ...
}

Das ist so überflüssig wie ein Kropf(f). Dank des Vererbungsprinzips reicht in diesem Fall eine einzige Anweisung aus:


body
{
  font-family: Arial, Helvetica, sans-serif;
}

Das body-Element vererbt die Eigenschaft Schriftart Arial, Helvetica, sans-serif auf alle ihre Kindelemente weiter. Definiert man das in einer externen Datei, so hat man mit einer Anweisung die Schriftart für das ganze Projekt festgelegt. Gut es gibt dann immer noch ein Problem mit der ominösen Textarea, aber hier geht es erst mal nur ums Prinzip.

Noch ein Beispiel


a:link
{
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 0.8em;
  text-decoration: none;
}
a:active
{
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 0.8em;
  text-decoration: none;
}
a:visited
{
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 0.8em;
  text-decoration: none;
}
a:hover
{
  font-family: Arial, Helvetica, sans-serif;
  color: #f00;
  font-size: 0.8em;
  text-decoration: underline;
}

Das ist genau so blödsinnig. In diesem Fall reicht eine Standarddefinition plus die Änderungen beim :hover, da alle sonstigen Eigenschaften bereits festgelegt und vererbt worden sind.


a
{
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-size: 0.8em;
  text-decoration: none;
}
a:hover
{
  color: #f00;
  text-decoration: underline;
}

2. Erweiterte Vererbung

Man kann diese Vererbung unter Anderem auch mit zusätzlichen Klassen erweitern. Wir haben zum Beispiel eine Definition für einen Absatz.


p
{
  color: #000;
  font-size: 11px;
}

Jetzt möchten wir an diversen Stellen unseres Internetauftritts Absätze nach rechts einrücken. Also definieren wir eine Klasse namens .einrueck mit den Anweisungen, Abstand nach links auf 20 Pixel festsetzen und weisen diese dann den entsprechenden Absätzen zu.


.einrueck
{
  margin-left: 20px;
}

<p class="einrueck">Dieser Text rückt um 20 Pixel ein</p>

Damit erbt dieser Absatz die Eigenschaften der allgemeinen Absatz-Definition und die zusätzliche Eigenschaft der Klasse .einrueck. Leider gibt es wie im realen Leben auch hier Grenzen bei der Vererbung, so zum Beispiel folgende:

Schriftgrößen können nicht auf Überschriften oder Tabellenspalten vererbt werden.
Schriftfarben können nicht auf Links vererbt werden.
Schriftarten können nicht von <body>- auf <textarea>-Elemente vererbt werden.

Die Feinheiten werdet ihr im Laufe der Zeit selber herausfinden oder ihr schaut euch mal das hier an. Wichtig ist auch zu wissen, dass untergeordnete Kind-Elemente ihre Eigenschaften nicht auf übergeordnete Eltern-Elemente vererben können.

3. Mehrfach-Vererbung mit Klassen

Jetzt wollen wir uns kurz mit Klassen-Definitionen und der Mehrfachvererbung beschäftigen. Nehmen wir mal an, wir haben ein spezielles <div>-Element mit diversen Eigenschaften und nennen das Ganze kasten. Die CSS-Anweisungen und Zuweisung sähen dann vielleicht so aus:


.kasten
{
  width: 400px;
  height: 200px;
  border: 1px solid #000;
  background-color: #fff;
}
...
<div class="kasten">...</div>

Leider stellt sich im Verlauf des Projektes heraus, dass wir auf bestimmten Seiten eine fette Schrift für das <div>-Element kasten benötigen. Ansonst bleibt aber alles beim Alten. Jetzt könnte man auf die Idee kommen, eine komplett neue Klasse zu definieren, die alle Eigenschaften von kasten hat, plus die benötigte Schriftformatierung. Das ist aber nicht der Sinn der Sache, denn wenn sich zum Beispiel die Hintergrundfarbe ändern sollte, so müssten wir das an zwei Stellen tun. Stattdessen definieren wir eine Klasse mit der neuen Schriftformatierung (Name dient nur Anschauungszwecken):


.fett
{
  font-weight: bold;
}

Die Zuweisung erfolgt dann so, wobei die Reihenfolge der Klassenzuweisungen egal ist.


<div class="kasten fett">

Man könnte es auch so schreiben.


<div class="fett kasten">

Die Klasse kasten vererbt also ihre gesamten Eigenschaften auf das entsprechende <div>-Element. Hinzu kommt die zusätzliche(!) Anweisung mit fetter Schrift. Dieses Prinzip kann theoretisch bis zum Erbrechen ausgeweitet werden. Allerdings habe ich die Erfahrung gemacht, dass man spätestens bei drei oder vier Klassenzuweisungen den Überblick verliert. Setzt daher diese Technik nur äußerst selten ein. Weitere Infos dazu gibt es hier.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt