Workshop CSS: Teil 8 - Vererbung
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:
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:
,
,
,
,
,
,
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:
,
,
,
,
,
,
body {
font-family:Verdana, Arial, sans-serif;
background-color:#f7f7f7;
color:blue;
}
#content {
color:green;
}
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.
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:
,
,
,
,
,
body {
font-family:Verdana, Arial, sans-serif;
background-color:#f7f7f7;
color:blue;
}
#div1 {
border:1px solid red;
}
#div2 {
border:inherit;
margin:10px;
}
Wie du in dem Beispiel sehen kannst, hat der zweite <div>-Container auch einen Rahmen,
seine Kindelemente aber nicht.
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:
- Überschrift: 15px x 1.3em = 19,5px
- Absatz: 15px x 1em = 15px
Für den zweiten <div>-Container:
- Überschrift: 30px x 1.3em = 39px
- Absatz: 30px x 1em = 30px
Je nach Zeichensatz verwendet der Browser eine Schriftgröße, die dem berechneten Wert am nächsten kommt.