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:

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 0 10". 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:

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 und Pseudoklassen werden bei der Berechnung der Spezifität ignoriert, ebenso der Universalselektor * und HTML-Formatierungen.

Direkt in HTML notierte  style-Attribute sind ID-Attributen gleichgestellt und erhöhen den unter A angeführten Wert. Mit der Verabschiedung von CSS2.1 wird es an dieser Stelle jedoch zu einer Änderung 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.

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

© 2005  Impressum