Cascading Style Sheets ::Grundlagen

CSS-Vererbungsregeln zusammengefasst

Das Konzept der Vererbung wurde mit CSS 2 eingeführt und bildet heute eins der Kernkonzepte der Cascading Stylesheets. Es steht für die Übertragung der deklarierten CSS-Werte von einem Element auf das nachfolgende. Dabei gibt jedes Element des Dokuments seine Werte an seine Kind- Elemente weiter. Grundsätzliches zur Baumstruktur und zum Konzept der Abstammung ist im Artikel Der Dokumentstammbaum erläutert.

Genau genommen müssen wir uns das so vorstellen, dass jedes (X)HTML-Element etwa 110 Eigenschaften besitzen kann. Nicht jede Eigenschaft ist an jedem Element anwendbar. Die Spalte 'Anwendbarkeit' auf den Seiten der Schnellreferenz zeigt, an welchen Elementen welche Eigenschaften deklariert werden können. Jede dieser Eigenschaften kann einen oder mehrere Werte annehmen. Diese Werte deklarieren wir mit Hilfe von Stylesheets.

Der große Vorteil der Vererbung ist nun, dass die deklarierten Werte von jedem Element des Dokuments an dessen Kind- Elemente weiter gegeben werden. Wir brauchen sie deshalb nicht für jedes Element erneut zu deklarieren. Das spart uns eine Menge Arbeit und macht das Stylesheet übersichtlicher.

Wie die Vererbung funktioniert

Bei der Vererbung gibt ein Element den oder die Werte seiner Eigenschaft A an die Eigenschaft A seines Kind- Elements weiter, der Wert der Eigenschaft B geht an die Eigenschaft B des Kind- Elements, usw. Es werden also die Werte aller Eigenschaften an die korrespondierenden Eigenschaften des Kind- Elements übertragen. Die Vererbung erfolgt dabei immer von HTML-Element zu HTML-Element entlang der Baumstruktur des Dokuments.

Es ist nicht möglich, ein bestimmtes Element als Zielelement der Vererbung zu bestimmen. So können wir z. B. keine Eigenschaften gezielt von einem Element auf ein anderes übertragen. Schon gar nicht lässt sich eine Vererbungs- Struktur innerhalb des Stylesheets definieren.

Grafische Darstellung eines Dokumentstammbaums (Elemente im Kopf des Dokuments ausgeblendet).

Praktischerweise wollen wir unsere Betrachtung der Vererbungsregeln auf das Element body und seine Nachfahren- Elemente beschränken. Im Dokument- Stammbaum rechts lässt sich verfolgen, wie jedes Element generell seine Werte an seine Kind- Elemente vererbt:

Die an das erste Element div (links) deklarierten Werte werden über die Elemente der Liste bis zu den Anker- Elementen 'durchgereicht'. Auch die Regeln, die für die Elemente ul und li zutreffen, werden bis an die Elemente a weiter gegeben.

Analog dazu gibt der div-Container auf der rechten Seite die für ihn geltenden Deklarationen an die Elemente p und table weiter. Diese wiederum vererben die deklarierten Werte an ihre eigenen Kind- Elemente. Dieser Grundsatz gilt generell und auch dann, wenn ein Element mit einem geerbten Wert nichts anfangen kann. So wirken sich z. B. die Werte der Eigenschaft font-size nicht auf die Tabellenelemente aus, dennoch werden sie letztendlich an den Elementen innerhalb der Tabellenzellen wieder sichtbar.

Weil aber nichts auf der Welt einfach ist, gibt es einige Einschränkungen und Verfeinerungen zu beachten, die trotzdem alle Sinn machen. Wir sehen uns diese Ausnahmefälle weiter unten noch genauer an. Vorher wollen wir aber auf ein paar unnötige Deklarationen eingehen, die immer wieder empfohlen werden.

Vererbungs-Mythen

