Inhaltsverzeichnis
6 Eigenschaftswerte zuweisen, Kaskaden und VererbungNachdem ein Benutzerprogramm ein Dokument geparst und einen Dokumentbaum aufgebaut hat, muss es für jedes Element in dem Baum jeder Eigenschaft einen Wert zuweisen, die sich auf den Ziel-Medientyp bezieht.
Der endgültige Wert einer Eigenschaft ist das Ergebnis einer dreistufigen Berechnung: Der Wert wird über die Spezifizierung ermittelt (der „spezifizierte Wert“), dann gegebenenfalls in einen absoluten Wert aufgelöst (den „berechneten Wert“) und schließlich entsprechend der Einschränkungen der lokalen Umgebung umgewandelt (der „tatsächliche Wert“).
Benutzerprogramme müssen einer Eigenschaft zunächst einen spezifizierten Wert zuweisen, basierend auf den folgenden Mechanismen (in der Priorität ihrer Reihenfolge):
Weil die Wurzel des Dokumentbaums kein übergeordnetes Element hat, kann sie keine Werte von einem übergeordneten Element verwenden; in diesem Fall wird gegebenenfalls der Ausgangswert verwendet.
Angegebene Werte können absolut sein (das heißt, sie werden nicht relativ zu einem anderen Wert angegeben, wie beispielsweise in 'red' oder '2mm') oder relativ sein (das heißt, sie sind relativ zu anderen Werten spezifiziert, wie beispielsweise 'auto', '2em' und '12%'). Für absolute Werte ist keine Verarbeitung erforderlich, um den berechneten Wert zu ermitteln.
Relative Werte dagegen müssen in berechnete Werte umgewandelt werden: Prozentwerte müssen mit einem Referenzwert multipliziert werden (wobei jede Eigenschaft genau definiert, worum es sich dabei handelt), Werte mit relativen Einheiten (em, ex, x), müssen absolut gemacht werden, indem sie anhand der entsprechenden Schrift- oder Pixelgröße berechnet werden, 'auto'-Werte müssen berechnet werden, indem die für jede Eigenschaft angegebenen Formeln ausgewertet werden, bestimmte Schlüsselwörter ('smaller', 'bolder', 'inherit') müssen durch ihre entsprechenden Definitionen ersetzt werden.
In den meisten Fällen erben Elemente berechnete Werte. Es gibt jedoch einige Eigenschaften, deren spezifizierte Werte geerbt werden können (z.B. der Zahlenwert für die Eigenschaft 'line-height'). Wenn untergeordnete Elemente den berechneten Wert nicht erben, dann ist dies in der Eigenschaftsdefinition beschrieben.
Ein berechneter Wert kann im Prinzip sofort verwendet werden, aber möglicherweise kann ein Benutzerprogramm den Wert in einer bestimmten Umgebung nicht nutzen. Beispielsweise kann es sein, dass ein Benutzerprogramm Rahmen nur mit ganzzahligen Pixelbreiten darstellen kann und deshalb einen annähernden Wert für die berechnete Breite verwenden muss. Der tatsächliche Wert ist der berechnete Wert, nachdem die Annäherung darauf angewendet wurde.
Einige Werte werden von den untergeordneten Elementen eines Elements im Dokumentbaum geerbt. Jede Eigenschaft definiert, ob sie geerbt wird oder nicht.
Angenommen, es gibt ein H1-Element mit einem darin enthaltenen Betonungselement (EM):
<H1>Die Überschrift <EM>ist</EM> wichtig!</H1>
Wurde dem EM-Element keine Farbe zugeordnet, erbt das betonte „ist“ die Farbe des übergeordneten Elements, wenn also H1 die Farbe blau hat, ist das EM-Element auch blau.
Um eine „Standard“-Stileigenschaft für ein Dokument einzurichten, können die Autoren die Eigenschaft in der Wurzel des Dokumentbaums festlegen. In HTML beispielsweise können die HTML- oder BODY-Elemente diese Funktion übernehmen. Beachten Sie, dass das auch dann funktioniert, wenn der Autor das BODY-Tag in der HTML-Quelle weglässt, weil der HTML-Parser das fehlende Tag einfügt.
Weil beispielsweise die Eigenschaft 'color' geerbt ist, erben alle Ableitungen des BODY-Elements die Farbe 'black':
BODY { color: black; }
Angegebene Prozentwerte werden nicht vererbt, berechnete Werte dagegen schon.
Betrachten Sie beispielsweise das folgende Stylesheet:
BODY { font-size: 10pt }
H1 { font-size: 120% }
und diesen Ausschnitt aus einem Dokument:
<BODY>
<H1>Eine <EM>große</EM> Überschrift</H1>
</BODY>
Die Eigenschaft 'font-size' für das H1-Element hat den berechneten Wert '12 pt' (120% von 10 pt, dem Wert des übergeordneten Elements). Weil der berechnete Wert von 'font-size' geerbt ist, hat das EM-Element ebenfalls den berechneten Wert '12pt'. Falls dem Benutzerprogramm die Schrift nicht in12pt zur Verfügung steht, könnte der tatsächliche Wert sowohl für H1 als auch für EM beispielsweise '11pt' sein.
Jede Eigenschaft kann außerdem einen angegebenen Wert von 'inherit' haben, das heißt, für ein bestimmtes Element verwendet die Eigenschaft denselben berechneten Wert wie die Eigenschaft für das übergeordnete Element des Elements. Der geerbte Wert, der normalerweise nur als Fallback-Wert verwendet wird, kann erzwungen werden, indem 'inherit' explizit gesetzt wird.
Beispiel
Im nachfolgenden Beispiel sind die Eigenschaften 'color' und 'background' auf das BODY-Element gesetzt. Für alle anderen Elemente wird der Wert von 'color' geerbt und der Hintergrund ist transparent. Sind diese Regeln Teile des Stylesheets des Benutzers, wird im gesamten Dokument schwarzer Text auf weißem Hintergrund erzwungen.
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}
Die '@import'-Regel erlaubt den Benutzern, Formatierungsregeln aus anderen Stylesheets zu importieren. Alle @import-Regeln müssen allen anderen Regelmengen im Stylesheet vorausgehen. Dem Schlüsselwort '@import' muss der URI des einzubindenden Stylesheets folgen. Auch eine Zeichenkette ist erlaubt; sie wird interpretiert, als wäre sie in url(...) eingeschlossen.
Die nachfolgenden Zeilen sind äquivalent und demonstrieren beide '@import'-Syntaxformen (eine mit „url()“, die andere mit einer Zeichenkette):
@import "mystyle.css";
@import url("mystyle.css");
Damit Benutzerprogramme vermeiden können, Ressourcen für nicht unterstützte Medientypen zu laden, können Autoren medienabhängige @import-Regeln angeben. Diese bedingten Importe listen hinter dem URI die durch Kommas voneinander getrennten Medientypen auf.
Die nachfolgenden Regeln haben dieselbe Wirkung, als wäre das importierte Stylesheet in eine @media-Regel für dasselbe Medium eingepackt, sie ersparen dem Benutzerprogramm jedoch einen sinnlosen Download.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
Wenn überhaupt keine Medientypen angegeben sind, ist der Import unbedingt. Die Angabe von 'all' für das Medium hat dieselbe Wirkung.
Stylesheets können drei verschiedene Ursprünge haben: Autor, Benutzer und Benutzerprogramm.
Stylesheets aus diesen drei Ursprüngen überlappen sich im Gültigkeitsbereich und arbeiten gemäß der Kaskade zusammen.
Die CSS-Kaskade ordnet jeder Stilregel eine Gewichtung zu. Gelten mehrere Regeln, setzt sich diejenige mit der höchsten Gewichtung durch.
Standardmäßig haben Regeln in Autoren-Stylesheets mehr Gewicht als Regeln in Benutzer-Stylesheets. Priorität haben jedoch immer „!important“-Regeln. Alle Benutzerregeln und Autorenregeln haben mehr Gewicht als die Regeln im Standard-Stylesheet des Benutzerprogramms.
Importierte Stylesheets sind ebenfalls kaskadenartig angeordnet, und ihre Gewichtung ist von ihrer Import-Reihenfolge abhängig. Regeln, die in einem bestimmten Stylesheet angegeben sind, überschreiben Regeln des gleichen Gewichts, die aus anderen Stylesheets importiert werden. Importierte Stylesheets können wiederum selbst importieren und andere Stylesheets überschreiben, was rekursiv erfolgt, und wofür dieselben Prioritätsregeln gelten.
Um den Wert für eine Element/Eigenschaft-Kombination zu ermitteln, wenden die Benutzerprogramme die folgende Sortierreihenfolge an:
Neben der Einstellung „!important“ für einzelne Deklarationen erteilt diese Strategie den Stylesheets des Autors eine höhere Gewichtung als denen des Lesers. Deshalb ist es wichtig, dass das Benutzerprogramm dem Benutzer die Möglichkeit gibt, die Beeinflussung durch ein bestimmtes Stylesheet zu deaktivieren, beispielsweise in einem Pulldown-Menü.
CSS versucht, einen Leistungsausgleich zwischen Stylesheets des Autors und des Benutzers herzustellen. Standardmäßig überschreiben die Regeln im Stylesheet eines Autors diejenigen aus dem Stylesheet eines Benutzers (siehe Kaskadenregel 3).
Des Ausgleichs halber erhält jedoch eine „!important“-Deklaration (die Schlüsselwörter „!“ und „important“ folgen der Deklaration) Priorität gegenüber einer normalen Deklaration. Sowohl Autor- als auch Benutzer-Stylesheets können „!important“-Deklarationen enthalten, und die „!important“-Regeln des Benutzers überschreiben die „!important“-Regeln des Autors. Dieses Funktionsmerkmal von CSS verbessert den Zugriff auf Dokumente, indem es Benutzern mit speziellen Anforderungen (große Schriften, Farbkombinationen usw.) die Kontrolle über die Darstellung erteilt.
Hinweis. Dies ist eine semantische Änderung gegenüber CSS1. In CSS1 hatten die „!important“-Regeln des Autors Priorität gegenüber den „!important“-Regeln des Benutzers.
Die Deklaration einer zusammenfassenden Eigenschaft (z.B. 'background') als „!important“ ist äquivalent zur Deklaration aller ihrer untergeordneten Eigenschaften als „!important“.
Beispiel
Im folgenden Beispiel zeigt die erste Regel im Stylesheet des Benutzers eine „!important“-Deklaration, die die entsprechende Deklaration im Stylesheet des Autors überschreibt. Die zweite Deklaration setzt sich ebenfalls durch, weil sie als „!important“ markiert ist. Die dritte Regel im Stylesheet des Benutzers jedoch ist nicht „!important“ und wird deshalb durch die zweite Regel im Stylesheet des Autors überschrieben (die den Stil auf eine zusammenfassende Eigenschaft setzt). Darüber hinaus ist die dritte Regel des Autors der zweiten Regel des Autors unterlegen, weil die zweite Regel als „!important“ gekennzeichnet ist. Das zeigt, dass „!important“-Deklarationen auch innerhalb von Autor-Stylesheets eine Funktion haben.
/* Aus dem Stylesheet des Benutzers */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
/* Aus dem Stylesheet des Autors */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
Die Spezifität eines Selektors wird wie folgt berechnet:
Durch die Verknüpfung der drei Zahlen a, b und c (in einem Zahlensystem mit einer großen Basis) ergibt sich die Spezifität.
Beispiel
Einige Beispiele:
* {} /* a=0 b=0 c=0 -> Spezifität = 0 */
LI {} /* a=0 b=0 c=1 -> Spezifität = 1 */
UL LI {} /* a=0 b=0 c=2 -> Spezifität = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> Spezifität = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> Spezifität = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> Spezifität = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> Spezifität = 21 */
#x34y {} /* a=1 b=0 c=0 -> Spezifität = 100 */
In HTML sind die Werte eines „style“-Attributs für ein Element Stylesheet-Regeln. Diese Regeln haben keine Selektoren, aber für die Ausführung von Schritt 3 des Kaskadenalgorithmus werden sie behandelt, als hätten sie einen ID-Selektor (Spezifität: a=1, b=0, c=0). Für die Ausführung von Schritt 4 werden sie behandelt, als stünden sie hinter allen anderen Regeln.
Beispiel
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
Im obigen Beispiel wäre die Farbe des P-Elements rot. Obwohl die Spezifität für beide Deklarationen dieselbe ist, überschreibt die Deklaration im „style“-Attribut diejenige im STYLE-Element, und zwar aufgrund von Kaskadenregel 4.
Das Benutzerprogramm kann festlegen, dass Darstellungsanweisungen aus anderen Quellen als Stylesheets berücksichtigt werden sollen, beispielsweise das FONT-Element oder das „align“-Attribut in HTML. In diesem Fall muss die Darstellungsanweisung, die nicht aus CSS stammt, in die entsprechenden CSS-Regeln übersetzt werden, und zwar mit einer Spezifität gleich 0. Man geht davon aus, dass sich die Regeln ganz am Anfang des Autor-Stylesheets befinden, und sie können von nachfolgenden Stylesheet-Regeln überschrieben werden.
Hinweis. In einer Übergangsphase wird es durch diese Vorgehensweise einfacher, stilistische Attribute in Kombination mit Stylesheets einzusetzen.
Hinweis. In CSS1 erhielten die Darstellungsanweisungen, die nicht aus CSS stammten, die Spezifität 1, nicht 0. Diese Änderung erfolgte aufgrund der Einführung des universellen Selektors, der die Spezifität 0 hat.