SELFHTML: Stylesheets / CSS-Formate definieren / Kaskade - Anwendung von Stylesheets auf Dokumente

SELFHTML/Navigationshilfen Stylesheets CSS-Formate definieren
	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 drei Kategorien unterteilt:

A entspricht der Anzahl der selektierten ID-Attribute (#id)
B entspricht der Anzahl der selektierten anderen Attribute (z.B. Klassen) und Pseudoklassen (.klasse, :pseudoklasse)
C entspricht der Anzahl der selektierten Elementnamen (e)

Beispiele:

Selektor	A	B	C
`#nav a.xy`	1	1	1
`#nav li a`	1	0	2
`#nav a`	1	0	1
`#nav`	1	0	0
`style="..."` (HTML)	1	0	0
`ul li .xy`	0	1	2
`a:link`	0	1	1
`a.xy`	0	1	1
`ul[id="nav"]`	0	1	1
`*.xy`	0	1	0
`li a`	0	0	2
`a`	0	0	1
`a:first-line`	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 Spalte B und zuletzt nach Spalte C. Ein Wert von "1 0 0" ist daher höher als "0 1 2" oder "0 2 3". Im oben angeführten Beispiel erreicht der Selektor #nav a.xy die höchste Spezifität (1 1 1) und überschreibt damit die vorangegangenen Deklarationen. Die nachfolgend notierten Selektoren li a (0 0 2) und #nav li a (1 0 2) weisen eine geringere Spezifität auf und werden daher übergangen:

Selektor	A	B	C
`a:link`	0	1	1
`*.xy`	0	1	0
`#nav a.xy`	1	1	1
`li a`	0	0	2
`#nav li a`	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:

Pseudoelemente (:first-line, :first-letter, :before und :after) werden bei der Berechnung der Spezifität ignoriert, ebenso der Universalselektor * und HTML-Formatierungen. Die Berechnung erfolgt nicht nach dem Zehnersystem, "0 1 2" ist daher spezifischer als "0 0 42".

Direkt in HTML notierte style-Attribute sind ID-Attributen gleichgestellt und erhöhen den unter A angeführten Wert.

Ausblick auf CSS2.1:

Mit der Verabschiedung von CSS2.1 wird es voraussichtlich zu Änderungen kommen. style-Attribute sollen künftig eine höhere Gewichtung aufweisen als ID-Attribute und bei der Berechnung der Spezifität somit noch vor diese an die erste Stelle rücken, die Stufen A bis C wandern daher um eine Kategorie nach hinten. Die bisher ignorierten Pseudoelemente sollen künftig den Wert D erhöhen.

A erhält den Wert 1, wenn die zugewiesenen Eigenschaften in einem style-Attribut notiert 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)

Selektor	A	B	C	D
`style="..."` (HTML)	1	0	0	0
`#nav a.xy`	0	1	1	1
`a:link`	0	0	1	1
`a:first-line`	0	0	0	2

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.


	Maßeinheiten, Farbangaben und Wertzuweisung
	HTML-Elemente direktformatieren

SELFHTML/Navigationshilfen Stylesheets CSS-Formate definieren