CSS Inheritance – Vererbung

CSS inheritance – Vererbung

Inheritance, die Vererbung von CSS-Stilen, wirkt auf untergeordnete Elemente und sorgt zusammen mit der Kaskade mit minimalem Aufwand für ein konsistentes Erscheinungsbild, damit der Internet-Auftritt nicht aussieht wie eine Fotomontage.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Vererbte Eigenschaften

In CSS gibt es Eigenschaften, die vererbt werden, und Eigenschaften, die nicht vererbt werden. Das bekannteste und meistgenutzte Erbe ist font-family: Gibt man dem body- oder html-Element eine Schrift mit, dann erben (mit wenigen Ausnahmen) alle Elemente diese Schrift.

font-family und line-height vererben sich von einem übergeordneten Element auf die darunter liegenden Elemente. Das spart jede Menge Schreibarbeit und macht Änderungen einfach.

body { 
   font-family: Arial;
   line-height: 1.5;
}

/** Überflüssig **/
h1, h2 {
	font-family: Arial;
}

/** Überflüssig **/
p {
    font-family: Arial;
    line-height: 1.5;
}

Vererbt werden Eigenschaften wie font-family und color, bei font-size sieht es allerdings schon anders aus. Der Browser beschert von Haus aus bereits vergrößerte Schriften für Elemente wie h1.

background-color – die Hintergrundfarbe – wird nicht vererbt. Sie scheint sozusagen nur durch die transparenten Kindelemente durch. Auf einige wenige Elemente, die schon im reinen HTML besondere Eigenschaften für die Darstellung haben (z.B. das pre-Element), wirken die vererbbaren Eigenschaften nicht.

Vererbte Eigenschaften

Vererbung ist zwar intuitiv, aber man braucht ein gutes Gedächtnis, um sich zu merken, wo Inherit gilt und wo nicht. Auch ein kurzer Logikcheck hilft: Wenn border erblich wäre, hätten alle Elemente unterhalb eines Elements mit border ebenfalls einen Rahmen. Wenn background-image erblich wäre, würden Hintergrundbilder dichte Schichten bilden.

azimuth border-collapse border-spacing caption-side color cursor direction elevation empty-cells font-family font-size font-size-adjust font-stretch font-style font-variant font-weight font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans pitch-range pitch quotes richness speak-header speak-numeral speak-punctuation speak speech-rate stress text-align text-indent text-transform visibility voice-family volume white-space widows word-spacing

Elemente ohne Vererbung

Einige Elemente sind von der Vererbung ausgeschlossen. So erben z.B. input und textarea weder Eigenschaften die Schrift noch CSS color. Um unwillige Elemente mit unter das Dach zu bringen, gibt es das Schlüsselwort inherit.

input, 
textarea, 
button { 
    font-family: inherit; 
    line-height: inherit;
}

Ohne font-family:inherit würden Eingabefelder nicht in der Schrift der Seite, sondern in einer Serifenschrift gerendert. inherit wird in der Praxis selten gebraucht. Die CSS-Kaskade schüttet die nützlichen Erbschaften wie Schrift und Farbe schon automatisch nach unten aus.

Vererbung nutzen

Um die Hebelwirkung der Vererbung und der CSS-Kaskade auszuschöpfen, beginnt das CSS mit den Element-Selektoren. Element-Selektoren haben eine geringe Spezifität (Gewicht oder specificity) und überschreiben keine CSS-Klassen, die später zum CSS hingefügt werden.

a { … }
p { … }
h1, h2, h3 { … }
input, textarea { … }

CSS IMPORTANT

Damit sich eine Eigenschaft entgegen allen vorangegangenen Regeln durchsetzt, wird sie als !important notiert.

aside li a { color: green !important; }

!important ist ein Vorschlaghammer und bleibt am besten Tests in den Entwickler-Tools der Konsole der Browser vorbehalten.