Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Kaskade - Anwendung von Stylesheets auf Dokumente

Informationsseite

nach unten Arten von Stylesheets
nach unten Ermittlung aller selektierten Elemente
nach unten Sortierung nach Ursprung und Priorität
nach unten Spezifität - Gewichtung der Selektoren
nach unten Sortierung nach der Reihenfolge des Vorkommens

 nach unten 

CSS 1.0 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 englischsprachige Seite Beispiel-Stylesheet für HTML 4 dokumentiert.

Wenn Sie nun Seite 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.

nach obennach unten

Ermittlung aller selektierten Elemente

Im ersten Schritt wird ermittelt, ob für ein Element CSS-Eigenschaften definiert wurden, die für den aktuell dargestellten Seite 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 nach unten Ursprung und Prioriät ermittelt.

nach obennach unten

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 nach unten 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.

nach obennach unten

CSS 2.1 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 Seite style-Attribut zugewiesen wurden.
B entspricht der Anzahl der selektierten Seite ID-Attribute (#id)
C entspricht der Anzahl der selektierten anderen Attribute (z.B. Seite Klassen) und Seite Pseudoklassen (.klasse, :pseudoklasse)
D entspricht der Anzahl der selektierten Elementnamen (e) und Seite 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 nach unten 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 nach unten 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 Seite 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.
Seite Pseudoelemente (:first-line, :first-letter, :before und :after), die nun unter D subsumiert werden, wurden bei der Berechnung der Spezifität ignoriert.

nach obennach unten

Sortierung nach der Reihenfolge des Vorkommens

Existieren zwei oder mehrere Selektoren mit identischer Gewichtung bezüglich nach unten Ursprung und Priorität sowie identischer nach unten Spezifität, entscheidet die Reihenfolge des Vorkommens - später notierte Selektoren überschreiben vorangegangene. Deklarationen aus Seite importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet.

 nach oben
weiter Seite Maßeinheiten, Farbangaben und Wertzuweisung
zurück Seite HTML-Elemente direktformatieren
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/css/formate/kaskade.htm