Die vielen Möglichkeiten, CSS einzubinden, weisen schon auf eine Besonderheit der Sprache hin: Das »C« in CSS steht für »Cascading« (kaskadierend). Damit ist gemeint, dass mehrere Stylesheets zusammenwirken können, nacheinander oder parallel, selbst wenn sie konkurrierende Regeln enthalten.
So ist das Browserstylesheet das
erste Stylesheet, das auf eine Webseite angewandt wird. Darin
stehen bestimmte Regeln, die sich zum größten Teil an
den Initialwerten der CSS-Empfehlung anlehnen, aber auch
häufig von ihnen abweichen – bei
Schriftgrößen für Überschriften,
Unterstreichungen für Links, Abständen für
Formulare und Absätze und dergleichen mehr. Auch wenn nicht
alle Browser tatsächlich ein in CSS geschriebenes
Standardstylesheet verwenden, so lassen sich die mitgebrachten
Formatierungsregeln doch größtenteils in CSS
ausdrücken. Webautoren müssen sich der Tatsache bewusst
sein, dass jeder Browser Standardeinstellungen mit sich bringt,
die sich alle leicht voneinander unterscheiden. So erzeugt Opera
den Abstand des Elements body
zum Rand der
Anzeigefläche mit der Eigenschaft padding
,
während Gecko und der Internet Explorer hierfür
margin
verwenden. Um den Abstand
zu entfernen, müssen Webautoren daher beiden Eigenschaften
den Wert 0
zuweisen und damit zwei
unterschiedliche Browserstylesheets überschreiben.
Weiterhin werden zunehmend Userstylesheets eingesetzt. Dabei handelt es sich um CSS-Dateien, die sich Ihre Besucher erstellt haben, um bestimmte Vorlieben durchzusetzen, etwa eine bestimmte Schriftgröße oder eine Kombination aus Vorder- und Hintergrundfarben. Viele Browser bieten Konfigurationsmöglichkeiten, derartige Einstellungen ohne hinterlegtes CSS-Stylesheet vornehmen zu können. Opera bietet beispielsweise die Möglichkeit, die Unterstreichung von Links ein- oder auszuschalten sowie deren Farbe im besuchten und unbesuchten Zustand zu bestimmen. All diese nutzerspezifischen Einstellungen überschreiben die generellen Einstellungen im Browserstylesheet.
Schließlich können Sie auch Ihre Autorenstylesheets kaskadieren lassen,
etwa indem Sie schon im Markup mehrere Stylesheets referenzieren
oder mit der @import
-Regel zusätzliche
Stylesheets einbinden – all diese Stylesheets kaskadieren
sozusagen zu einem Gesamtstylesheet.
Es liegt nahe, dass es durch Kaskade oft zu
konkurrierenden Regeln kommt. So kann im Browserstylesheet die
Schrift »Times New Roman« für body
gesetzt sein,
im Autorenstylesheet »Georgia« an der einen,
»Arial« an der anderen Stelle und im Userstylesheet
zudem »Verdana«. Selbst innerhalb eines einzigen
Stylesheets oder gar innerhalb einer einzigen Regel können
solche Situationen auftreten. Aber wovon hängt es ab, welche
Deklaration gewinnt?
Reihenfolge
Um die Regeln zu bestimmen, die für ein Element angewandt werden sollen, muss sich der Browser verhalten, als arbeite er diese Reihenfolge ab:
- Finde alle Deklarationen, die in diesem Ausgabemedium für das Element angewandt werden müssen.
- Sortiere die Deklarationen aufsteigend nach Wichtigkeit:
-
zuerst die Deklarationen des Browserstylesheets, dann die der Userstylesheets, dann die des Autors, dann die des Autors mit einem
!important
und zuletzt die des Userstylesheets mit einem!important
.DasSchlüsselwort
!important
kennzeichnet eine Deklaration als wichtiger gegenüber einer vergleichbaren Deklaration ohne dieses Schlüsselwort. Die Deklaration einer zusammenfassenden Eigenschaft als!important
(z. B.background: transparent none !important;
) ist äquivalent zur Deklaration aller ihrer untergeordneten Eigenschaften als!important
. - Sortiere alle Deklarationen nach Gewicht, entsprechend der Spezifität der zugehörigen Selektoren.
-
Für jeden Selektor wird ein Wert berechnet, der die Relevanz des Selektors angibt, also dessen Durchsetzungsfähigkeit, wenn Sie so wollen. Diesen Wert bezeichnet man als »Spezifität«, der sich in Zahlenwerten ausdrücken lässt. Selektoren höherer Spezifität sind wichtiger als Selektoren geringerer Spezifität, solange kein
!important
im Spiel ist; der Selektor mit der höchsten Spezifität »gewinnt« und überschreibt die Regeln, deren Selektoren eine niedrigere Spezifität haben. Falls Ihr Stylesheet also nicht so funktioniert, wie Sie sich das vorstellen, eine Regel also anscheinend nicht angewandt wird, ist es wahrscheinlich, dass Sie sich die Spezifität der Selektoren genauer anschauen müssen.Die Spezifität eines Selektors besteht aus vier einzelnen Werten, die nacheinander notiert werden: A, B, C und D.
- A wird für
CSS-Regeln auf 1 gesetzt, die durch ein Attribut
style
im Quelltext definiert sind, ansonsten auf 0. - B ist die Anzahl
der
id
-Attribute eines Selektors. - C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudoklassen innerhalb des Selektors.
- D ist die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet.
Die Spezifität ergibt sich aus der Verknüpfung der vier Zahlen. In CSS 2.1 werden die Beispiele aus Tabelle 6.18 aufgeführt, die nach Spezifität aufsteigend sortiert sind:
Tabelle 6.18: Berechnung der Spezifität von Selektoren Selektor Wertzuweisung Spezifität *
A=0 B=0 C=0 D=0 0,0,0,0 li
A=0 B=0 C=0 D=1 0,0,0,1 li:first-line
A=0 B=0 C=0 D=2 0,0,0,2 ul li
A=0 B=0 C=0 D=2 0,0,0,2 ul ol+li
A=0 B=0 C=0 D=3 0,0,0,3 h1 + *[rel=up]
A=0 B=0 C=1 D=1 0,0,1,1 ul ol li.red
A=0 B=0 C=1 D=3 0,0,1,3 li.red.level
A=0 B=0 C=2 D=1 0,0,2,1 #x34y
A=0 B=1 C=0 D=0 0,1,0,0 style=""
A=1 B=0 C=0 D=0 1,0,0,0 - A wird für
CSS-Regeln auf 1 gesetzt, die durch ein Attribut
- Sortiere die Deklarationen in der vorgegebenen Reihenfolge.
-
Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang.
Aus der Reihenfolge ist übrigens eines abzulesen: Der Leser hat stets das letzte Wort. Manche Autoren wollen das nicht einsehen und versuchen, ihren Lesern um jeden Preis etwas aufzudrängen (Schriftgrößen oder Breitenangaben sind die Klassiker). Profis wissen, dass sie nie gegen ihre Leser arbeiten können und sollen, sondern immer nur mit ihnen. Wer CSS verwendet, hat automatisch Koautoren.
Ein abschließendes Beispiel soll die Berechnung der Spezifität noch einmal verdeutlichen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Spezifität von Selektoren</title> <style type="text/css"> em { color: blue; } em.foo { color: green; } p em { color: red; } </style> </head> <body> <p>Absatz mit einem <em class="foo">betonten</em> Wort</p> </body> </html>
Elemente vom Typ em
sollen in blauer
Schriftfarbe angezeigt werden, em
-Elemente der Klasse
foo
in Grün, solche in
Absätzen p
in Rot. In welcher Schriftfarbe
zeigen Browser das em
-Element nun an? Wissen Sie die
Antwort? Falls nicht, werfen Sie einfach einen Blick auf die
Spezifität der Selektoren:
Selektor | Wertzuweisung | Spezifität |
---|---|---|
em |
A=0 B=0 C=0 D=1 | 0,0,0,1 |
em.foo |
A=0 B=0 C=1 D=1 | 0,0,1,1 |
p em |
A=0 B=0 C=0 D=2 | 0,0,0,2 |
Es gewinnt folglich die zweite Regel, nicht etwa die nachfolgende, wie Sie womöglich vermutet haben. Der betonte Text erscheint in grüner Schrift.