Keywords

Vererbung (Inheritance) von CSS

Jedes HTML-Dokument ist hierarchisch (in einer Baumstruktur) aufgebaut, was bedeutet, dass jedes Element (jeder TAG) einen Vor- bzw. Nachfahren besitzt - <body> ist ein ein Nachfahre von <html>, <table> ein Nachfahre von <body> und so weiter. Vor- und Nachfahren werden auch als Eltern- und Kind-Elemente bezeichnet. Der Baum, den man aus dieser Struktur von HTML-Tags generieren kann, nennt man auch den DOM-Baum.

Vererbung (oder englisch: "Inheritance") bezeichnet das Prinzip von CSS, dass Stil-Eigenschaften von Elementen auf untergeordnete Elemente übertragen (vererbt) werden. Dadurch genügt es z.B. Schriftart und -farbe auf das Body-Element zu setzen und alle anderen untergeordneten Elemente bekommen diesselbe Schriftart und -farbe vererbt.

Nicht alle Eigenschaften werden vererbt: Hintergrundfarbe und -grafiken, Abstände, Rahmen, Abmessungen,... sind Eigenschaften, die explizit für betreffende Elemente gesetzt werden müssen. Man kann allerdings statt dem Setzen eines Attributes auch "erzwingen", dass eine Eigenschaft "er-erbt" werden soll: Das Schlüsselwort "inherit" weist ein Element an, bei seinem "Elternelement" nachzusehen, welche Wert dort gesetzt ist und diesen selber auch zu verwenden.  Vererbung ist ein wesentliches Mittel, um schlanke Stildefinitionen zu erstellen und nicht diesselben Attribute x-mal redundant zu vergeben.

Stellen wir uns folgendes einfaches Beispiel vor:

[...]
   <h1>... </h1>
   <p> ...</p>
   <ul>
     <li>...</li>
     <li>...</li>
     <li>...</li>   
   </ul>
[...]

Dieser einfache HTML-Code würde in Baumform (unter Nichtbeachtung des HTML-head und damit der Meta-Tags) in etwa wie folgt aussehen:

Sobald man jetzt für den body folgende CSS-Anweisung vornimmt, wird diese Eigenschaft (nämlich die Schriftfarbe) auf alle untergeordneten Knoten vererbt:

body { color: #990000; }

Zur Veranschaulichung als Grafik sieht man alle Knoten, die diese Eigenschaft ererbt haben nun in rot eingefärbt:



Sobald man explizit für ein Objekt die ererbte Eigenschaft anders setzt, gilt nicht mehr der ererbte Wert, sondern die direkte Zuteiung:

Und so sieht das im Browser aus

Bei Verschachtelung von Layoutcontainern können durch die Wertangabe inherit Eigenschaften an Kind-Elementen, wie z.B. border, padding, usw. weitergegeben werden.

body {
   font-size: 14px;
   color: #000000;
   font-family:Arial, Helvetica, sans-serif;
}
#container1 {
   background-color:#CCCCCC;
   width: 350px;
   padding: 5px;
   border: solid 1px #666666;
}
#container2 {
   border:inherit;
   padding: inherit;
   background-color:#ffffff;
}

Bewirkt folgende Anzeige

Module, die für die Durchführung vorausgesetzt werden