Hier bist Du: Home « Workshops « Workshop CSS: Teil 8 - Vererbung

Workshop CSS: Teil 8 - Vererbung

 

nach oben

Vererbung

Ein XHTML-Dokument ist in einer Baumstruktur aufgebaut. Jedes Element hat Vor- und evtl. Nachfahren, die man als Eltern- und Kind-Elemente bezeichnet. Formatierst du ein Element mit Stylesheets, so übernehmen nachfolgende Kindelemente einige dieser Formatierungen. Diesen Vorgang bezeichnet man als Vererbung. die folgende Grafik zeigt die Baumstruktur eines XHTML-Dokuments:

Bild eines Dokumentenbaums

Der Quellcode sieht vereinfacht so aus:

<body>
<div>
 <h1>...</h1>
 <div>
 <h2>...</h2>
  <p>
   <span>...</span>
  </p>
 </div>
</div>
</body>

Das <body>-Tag enthält einen <div>-Container als Kind-Element, bzw. Nachfahre. Direkte Nachfahren dieses Elements sind eine Überschrift mit <h1> und ein weiterer <div>-Container, der eine Überschrift mit <h2> und einen Absatz <p> mit einem <span>-Tag als Kind-Element enthält.

Das folgende Stylesheet soll auf dieses Dokument angewendet werden:

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
body {
 font-family:Verdana, Arial, sans-serif;
 background-color:#f7f7f7;
 color:blue;
}

Ein CSS-Konformer Browser zeigt alle Texte in diesem Beispiel in blau mit Schriftart "Verdana" an.
Schriftart und -farbe gehören zu den Eigenschaften, die von Element zu Element vererbt werden. So reicht es also diese Eigenschaften nur im <body>-Tag festzulegen.
Die Hintergrundfarbe wird nicht vererbt. Sie ist in diesem Beispiel trotzdem bei allen Elemente gleich, da der Initialwert transparent ist und so die im <body>-Tag eingestellte Farbe zusehen ist.

In dem zweiten Beispiel wurde dem zweiten <div>-Container die Schriftfarbe Grün zugewiesen:

Bild eines Dokumentenbaums

Internet Explorer 4.0, Opera 5, Netscape 4.7, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
body {
 font-family:Verdana, Arial, sans-serif;
 background-color:#f7f7f7;
 color:blue;
}
#content {
 color:green;
}

Beispiel

Ist für ein Element eine vererbbare Eigenschaft angegeben, wie in diesem Fall die Schriftfarbe für den zweiten <div>-Container, erbt es natürlich nicht mehr den Wert des Elternelements. Es vererbt aber den eigenen Wert wieder an die eigenen Nachfahren.

 

nach oben

Der Wert "inherit"

In den Beschreibungen der einzelnen Eigenschaften und der Kurzreferenz findest du auch den Punkt Vererbbar, der dir sagt, ob eine Eigenschaft weitervererbt wird. Es macht z.B. keinen Sinn, wenn die Rahmeneigenschaften weitervererbbar wären. Dann hätte jedes Element einen Rahmen und das würde aussehen, wie in diesem Beispiel.

Nun gibt es aber Situationen, in denen das Vererben erwünscht ist. Dafür gibt es den Wert inherit, mit dem du für die meisten Eigenschaften festlegen kannst, dass sie den Wert des Elternelements erben sollen. Bleiben wir bei dem Rahmen und nehmen wieder das folgende XHTML-Dokument als Beispiel:

<body>
<div id="div1">
 <h1>...</h1>
 <div id="div2">
 <h2>...</h2>
  <p>
   <span>...</span>
  </p>
 </div>
</div>
</body>

In den Stylesheets wird nun für das erste <div>-Tag ein roter Rahmen festgelegt, den der zweite <div>-Container erben soll:

Opera 7.5, Netscape 6.x, Mozilla 1.0, Mozilla Firefox 0.8, Safari 1.0, Konqueror 3.1
body {
 font-family:Verdana, Arial, sans-serif;
 background-color:#f7f7f7;
 color:blue;
}
#div1 {
 border:1px solid red;
}
#div2 {
 border:inherit;
 margin:10px;
}

Beispiel

Wie du in dem Beispiel sehen kannst, hat der zweite <div>-Container auch einen Rahmen, seine Kindelemente aber nicht.

 

nach oben

Die Eigenschaft "font-size"

Die Eigenschaft font-size ist weitervererbbar, jedoch wird ihr berechneter Wert vererbt. Schau dir dazu das folgende Beispiel an:

<body>
 <div id="div1">
  <h1>Überschrift</h1>
  <p>Franz jagt im komplett verwahrlosten Taxi 
  quer durch Bayern</p>
 </div>
 <div id="div2">
  <h1>Überschrift</h1>
  <p>Franz jagt im komplett verwahrlosten Taxi 
  quer durch Bayern</p>
 </div>
</body>

Und die Stylesheets:

#div1 { font-size:15px; }
#div2 { font-size:30px; }
h1 {font-size:1.3em; }
p {font-size:1em; }

Zwei <div>-Container mit unterschiedlichen Schriftgrößen und jeweils einer Überschrift und einem Absatz als Kindelemente.
Nun wird nicht Schriftgröße 15px bzw. 30px weitervererbt, sondern die Schriftgröße für die Überschrift und den Absatz berechnet:
Für den ersten <div>-Container:

Für den zweiten <div>-Container:

Je nach Zeichensatz verwendet der Browser eine Schriftgröße, die dem berechneten Wert am nächsten kommt.

nach oben