Kaskadierung und Vererbung

Arten von Stylesheets

Wird ein HTML-Dokument, das kein Stylesheet referenziert und auch selbst keinerlei CSS-Formatierungen enthält im Browser aufgerufen, so wird es dennoch mit einem Basis-Layout dargestellt. Überschriften weisen in grafischen Browsern beispielsweise einen größeren Schriftgrad auf, werden fett dargestellt und erzeugen einen neuen Absatz. Der Grund dafür ist das sogenannte Browser-Stylesheet, das grundlegende Informationen über darzustellende Elemente für die Anzeige im Browser enthält.

Browser-Stylesheet

Für HTML 4.0 ist beim W3-Konsortium ein Stylesheet hinterlegt, das für Browser-Entwickler empfiehlt, wie die Elemente von HTML 4.0 dargestellt werden sollen.

Wenn Sie CSS-Stylesheets in HTML einbinden, ergänzen oder überscrheiben Sie damit das Browser-Stylesheet. Solche autorenseitig definierten Stylesheets werden als Autoren-Stylesheets bezeichnet.

Darüber hinaus bieten einige Browser oder Browser-Erweiterungen ihren Benutzern die Möglichkeit an, sogenannte Benutzer-Stylesheets einzubinden. Auch darin sind CSS-Formate definiert — nämlich solche, die für den jeweiligen Benutzer optimal sind.

Durch diese unterschiedlichen Arten von Stylesheets — aber auch schon durch Angaben innerhalb von einzelnen Stylesheets — entstehen häufig widersprüchliche Format-Definitionen.

Beispiel:

<ul id="nav">
   <li>Listenpunkt mit <a class="xy" href="ziel.htm">Verweis</a></li>
</ul>
a:link { 
   color: blue; 
}
.xy { 
   color: yellow; 
}
#nav a.xy { 
   color: green; 
}
li a { 
   color: magenta; 
}
#nav li a { 
   color: black; 
}

Erläuterung:

Die Selektoren des Beispiels wirken alle auf das im HTML-Quelltext notierte a-Element. Wenn Sie möchten, können Sie gerne versuchen herauszufinden, in welcher Farbe der Hyperlink letztlich dargestellt wird. Darüber hinaus enthält bereits das Browser-Stylesheet Format-Definitionen für das a-Element. Ein etwaiges Benutzer-Stylesheet kann zusätzliche Format-Definitionen enthalten.

Um herauszufinden, wie Elemente letztendlich darzustellen sind, folgen Browser den nachfolgend beschriebenen Regeln.

Sortierung nach Ursprung und Priorität

Im ersten Schritt wird ermittelt, ob für ein Element CSS-Eigenschaften definiert wurden, die für den aktuellen Medientyp gelten. Medientypen sind beispielweise Bildschirm, Papier, Projektor, Handheld-Display, Fernseher, Braille-Zeile oder Screenreader. Dabei wird in allen Fällen zwischen Browser-, Autoren- und Benutzer-Stylesheets unterschieden. Werden in den unterschiedlichen Stylesheets mehrere Angaben gefunden, die auf die gleichen Elemente der HTML-Dokumentstruktur zutreffen, wird nach folgender Reihenfolge und absteigender Priorität (Wichtigkeit) sortiert:

  1. Benutzer-Stylesheet-Definitionen mit !important
  2. Autoren-Stylesheet-Definitionen mit !important
  3. Autoren-Stylesheet-Definitionen
  4. Benutzer-Stylesheet-Definitionen
  5. Browser-Stylesheet-Definitionen

Die Basis für die Darstellung bildet das Browser-Stylesheet. Enthält ein Benutzer-Stylesheet jedoch widersprüchliche Angaben, überschreiben diese die Angaben im Browser-Stylesheet. Kommt nun ein Autoren-Stylesheet mit Formatierungen hinzu (das sind die Stylesheets, die Sie als Webseiten-Anbieter bereit stellen), so werden diese im Konfliktfall höher gewichtet als die des Benutzer-Stylesheets. Das gilt allerdings nicht für Format-Definitionen des Benutzer-Stylesheets, die mit der !important-Anweisung (siehe weiter unten) versehen sind. Bei so ausgezeichneten Format-Definitionen behält das Benutzer-Stylesheet oberste Priorität.

Der Grund für diese oberste Priorität ist, dass Menschen mit Beeinträchtigungen in der Wahrnehmung letztlich für beliebige Webseiten selbst bestimmen können sollen, wie sie die Inhalte präsentiert bekommen. In der Praxis ist diese schöne Theorie jedoch sehr grau. Denn welcher Benutzer macht sich schon die Mühe und verfügt über das nötige Fachwissen, um sich alle möglichen Websites auf eigene Bedürfnisse zuzuschneiden? Intelligente Software könnte solche Benutzer-Stylesheets aber nach allgemeinen Vorlieben und Vorgaben automatisieren.

Die !important-Regel

Mit !important ausgezeichnete Format-Definitionen haben Vorrang vor widersprechenden Angaben, die keine solche Anweisung enthalten. Der Einsatz von !important ist sowohl in Autoren- als auch in Benutzer-Stylesheets möglich.

Beispiel:

p { 
   font-size: 1em !important; 
}

Erläuterung:

Die Zeichenkette !important (Ausrufezeichen und das unmittelbar anschließende Wort important = wichtig) wird hinter der Wertzuweisung an eine CSS-Eigenschaft notiert. Erst dann folgt das abschließende Semikolon.

Referenzinformationen

  • !important
CSS1.0 MSIE FFOX CHROME SAF OP

Spezifität - Gewichtung der Selektoren

Nicht nur zwischen Browser-, Benutzer- und Autoren-Stylesheets gibt es festgelegte Rangfolgen. Auch unter den Selektoren, die innerhalb eines Stylesheets versammelt sind, herrschen Prioritätsregeln. Dabei werden alle Selektoren zunächst in ihre Bestandteile zerlegt und diese in folgende Kategorien unterteilt:

  • Kategorie A erhält den Wert 1, wenn CSS-Format-Definitionen direkt im style-Attribut eines HTML-Elements notiert sind.
  • Kategorie B erhält den Wert 1 bei Selektoren für Elemente mit id-Attributen.
  • Kategorie C entspricht der Anzahl der von einem Selektor betroffenen Klassen und Pseudoklassen.
  • Kategorie D entspricht der Anzahl der von einem Selektor betroffenen Elementnamen und Pseudo-Elemente

Beispiele

Selektor A B C D
style="…" (HTML) 1 0 0 0
#nav a.xy 0 1 1 1
#nav li a 0 1 0 2
#nav a 0 1 0 1
#nav 0 1 0 0
ul li .xy 0 0 1 2
a:link 0 0 1 1
a.xy 0 0 1 1
ul[id="nav"] 0 0 1 1
*.xy 0 0 1 0
li a 0 0 0 2
a:first-line 0 0 0 2
a 0 0 0 1

Erläuterung

Die Tabelle zeigt die Kategorisierung aller Bestandteile der angeführten Selektoren in absteigender Reihenfolge ihrer Spezifität. Zunächst werden alle Selektoren nach ihrem in Spalte A angeführten Wert absteigend sortiert, danach nach dem in den Spalten B, C und zuletzt nach Spalte D. Ein Wert von "1 0 0 0" ist daher höher als "0 1 2 0" oder "0 0 1 2". Im oben angeführten Beispiel erreicht der Selektor #nav a.xy die höchste Spezifität (0 1 1 1) und überschreibt damit die vorangegangenen Deklarationen. Die nachfolgend notierten Selektoren li a (0 0 0 2) und #nav li a (0 1 0 2) weisen eine geringere Spezifität auf und werden daher übergangen:

Selektor A B C D
a:link 0 0 1 1
.xy 0 0 1 0
#nav a.xy 0 1 1 1
li a 0 0 0 2
#nav li a 0 1 0 2

Existiert im Stylesheet nur ein Selektor mit der höchsten ermittelten Spezifität, wird sein Format angewendet. Andernfalls entscheidet die Reihenfolge des Vorkommens (siehe weiter unten).

Weitere Hinweise

Der Universalselektor * und obsolete HTML-Formatierungen wie align="center" finden in dieser Rangfolgenermittlung keine Berücksichtigung.

CSS 2.1 weicht in folgenden Punkten von CSS 2.0 ab:
Direkt in HTML notierte style-Attribute waren in CSS 2.0 noch id-Attributen gleichgestellt und erhöhten den (nun) unter Kategorie B angeführten Wert. Kategorie A existierte in CSS 2.0 noch gar nicht.
Pseudoelemente wie :first-line, :first-letter, :before und :after), die seit CSS 2.1 unter Kategorie D verbucht werden, wurden in CSS 2.0 gänzlich ignoriert.

Sortierung nach der Reihenfolge des Vorkommens

Existieren zwei oder mehrere Selektoren bezüglich Ursprung und Priorität sowie identischer Spezifität, entscheidet die Reihenfolge des Vorkommens. Später notierte Selektoren überschreiben vorangegangene. Deklarationen aus importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet, auch wenn beispielsweise einer @import-Regel bereits Format-Definitionen vorangehen.

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License