SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Arten von Stylesheets es gibt und wie diese auf Dokumente angewandt werden.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, Selektierung, Medientyp, Kaskade, Browser-Stylesheet, Autoren-Stylesheet, Benutzer-Stylesheet, Spezifität, Spezifizität
Date: 2005-10-02T00:38:49+02:00

| # Kaskade - Anwendung von Stylesheets auf Dokumente
| Arten von Stylesheets Ermittlung aller selektierten Elemente Sortierung nach Ursprung und Priorität Spezifität - Gewichtung der Selektoren Sortierung nach der Reihenfolge des Vorkommens

## Arten von Stylesheets

Wird ein HTML-Dokument, das kein Stylesheet referenziert und auch selbst keinerlei HTML- oder 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. Dies bedingt ein Browser-Stylesheet, das grundlegende Informationen über darzustellende Elemente für die Anzeige im Browser enthält. Beim W3-Konsortium ist ein Beispiel-Stylesheet für HTML 4 dokumentiert.

Wenn Sie nun Stylesheets in HTML einbinden, ergänzen oder übersteuern Sie damit das Browser-Stylesheet. Autorenseitig definierte Stylesheets werden als Autoren-Stylesheets bezeichnet.

Darüber hinaus besteht für Besucher Ihrer Seiten die Möglichkeit, ein sogenanntes Benutzer-Stylesheet einzubinden, das zusätzliche Definitionen enthält, wie Elemente idealerweise darzustellen sind; es legt beispielsweise eine Mindestschriftgröße oder eine Darstellung mit hohem Farbkontrast fest.

In allen Arten von Stylesheets - auch in ein und demselben - können wiederum widersprüchliche Angaben notiert sein.

### Beispiel:

    <ul id="nav">
       <li>Listenpunkt mit <a class="xy" href="ziel.htm">Verweis</a></li>
    </ul>

    a:link { eigenschaft:wert; }
    .xy { eigenschaft:wert; }
    #nav a.xy { eigenschaft:wert; }
    li a { eigenschaft:wert; }
    #nav li a { eigenschaft:wert; }

### Erläuterung:

Alle genannten Selektoren wirken für sich genommen auf das im HTML-Quelltext notierte `a`-Element. Darüber hinaus enthält bereits das Browser-Stylesheet Deklarationen für Verweise - in grafischen Browsern werden diese für gewöhnlich blau und unterstrichen dargestellt. Ein etwaiges Benutzer-Stylesheet muss ebenso berücksichtigt werden.

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

## Ermittlung aller selektierten Elemente

Im ersten Schritt wird ermittelt, ob für ein Element CSS-Eigenschaften definiert wurden, die für den aktuell dargestellten Medientyp gelten. Dies umfasst Browser-, Autoren- und Benutzer-Stylesheets. Wird nur ein zutreffender Selektor gefunden, werden die darin enthaltenen Eigenschaften auf das Element angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Exisitieren jedoch in unterschiedlichen Stylesheets verschieden lautende Angaben, wird im folgenden Schritt deren Ursprung und Prioriät ermittelt.

## Sortierung nach Ursprung und Prioriät

Definitionen in eingebundenen Stylesheets unterschiedlicher Herkunft werden gemäß folgender Reihenfolge absteigender Wichtigkeit sortiert:

Benutzer-Stylesheet mit `!important`
Autoren-Stylesheet mit `!important`
Autoren-Stylesheet
Benutzer-Stylesheet
Browser-Stylesheet

Die Basis für die Darstellung bildet das Browser-Stylesheet. Enthält ein Benutzer-Stylesheet jedoch anders lautende Deklarationen, überschreiben diese das Browser-Stylesheet und legen somit die Darstellung einer Seite ohne jedwede autorenseitige Vorschläge fest. Definieren Sie nun im Autoren-Stylesheet Formatierungen, werden diese höher gewichtet als das Benutzer-Stylesheet. Dies gilt allerdings nicht für Angaben in Benutzer-Stylesheets, die mittels nachfolgend beschriebener `!important`-Regel festgelegt wurden.

Findet ein Browser nun abweichende Wertzuweisungen an dieselben Eigenschaften in Stylesheets unterschiedlichen Ursprungs, wird diejenige angewandt, die im Stylesheet mit der höchsten Wichtigkeit definiert wurde. Die Bearbeitung wird anschließend beim nächsten Element fortgesetzt. Existieren darüber hinaus in Stylesheets gleicher Wichtigkeit mehrere Selektoren, die das aktuelle Element erfassen, wird im nächsten Schritt die Spezifität der Selektoren ermittelt.

### Die `!important`-Regel

Mit `!important` ausgezeichnete Deklarationen überschreiben gleichlautende ohne diese Kennzeichnung. Der Einsatz ist sowohl in Autoren- als auch in Benutzer-Stylesheets möglich.

### Beispiel:

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

### Erläuterung:

Die Zeichenkette "`!important`" wird durch ein Leerzeichen getrennt hinter dem Wert notiert.

### Beachten Sie:

In der ersten CSS-Spezifikation wurde die Verwendung der `!important`-Regel in Autoren-Stylesheets höher bewertet als eine gleichlautende in Benutzer-Stylesheets. Dies wurde mit CSS2 korrigiert, um Benutzern die Möglichkeit zu geben, die Anzeige an ihre Bedürfnisse anzupassen. Somit existiert auf Autorenseite keine Möglichkeit, von Benutzern explizit gewünschte Eigenschaften zu überschreiben.

## Spezifität - Gewichtung der Selektoren

Alle Selektoren werden zunächst in ihre Bestandteile zerlegt und diese in folgende Kategorien unterteilt:

A enthält den Wert 1, wenn CSS-Deklarationen dem Element direkt per style-Attribut zugewiesen wurden.
B entspricht der Anzahl der selektierten ID-Attribute (`#id`)
C entspricht der Anzahl der selektierten anderen Attribute (z.B. Klassen) und Pseudoklassen (`.klasse`, `:pseudoklasse`)
D entspricht der Anzahl der selektierten Elementnamen (`e`) und Pseudoelemente (`:pseudoelement`)

### 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 die Regel angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Andernfalls entscheidet die Reihenfolge des Vorkommens.

### Beachten Sie:

Der Universalselektor `*` und HTML-Formatierungen finden keine Berücksichtigung. Die Berechnung erfolgt nicht nach dem Zehnersystem, "0 0 1 2" ist daher spezifischer als beispielsweise "0 0 0 42".

### Hinweis:

CSS 2.1 weicht in folgenden Punkten von CSS2 ab:

Direkt in HTML notierte style-Attribute waren in CSS2 noch ID-Attributen gleichgestellt und erhöhten den (nun) unter B angeführten Wert, die nunmehrige Spalte A existierte noch nicht.
Pseudoelemente (`:first-line`, `:first-letter`, `:before` und `:after`), die nun unter D subsumiert werden, wurden bei der Berechnung der Spezifität ignoriert.

## Sortierung nach der Reihenfolge des Vorkommens

Existieren zwei oder mehrere Selektoren mit identischer Gewichtung 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.

| Maßeinheiten, Farbangaben und Wertzuweisung
| HTML-Elemente direktformatieren

© 2007 Impressum