Es gibt ein paar nutzlose Deklarationen, die sich immer noch hartnäckig auf einigen Websites, aber auch in einzelnen Fachbüchern, halten. Sie gehen zurück auf die Zeit um 2000/2001, als sich die Unterstützung von CSS 2, und damit der Vererbung, noch nicht allgemein durchgesetzt hatte. Damals hatten sie den Sinn, die Eigenschaften mit neutralen Werten vorzubesetzen. Heute ist das nicht mehr notwendig, weil alle Browser sich an die festgelegten Ausgangswerte und an die Vererbungsregeln halten. Zwei dieser Empfehlungen sollen hier beispielhaft betrachtet werden.

Vorbesetzen der Eigenschaften margin und padding mit dem Wert 0.
Oft wird empfohlen, diese Eigenschaften für die Elemente html und body (oder auch andere) mit dem Wert 0 vorzubesetzen. Dabei wird argumentiert, man habe so eine bessere Kontrolle über die Abstände. Das folgende Negativbeispiel mag diese Vorgehensweise illustrieren:
html, body, p, ul, li { padding: 0; margin: 0; }
Tatsächlich gibt es eine Reihe von Gründen, die gegen diese Praxis sprechen.
  • Die Ausgangswerte der Eigenschaften margin und padding sind bereits 0. Sie brauchen also nicht noch einmal extra deklariert zu werden.
  • Wer zusätzlich Listenelemente in so eine Vorbesetzung mit hinein nimmt, muss beachten, dass dadurch die Einrückung der Listenpunkte verhindert wird.
  • Die Deklarierung von Eigenschaften am Element html ist an sich ohne Sinn, da hier body das einzige darstellbare Kindelement ist. Selbst wenn deklarierte Werte von html an body vererbt werden, reicht es aus, die Deklaration am Element body vorzunehmen (siehe dazu das nächste Beispiel). Grundsätzlich sollte man den Selektor html nur für Browserhacks verwenden.
Wirklich notwendig ist nur, dass man die Eigenschaft margin am Element body zurück setzt, weil sonst in den meisten modernen Browsern die Inhalte mit einem kleinem Abstand zum Browserfenster ausgegeben werden:
body { margin: 0; }
Font-Eigenschaften für alle Elemente vorbesetzen.
Eine andere Unsitte ist die Empfehlung, die Angaben zur Schrift für alle Elemente innerhalb des Webdokuments vorzudefinieren.
body, p, ol, ul, li, h1, h2, h3, h4, h5, h6, q, tr, td usw usf { font: 15px "Trebuchet MS",Verdana,sans-serif; }
Auch hier gibt es wieder eine Reihe von Argumenten, die gegen diese Praxis sprechen:
  • Alle font- Eigenschaften werden vererbt, eine Deklaration ist daher nur am Element body notwendig.
  • Übertriebene Gruppierungen führen zur Unübersichtlichkeit im Stylesheet.
  • Auch, wenn es heute nicht mehr so wichtig ist: die zusätzlichen Bits und Bytes müssen alle herunter geladen werden und vergrößern unnötig das Übertragungsvolumen.
  • So eine Vorabdeklaration für alle Elemente bedeutet eine Regel mehr, die in der Kaskade erfasst und verarbeitet werden muss. Das heißt, für die Darstellung jedes einzelnen Elements auf dem Bildschirm ist mehr Rechenzeit erforderlich — die Ausgabe im Browser wird verlangsamt.
Wenn man diese Deklaration nur an das Element body anbringt, gilt sie automatisch für alle Elemente der Website.
body { font: 15px "Trebuchet MS",Verdana,sans-serif; }

Abteilung 'Lasten und Beschränkungen'

Hier nun geht es um alles, was nicht geht. Die Liste der Ausnahmen ist nicht unbedingt kurz:

Vererben oder nicht vererben....

Die erste Einschränkung der Vererbung liegt an den Eigenschaften selbst, denn nicht für alle Eigenschaften werden die Werte von einem Element zum nächsten vererbt. Die folgende Tabelle gibt eine Übersicht darüber, welche Eigenschaften ihre Werte vererben und welche nicht. Ob Werte vererbt werden oder nicht, ist dabei nicht davon abhängig, ob sie vorher deklariert wurden. Wenn für eine Eigenschaft kein Wert deklariert wurde, gilt immer der Ausgangswert, und der wird gegebenenfalls auch vererbt.

