Vererbung

Um die ganze Sache jetzt so richtig verwirrend zu machen, werden einige Eigeschaften auch an die Kindelemente vererbt. Dabei habe ich mir nie ganz klar gemacht, welche dies genau sind.

.blau { color: blue; }

<p class="blau">
   Text in blau
   <h1>Blaue Überschrift</h1>
   <p>Auch Text in blau</p>
</p>

Das erste <p> bekommt durch die Klasse eine blaue Schrift. Da "color" vererbbar ist, erhalten alle Elemente innerhab dieses <p> auch blaue Schrift.

Die meisten Eigenschaften, welche automatisch vererbt werden, sind Schrifteigenschaften (font, color, word-spacing, text-, line-heigt, etc.).

Inherit

Die Vererbung kann erzwungen werden, wenn einer Eigenschaft der Wert "inherit" übergeben wird.

Initial

Um eine erzwungene Vererbung wieder rückgängig zu machen, kann der Eigenschaft der Wert "initial" übergeben werden, welches somit auf die Ursprungseinstellung zurückgesetzt wird.