php-homepage.com

CSS Tutorial - Vererbung

Vererbung in CSS anschauliches Beispiel
Jedes Element erbt
die Eigenschaften des übergeordneten Elemtes

Einfach gesagt versteht man unter dem Begriff "Vererbung" in der Programmierung, das Weitergeben (vererben) von Eigenschaften einer Klasse zur untergeordneten Klasse. Beispiel: Klasse "Mutter" ist eine Untergeordnete Klasse von "Familie"; weisen wir nun der Klasse Familie bestimmte Eigenschaften zu, dann "erbt" diese auch "Mutter" als untergeordnete Klasse,...
CSS ist zwar keine Programmiersprache, Vererbung funktioniert hier aber nach dem gleichen Schema. Vererbung in CSS erscheint auf den ersten Blick etwas verwirrend, ich versuche deshalb dies auch für Anfänger verständlich zu machen.

Um die Vererbung in css zu verstehen, sehen wir uns nochmal kurz die grundsätzliche Struktur eines (x)-html-Dokuments an:

<html>
<head>
</head>
<body>
<p>
</p>
</body>
</html>

Gemäß der Verschachtelung von Elementen (die mit tags ausgezeichnet werden) befinden sich die Elemente "head" und "body" innerhalb des "html" Elements. "head" und "body" sind demnach "child-Elemente" von "html", wobei "p" wiederum ein child Element von "body" ist

Eltern-Kind Beziehung in css:

Jedes Element, das in ein übergeordnetes (Eltern)-Element verschachtelt wird, erbt dessen Eigenschaften.
Logischerweise könnten wir mit html {color:red} gleich das gesamte Dokument formatieren, da der Selektor "html" aber das root-Element unseres Dokuments ist, einen Sonderfall darstellt und das w3c empfielt dieses nicht zu formatieren/stylen, widmen wir uns "body" als nächstem übergeordnetem Element.
Definieren wir also in "body" die Schriftfarbe rot body{ color:red; } wird diese auch auf "p" vererbt, da "p" ein child-Element von "body" ist.
Natürlich könnten wir diese Eigenschaft für "p" wieder überschreiben: p {color:black;}, aber wenn wir die Vererbung in css im Hinterkopf behalten, definieren wir in parent-Elementen von vornherein nur Eigenschaften, die für möglichst alle untergeordneten Elemente gebraucht werden.
Sinnvoller wäre es hier zum Beispiel, in "body" nur Eigenschaften wie Hintergrundfarbe (background-color), Schrifttart (font-style), Größe, usw. zu definieren, die im gesamten Dokument gelten sollen.
Fassen wir also zusammen:
Beispiel css: body {font-family:"Times New Roman",Georgia,Serif; font-size:100%;}
p{font-size:80%;}
Wir legen im body die Schriftart ("Times New Roman", oder irgendeine gewünschte) fest, die wir wahrscheinlich für das gesamte Dokument verwenden wollen. zusätzlich noch die Schriftgröße von 100%. Beide Eigenschaften werden auf den Absatz "p" vererbt. Da wir aber später den Absatz vielleicht in kleinerer Schriftgröße dargestellt haben wollen, überschreiben wir das Attribut "font-size" indem wir es explizit für "p" nochmal mit 80% definieren.

CSS Klassen vererben(!)

CSS3 ist keine Programmiersprache und vererben von (Eigenschaften) einer Klasse zur anderen funktioniert im klassischen Sinn nicht! Die CSS Klassen Vererbung geschieht nur in der Kaskade (übergeordnete zu untergeordneter Klasse), wie am Anfang des Artikels beschrieben. Was sehr wohl möglich und auch leicht zu realisieren ist und das gleiche Resultat liefert, ist das

Nicht alle Eigenschaften werden vererbt!

Die wichtigsten sind etwa padding, border, background, display, idth, height, position,... was ja bei einigen logisch ist.
Trotzdem kann es manchmal erwünscht sein, wenn eine untergeordnete Klasse diese trotzdem erbt - dafür gibt es die Eigenschaft "inherit". Will man ein untergeordnetes Element also etwa die border-Eigenschaften trotzdem erben lassen, gibt man dem "Kind"-Element/Klasse die Eigenschaft inherit:
border:inherit;
ohne die Eigenschaften neu definieren zu müssen!

Kombinieren von Klassen

Will man mehreren Klassen/Elementen die selben Eigenschaften zuweisen, kombiniert man die Klassen einfach: Klasse1, Klasse2, Klasse3{
font size:120%; color:red; }

Details zum Thema Kombinieren von Klassen(Selektoren)