Diese Eigenschaften vererben ihre Werte immer Diese Eigenschaften vererben ihre Werte nicht
Box- Modell ——— padding-Eigenschaften,
border-Eigenschaften des Box-Modells,
margin-Eigenschaften.
Farben, Hintergründe color. background-Eigenschaften.
Schriftformatierung font-Eigenschaften. ———
Texteigenschaften word-spacing, letter-spacing, text-transform, text-align, text-indent, white-space.
text-decoration, text-shadow.
An Tabellen caption-side, text-align, empty-cells, border-collapse, border-spacing. display, table-layout,
vertical-align,
visibility,
border-style-Eigenschaften.
Visuelle Formatierung
und Effekte

line-height,





direction. 		width, min-width, max-width, height, min-height, max-height,
vertical-align,
display,
position,
top, right, bottom, left,
float, clear,
z-index,
unicode-bidi,
overflow, clip, visibility.
Benutzeroberfläche cursor, Systemfarben, Systemschriftarten. outline-Eigenschaften.
Generierte Inhalte list-style-Eigenschaften, quotes. content
counter-Eigenschaften,
marker-offset.
Druck-Eigenschaften orphans, widows,
page. 		page-break-Eigenschaften.
Aurale Eigenschaften azimuth, elevation
pitch-Eigenschaften, richness, speak-Eigenschaften,
speech-rate, stress, voice-family, volume. 		cue-Eigenschaften,
pause-Eigenschaften,
play-during.

Der Wert inherit

Der Wert inherit ist kein generischer Wert wie alle anderen Werte. Eine Eigenschaft, die mit inherit deklariert wird, nimmt immer den Berechneten Wert des Elternelements an, unabhängig davon, mit welcher Zahlenangabe und Einheit der Wert am Elternelement deklariert ist. Die Deklaration von inherit ist für den Webautor die einzige Möglichkeit, die Vererbung einer Eigenschaft an ein Element direkt zu beeinflussen.

Bei der Nutzung des Wertes inherit gibt es zwei Möglichkeiten:

Der Wert inherit begründet keinerlei Unterschied in der Spezifizität.

Bis heute wird dieser Wert nur durch die Gecko-Engine ausreichend unterstützt. Man sollte deshalb die Verwendung von inherit auf Beispielseiten beschränken, aber in der Produktion vermeiden.
TOP

Relative und absolute Werte

Im Bereich der CSS-Werte unterscheiden wir zwischen absoluten und relativen Werten. Absolute Werte sind an jedem Element unabhängig von den Werten anderer Elemente, sie werden nicht umgeformt oder umgerechnet und genauso vererbt, wie sie deklariert werden. Beispiele für absolute Werte sind: top, orange, hebrew oder 12pt.

Relative Werte (und dazu gehören auch Prozentwerte) dagegen richten sich nach den Werten der Eigenschaften an anderen Elementen, z. B. richtet sich eine in em ausgedrückte Schriftgröße nach der Schriftgröße des Eltern- Elements und eine in Prozent deklarierte Breitenangabe richtet sich nach der Breite des umschließenden Blocks. Diese Werte durchlaufen vor der Darstellung eine Reihe von Umrechnungen. Ein Zwischenergebnis dieser Umformungen, der sog. Berechnete Wert, wird an die Nachkommen weiter vererbt. Die genaue Abfolge dieser Umrechnungen ist im Abschnitt Relative Längenwerte detailliert beschrieben.
TOP

Besonderheiten bestimmter Eigenschaften

Besonderheiten bei bestimmten Elementen

Zum Abschluss soll noch auf einige spezielle Eigenheiten hingewiesen werden, mit denen Elemente die Darstellung und Vererbung ihrer Eigenschaften beeinflussen.

Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

© Copyright All Contents 2002-2023
Commercial Use prohibited.

Notizen: