Verlauf
Alle Kapitel anzeigen
voriges KapitelAllgemeines zur Kaskadierung ("Cascade")
Nachdem man mehrere Stylesheet-Dateien in eine HTML-Datei einbinden kann und selbst innerhalb eines Stylesheets mehrere unterschiedliche Sektoren Eigenschaften derselben Objekte beschreiben können muss es eine Möglichkeit geben, diese Überlappung zu klären und herausfinden zu können, welche der Beschreibungen dann im Endeffekt gültig ist.
Die Grobe Reihenfolge ergibt sich aus dem Ursprung der CSS-Anweisungen:
- Am geringsten zählt das "Browser Stylesheet". Dieses Stylesheet legt fest, wie Objekte aussehen, wenn keine weiteren Stylesheets eingebunden werden (z.B. h1: fett und größer als normaler Text usw.). Sobald wir also ein Stylesheet an eine HTML-Datei anhängen, überschreiben wir Teile des Browser Stylesheets.
- Als nächstes in der Rangordnung kommt das "User Stylesheet". Dieses Stylesheet liegt auf dem Endgerät des Benutzers und muss in der Konfiguration des Webbrowsers angegeben werden. Diese Art des Stylesheets kommt eher selten vor.
- Stärker zählt sodann das "Author Stylesheet". Dieses Stylesheet ist das in eine HTML-Datei eingebundene CSS-Stylesheet so wie wir es aus den Beispielen bisher kennen; Die css-Dateien werden auf dem Webbrowser abgelegt und bei Zugriff auf die HTML-Datei nachgeladen und interpretiert.
Bisher überschreibt dieses "Author Stylesheet" alle eventuell in (1) oder (2) festgelegten CSS-Beschreibungen. - Stärker als normale Angaben im "Author Stylesheet" zählen CSS-Deklarationen, die mit dem Keyword !important abgeschlossen werden.
- Am stärksten von allen Stylesheets zählen "User Stylesheets", die mit !important abgeschlossen werden - somit kann jeder Endbenutzer durch sein eigenes "User Stylesheet" in Verbindung mit !important festlegen, dass z.B. jeglicher Text doppelt so gross dargestellt werden soll; keine Bilder angezeigt werden sollen usw.
Gewichtung / Specificity
Ist der Ursprung der Stylesheets festgestellt und die Definitionen dahingehend geordnet, wird die Gewichtung ("Specificity") der einzelnen berechnet. Spezifischere Anweisungen heben allgemeinere auf bzw. überschreiben diese. Das Berechnen der Gewichtung funktioniert wie folgt:
Man denkt sich am besten eine Tabelle mit 4 Spalten. Für jede Selektorart wird in der passenden Spalte ein Zählwert eingeschrieben, die 4 Spalten von links nach rechts gelesen ergeben dann die Gewichtung; Höher gewichtete Definitionen wirken stärker als leichter gewichtete. Die erste Spalte ist - sofern man keine inline Styles verwendet, immer 0. Das erklaert auch, warum Inline Styles immer stärker "wirken" als Styles in einem externen Stylesheet.
| Selektor, Beispiel | (a) Anzahl von inline styles |
(b) Anzahl von Id-Selektoren |
(c) Anzahl von Klassen, Pseudoklassen und anderen Attributen |
(d) Anzahl von Typ-Selektoren |
Gewichtung | |
|---|---|---|---|---|---|---|
| style="..." | 1 | 0 | 0 | 0 | > | 1000 |
| #first #container {...} | 0 | 2 | 0 | 0 | > | 0200 |
| #container .datum {...} | 0 | 1 | 1 | 0 | > | 0110 |
| div #content {...} | 0 | 1 | 0 | 1 | > | 0101 |
| #datum {...} | 0 | 1 | 0 | 0 | > | 0100 |
| p.subheading .item {...} | 0 | 0 | 2 | 1 | > | 0021 |
| p.subheading {...} | 0 | 0 | 1 | 1 | > | 0011 |
| div ul li {...} | 0 | 0 | 0 | 3 | > | 0003 |
| h1 {...} | 0 | 0 | 0 | 1 | > | 0001 |
Wenn zwei CSS-Definitionen exakt diesselbe Gewichtung haben, zählt die Reihenfolge - die zuletzt aufscheinende Definition "gewinnt" und überschreibt die Definition gleichen Gewichts, die ev. vorher einmal beschrieben wurde.
Ein einfaches Beispiel für die Kaskadierungsreihenfolge:
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
p {
font-size: 80%;
color: #333333;
}
.spezial {
font-size: 100%;
font-weight: bold;
color: #000066;
}
strong {
font-weight: bold;<b
color: #FF0000;
}
</style>
