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.
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.
<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; }
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.
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:
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.
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.
p { font-size: 1em !important; }
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.
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:
| 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 |
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).
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.
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.
Formate < | > Das Boxmodell von CSS
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.