style\default.css
home.html
Im Tutorial Selektoren in CSS wurde schon auf die Vererbung eingegangen, dieses Tutorial soll zeigen wie die Elemente (HTML-Tags) die Eigenschaften weiter vererben, auch wenn nicht alle Eigenschaften auf jedes Element angewandt werden können. Wie wir bereits wissen ist, dass das Element deren Eigenschaften geerbt wird, als Elternelement bezeichnet wird und jenes Element das erbt, wird als Kindelement bezeichnet.
In der Grafik können wir sehen wie die Vererbung aufgebaut ist (Wenn ein Element nicht in der Grafik ist, kann es durchaus sein, dass keine Vererbung möglich ist). Wenn wir z.B. die selbe Schriftfarbe in allen Elementen (Tags) möchten, können wir dies im body-Element angeben.
Hier ein Beispiel:
home.html
- <html>
- <head>
- <title> Vererbung in CSS </title>
- <link rel="stylesheet" type="text/css" href="style/default.css" />
- </head
- <body>
- Dies ist ein normaler Text!
- <p> Dies ist ein Textabsatz! </p>
- <ul>
- <li> Erste Zeile der Liste </li>
- <li> Zweite Zeile der Liste </li>
- </ul>
- </body>
- </html>
default.css
- body {
- color: #AA00FF;
- }
Wie wir sehen haben alle Elemente die selbe Farbe, da die Eigenschaften vom Elternelement body immer weiter vererbt wird, zur nächsten Kindklasse. Wir könnten die Eigenschaften auch schon im Element html definieren, was aber wenig sinn macht, da erst ab der Kindklasse body die Eigenschaften dargestellt werden können.
Beschränkungen der Vererbung
Viele Eigenschaften vererben ihre Werte nicht. Die Ausnahme ist der Wert inherit (erben) durch diesem Wert wird der Eigenschaftswert des Elternelements vererbt.
Es ist auch darauf zu achten in welcher Reihenfolge vererbt wird, die Werte können sich durch einer neuen Zuweisung verändert haben. Hier ein Beispiel:
default.css
- body {
- color: #AA00FF;
- }
- ul {
- color: #0000FF;
- }
Hier wird in der Zeile 5 den Element eine neue Schriftfarbe definiert, dadurch wir diese Farbe in den Kindklassen weiter vererbt die von ul erben.
Es kann auch sein, dass schon Werte vordefiniert wurden und sie dadurch nicht vererbt werden können.
Durch relative Wertangabe angegeben, mit den Maßeinheiten (Maßeinheiten in CSS) em, ex oder % die erst errechnet werden und dadurch kein Wert geerbt werden kann.
Veraltete HTML-Elemente können auch nicht vererbt werden wie z.B. die Tags i oder b. Deshalb sollten veraltete HTML-Elemente nicht mehr verwendet werden.
Durchaus gibt aber auch Eigenschaften die ihre Werte nicht vererben, darauf wird aber hier noch nicht eingegangen, da wir sie noch nicht kennen und diese hier zu erklären zuviel für das Tutorial wäre.
