CSS Grundlagen: Vererbung

Dieser Artikel geht über den Einsatz von HTML-Tags, die, die gleichen CSS-Anweisungen besitzen.

Dafür war der Kommentar von Heiko ausschlaggebend.

Wie es genau gemacht wird, werde ich im Folgenden zeigen. Durch diese Technik erspart man sich ein zu langes und zu speicherraubendes Stylesheet.

Die Vererbung an sich ist relativ simpel. Wie oben beschrieben haben mehrere HTML-Tags ein und dieselbe CSS-Anweisung.

Ich habe dazu mal ein anschauliches Beispiel gemacht.

Im Quelltext findet ihr:

<h2>Überschrift</h2>

<p>Erste Zeile</p>

<small>Kleine Schrift</small>

Die Schriftfarbe und Positionierung dieser drei verschiedenen HTML-Tags ist jedoch immer gleich und dies ist durch die Vererbung wesentlich vereinfacht.

Ohne Vererbung würde man folgendes schreiben:

h2 {color: #79B30B; padding-left:15px;}

p {color: #79B30B; padding-left:15px;}

small {color: #79B30B; padding-left:15px;}

Und mit:

h2, p, small {color: #79B30B; padding-left:15px;}

Wie man jetzt sehen kann geht das ganze immer nach demselben Prinzip.

Man schreibt einen Tag, Beispielsweise h2, macht ein Komma und schreibt den nächsten Tag genau dahinter.

Dies funktioniert auch mit classen und containern.

Beispielsweise kann man in einem Stylesheet, dann auch folgendes schreiben:

#header p, #content p, #navigation p, #footer a:link, .content_shortcut small, .navigation_head h3 {color: #ffffff}

In meinem eigenen Stylesheet habe ich allerdings auch kaum damit gearbeitet. Lediglich bei den Überschriften. Doch, um noch einmal auf Heikos Kommentar zurückzukommen, ist es schon besser, wenn man diese Technik anwendet.

Am: 3. August 2006 in Generell geschrieben von Benedikt.




 3 Leserbriefe

  1. Heiko schrieb:

    Hi Benedikt, ich denke dein eigenes StyleSheet bietet, wie von Dir erwähnt, einige gute Möglichkeiten für Vererbung. Gerade Überschriften, Texte, Listen und Links sind prädestiniert für solche Anwendungen.

  2. […] weitere CSS-Tutorials: Vererbung CSS-Aufrufe […]

  3. mancester united schrieb:

    mancester united…

    mancester united…

 Hinterlasse einen Kommentar