Über mich

Startseite arrow Know How arrow CSS Workshop arrow Vererbung

Vererbung

Ein sehr tolles Feature von CSS ist die sogenannte Vererbung.Das spart ne Menge Arbeit und vorallem Quellcode.

Vererbung bedeutet, dass eine Eigenschaft automatisch an alle Elemente vererbt werden, die sich darunter befinden.

Wenn ich also dem <body>-Tag sage, dass die Schrift rot ist, ist die Schrift automatisch in allen Elementen auch rot, die sich innerhalb des <body>-Tags befinden, außer ich sag einem dieser Element, dass es doch lieber z.B. weiß sein soll.



Man kann innerhalb der CSS Datei auch HTML-Elemente innerhalb einer Klasse ansteuern. Also ich will zum Beispiel, dass alle Links (<a>) innerhalb des DIVs mit der Klasse "navigation" die Schriftfarbe grün haben. Aber nur dann, wenn sich die Links in einem weiteren DIV befinden. Die Links außerhalb des DIVs sollen rot sein. Dann sähe der Quellcode so aus:

.navigation a:link {
    color:#FF0000;
}

.navigation div a:link {
    color:#00FF00;
}



Im HTML-Quellcode sieht das dann so aus:

<div class="navigation">
<a href="#">Link in rot</a>
  <div>
    <a href="#">Link in gruen</a>
  </div>
</div>



Das Gute daran ist, dass man nicht ständig Klassen vergeben muss. Sondern nur dem Hauptelement eine Klasse gibt und darunter mit dieser direkten Element-Ansteuerung arbeitet. Okay, manchmal lässt es sich nicht vermeiden weitere Klassen zu vergeben.


 
< Zurück   Weiter >