Wie Vererbung in CSS funktioniert

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Bevor wir uns den Eigenschaften und dem Verhalten von Stylesheets widmen, sollten wir zuerst eines der wichtigsten Prinzipien in der Funktionsweise von CSS genauer verstehen: die Vererbung und wie damit in CSS umgegangen wird.

Stellen Sie sich einen Familienstammbaum vor. Der Stammbaum soll bei Ihrem Urgroßvater beginnen, gefolgt von seinen Kindern, darunter sein einziger Sohn (Ihr Großvater). Auf der nächsten Ebene ist Ihre Mutter und deren Geschwister und darunter kommen Sie mit Ihren Geschwistern und Ihren Kindern. Einige Ihrer Eigenschaften, beispielsweise Ihre Augen- oder Haarfarbe, haben Sie von Ihren Vorfahren vererbt bekommen, vielleicht haben Sie dieselbe Haarfarbe wie Ihre Mutter und die Augenfarbe Ihres Großvaters. Wiederum andere Eigenschaften wurden nicht vererbt. Vielleicht ist Ihr Sohn viel größer als alle anderen in der Familie.

Genauso, wie jedes Mitglied Ihrer Familie seinen Platz im Stammbaum hat, gehört jedes Element einer HTML-Seite an seinen Platz im Vererbungsbaum des Dokuments. Das Wurzelelement dieses Baums ist immer das html-Element. (Anmerkung: Das trifft sogar für Dokumente älterer Versionen des HTML-Standards zu, in denen das html-Element nicht zwingend vorgeschrieben war.) Auf das html-Element folgen immer zwei untergeordnete Elemente im Vererbungsbaum: head und body.

Die folgende Abbildung zeigt, wie der Vererbungsbaum in einem einfachen HTML-Dokument aussehen kann.

Beispiel eines HTML-Vererbungsbaums

Abbildung: Beispiel eines HTML-Vererbungsbaums.

Wie Sie sehen, befinden sich im head-Bereich des Dokuments die Elemente title und link, das gegebenenfalls auf ein externes Stylesheet verweist. Dazu kommt das Element meta, in dem Informationen über die HTML-Seite (beispielsweise der verwendete Zeichensatz) bereitgestellt werden.

Dem body-Element sind auf der nächsten Ebene fünf Elemente untergeordnet: h1 und h2, p1 als Kennzeichnung für einen normalen HTML-Absatz, ul für eine eingerückte Liste und das Blockelement div. Das div-Element enthält wiederum die beiden Absatzelemente p2 und p3, von denen eines das Betonungselement em und das andere das Ankerelement a enthält. ul ist drei Listenpunktelementen li übergeordnet, von denen wiederum eines ein em beinhaltet und das andere ein weiteres Absatzelement p4 enthält.

Bis auf die Wurzel html besitzt jedes Element in einem HTML-Dokument ein direkt übergeordnetes Element, ein sogenanntes Elternelement , oder ist diesem, mit anderen Worten, direkt untergeordnet. In der obigen Abbildung ist das Elternelement von p1 das body-Element und p1 ist umgekehrt ein direkt untergeordnetes Element, oder ein Kindelement, von body.

Die meisten Elemente sind nicht nur Nachfahre von einem, sondern von einer ganzen Reihe von Elementen auf verschiedenen Hierarchieebenen. In der obigen Abbildung ist p1 ein Nachfahre von body und html. p2 und p3 wiederum sind Nachfahren des div-Elements, des body-Elements und des html-Elements. p4 hat mit li, ul, body und html die meisten Vorfahren. Ein genaues Verständnis der Elementhierarchie ist aus zwei Gründen wichtig:

  • Erstens hängt der Einsatz eines CSS-Selektors davon ab, welche Stellung er in der Hierarchie eines Dokuments einnimmt. Es gibt zum Beispiel einen wichtigen Unterschied zwischen einem Nachfahren-Selektor und einem Selektor, der sich nur auf das direkt übergeordnete Elternelement bezieht. Mehr darüber finden Sie unter Selektoren und Struktur von CSS-Regeln.
  • Zweitens nehmen Elemente, für die nicht extra alle Eigenschaften neu definiert werden, die Eigenschaftsdefinitionen ihres Elternelements an. Wenn etwa nicht ausdrücklich eine font-family-Eigenschaft für das h1-Element in der obigen Abbildung festgelegt wird, greift es einfach auf den Schrifttyp zurück, der im <body>-Tag festgelegt wird. Nur wenn auch dort keine Angaben zur font-family gemacht werden, verwenden sowohl der Text im body als auch die h1-Überschrift die im Browser des Benutzers voreingestellte Schrift. Im Gegensatz dazu wird die Definition der Eigenschaft width eines Elements die Breite seiner Kindelemente nicht beeinflussen. Das kommt daher, weil font-family eine vererbbare Eigenschaft ist und width nicht.

Alle automatisch vererbten Eigenschaften von CSS finden Sie unter Referenz der CSS-Eigenschaften. Sie können jedoch jede beliebige Eigenschaft mit dem speziellen Wert inherit dazu veranlassen, den Wert seines Elternelements zu übernehmen.

Besonders in komplexen HTML-Dokumenten ist die Dynamik der Vererbung oft nicht einfach nachzuvollziehen. Die Mühe sollten Sie sich aber vor allem bei Seiten mit unübersichtlichen Tabellenlayouts und Inline-Stylesheets machen. Wenn das Stylesheet hier nicht richtig funktioniert, liegt die Ursache häufig daran, dass einige HTML-Elemente ihre CSS-Eigenschaften unreguliert weitervererben. Mit wenigen Nachbesserungen sind solche Seiten leicht zu retten.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg