11.2.3.1) Vererbung

Vererbung heißt, dass Stileigenschaften von einem Element an ein beliebiges in ihm enthaltenes Element weitergegeben werden. Bei guter Planung kann die Vererbung Stilangaben sehr effizient machen.

Oder einfacher: Die Eigenschaften eines Elements werden von dem übergeordneten bestimmt, sofern sie nicht überschrieben werden.

Vererbung an untergeordnete Elemente

CSS-Eigenschaften werden teilweise an untergeordnete Elemente vererbt und teilweise nicht.

Eigenschaften wie die Schriftgröße, die Vorder- und Hintergrundfarben, font-weight, text-decoration, font-style, … werden an die untergeordneten Elemente weitervererbt, d.h. von diesen übernommen, solange:

Im 2. Fall kann man ein Element dazu zwingen, den Wert des übergeordneten Elements dennoch auf sich zu vererben und den Standardwert zu ignorieren, das geht indem man der Eigenschaft den Wert inherit zuweist. Ob dieser Wert zur verfügung steht, ist der CSS4You-Seite der einzelnen Eigenschaften zu übernehmen.

Beispiel: font-size: inherit;

Ein Beispiel für eine Eigenschaft, die nicht vererbt wird, ist der Rahmen (border) - was durchaus logisch und gut erscheint. Die Angabe, ob ein Element vererbbar ist oder nicht, findet man stets auf der jeweiligen Eigenschaftsinfoseite auf CSS4You.

kleines Anwendungsbeispiel: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="content-language" content="de" />
   <title>Anwendungsbeispiel Vererbung</title>
 
<style type="text/css">
/* <![CDATA[ */
div#box {
  font-size: 0.8em;
  color: white;
  background-color: black;   
  font-family: Verdana; sans-serif;
}
 
a {
  color: inherit;
}
/* ]]> */
</style>
</head>
<body>
 
<div id="box">
<h1>Dieser Überschrift ist die font-size: Angabe des div-Elements egal, sie belässt es bei ihrer eigenen Größe, weil wir sie auch nicht mit inherit zur Vererbung zwingen.</h1>
<p>Dieser Absatz übernimmt die Eigenschaften des übergeordneten div-Elements anstandslos.</p>
<a href="#">Wie die Überschrift möchte dieser Link die Standardeigenschaft für color: (blau) gerne übernehmen. Mit inherit hindern wir ihn jedoch daran.</a>
<p style="background-color: darkred">Dieser Absatz legt die background-color-Eigenschaft selbst fest, darum wird sie auch nicht vererbt.</p>
<p>Alle gemeinsam übernehmen sie die Schriftart Verdana, weil kein Element diese selbst festlegen will!</p>
</div>
</body>
</html>

Relative Einheiten bei der Vererbung

Eine Besonderheit bei der Vererbung gibt es bei der Vererbung von relativen Größen. Dann bezieht sich nämlich die Größe des untergeordneten Elements relativ auf das Übergeordnete. Weißt man einem übergeordnetem Element also die Schriftgröße font-size: 0.8em zu, so bezieht sich eine Schriftgrößenangabe eines untergeordneten Elements auf diese 0.8em.

Beispiel: Man weißt einem <p>-Element font-size: 0.8em zu, einem untergeordnetem <span>-Element ebenfalls 0.8em. Dann ist die Schriftgröße des <span>-Elements erneut um den Faktor 0.8 verringert. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="content-language" content="de" />
   <title>Beispiel Vererbung relativer Einheiten</title>
 
</head>
<body>
 
<p style="font-size: 0.8em;">Das ist ein Text im p-Element mit 0.8em<br />
   <span style="font-size: 0.8em;">Das ist ein Text im untergeordneten span-Element, dem ebenfalls 0.8em Schriftgröße zugewiesen sind.</span>
</p>
</body>
</html>