 Arten von Stylesheets
 Arten von StylesheetsWird 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.
 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.
 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.
<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; }
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.
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
 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.
 Ursprung und Prioriät ermittelt. 
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.
 Spezifität der Selektoren ermittelt.
!important-RegelMit !important ausgezeichnete Deklarationen überschreiben gleichlautende ohne diese Kennzeichnung. Der Einsatz ist sowohl in Autoren- als auch in Benutzer-Stylesheets möglich.
p { font-size:1em !important; }
Die Zeichenkette "!important" wird durch ein Leerzeichen getrennt hinter dem Wert notiert.
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
 Spezifität - Gewichtung der SelektorenAlle 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.
 style-Attribut zugewiesen wurden.
B entspricht der Anzahl der selektierten  ID-Attribute (
 ID-Attribute (#id)
C entspricht der Anzahl der selektierten anderen Attribute (z.B.  Klassen) und
 Klassen) und  Pseudoklassen (
 Pseudoklassen (.klasse, :pseudoklasse)
D entspricht der Anzahl der selektierten Elementnamen (e) und  Pseudoelemente (
 Pseudoelemente (:pseudoelement)
| 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
 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.
 Reihenfolge des Vorkommens.
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".
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.
 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 (
 Pseudoelemente (:first-line, :first-letter, :before und :after), die nun unter D subsumiert werden,  wurden bei der Berechnung der Spezifität ignoriert.
Existieren zwei oder mehrere Selektoren mit identischer Gewichtung bezüglich  Ursprung und Priorität sowie identischer
 Ursprung und Priorität sowie identischer  Spezifität, entscheidet die Reihenfolge des Vorkommens - später notierte Selektoren überschreiben vorangegangene. Deklarationen aus
 Spezifität, entscheidet die Reihenfolge des Vorkommens - später notierte Selektoren überschreiben vorangegangene. Deklarationen aus  importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet.
 importierten Stylesheets werden hierbei als zuerst vorkommend betrachtet.
|   | |
|  |  Maßeinheiten, Farbangaben und Wertzuweisung | 
|  |  HTML-Elemente direktformatieren | 
|  SELFHTML/Navigationshilfen  Stylesheets  CSS-Formate definieren | |
© 2007  Impressum
 Impressum