6 Eigenschaftswerte zuweisen, Kaskaden und Vererbung
6.1 Spezifizierte, berechnete und tatsächliche Werte
Nachdem 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“).
6.1.1 Spezifizierte Werte
Benutzerprogramme müssen einer Eigenschaft zunächst einen spezifizierten Wert zuweisen, basierend auf den folgenden Mechanismen (in der Priorität ihrer Reihenfolge):
- Falls die Kaskade einen Wert ergibt, wird dieser verwendet.
- Wird die Eigenschaft dagegen geerbt, wird der Wert des übergeordneten Elements verwendet, im allgemeinen der berechnete Wert.
- Andernfalls wird der Ausgangswert der Eigenschaft verwendet. Der Ausgangswert einer Eigenschaft ist in der Eigenschaftsdefinition festgelegt.
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.
6.1.2 Berechnete Werte
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.
6.1.3 Tatsächliche Werte
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.
6.2 Vererbung
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.
6.2.1 Der Wert 'inherit'
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;
}
6.3 Die @import-Regel
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.
6.4 Die Kaskade
Stylesheets können drei verschiedene Ursprünge haben: Autor, Benutzer und Benutzerprogramm.
- Autor
- Der Autor gibt Stylesheets für ein Quelldokument gemäß den Konventionen der Dokumentsprache an. In HTML beispielsweise können Stylesheets in das Dokument aufgenommen oder extern verknüpft werden.
- Benutzer
- Der Benutzer kann Stilinformationen für ein bestimmtes Dokument angeben. Beispielsweise kann der Benutzer eine Datei angeben, die ein Stylesheet enthält, oder das Benutzerprogramm kann eine Schnittstelle bereitstellen, die ein Benutzer-Stylesheet erzeugt (oder sich so verhält, als täte sie das).
- Benutzerprogramm
- Konforme Benutzerprogramme müssen vor allen anderen Stylesheets für ein Dokument ein Standard-Stylesheet anwenden (oder sich so verhalten, als ob sie das täten). Das Standard-Stylesheet eines Benutzerprogramms sollte die Elemente der Dokumentsprache so präsentieren, dass sie den allgemeinen Darstellungserwartungen für die Dokumentsprache entsprechen (z.B. wird das EM-Element in HTML bei visuellen Browsern unter Verwendung einer kursiven Schrift dargestellt). Ein empfohlenes Standard-Stylesheet für HTML 4.0-Dokumente finden Sie unter „Ein Beispiel-Stylesheet für HTML 4.0“ (Anhang A).
- Beachten Sie, dass sich das Standard-Stylesheet ändern kann, wenn der Benutzer die Systemeinstellungen verändert (z.B. die Systemfarben) Aufgrund der Einschränkungen der internen Implementierung des Benutzerprogramms ist es jedoch unter Umständen nicht möglich, die Werte im Standard-Stylesheet zu ändern.
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.
6.4.1 Kaskaden-Reihenfolge
Um den Wert für eine Element/Eigenschaft-Kombination zu ermitteln, wenden die Benutzerprogramme die folgende Sortierreihenfolge an:
- Es werden alle Deklarationen ermittelt, die sich auf das betreffende Element und die Eigenschaft für den Ziel-Medientyp beziehen. Deklarationen werden angewendet, wenn der entsprechenden Selektor mit dem betreffenden Element übereinstimmt.
- Primär werden die Deklarationen nach Gewichtung und Ursprung sortiert: Für normale Deklarationen überschreiben Autor-Stylesheets die Benutzer-Stylesheets, die wiederum das Standard-Stylesheet überschreiben. Für „!important“-Deklarationen überschreiben Benutzer-Stylesheets Autor-Stylesheets, die wiederum das Standard-Stylesheet überschreiben. Eine „!important“-Deklaration überschreibt normale Deklarationen. Ein importiertes Stylesheet hat denselben Ursprung wie das Stylesheet, von dem es importiert wurde.
- Die zweite Sortierung erfolgt nach der Spezifität des Selektors: Spezifischere Selektoren überschreiben allgemeinere Selektoren. Pseudo-Elemente und Pseudo-Klassen werden als normale Elemente bzw. Klassen betrachtet.
- Schließlich werden sie nach der vorgegebenen Reihenfolge sortiert: Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang. Regeln in importierten Stylesheets werden als vor allen anderen Regeln im eigentlichen Stylesheet befindlich betrachtet.
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ü.
6.4.2 !important-Regeln
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 }
6.4.3 Berechnung der Spezifität eines Selektors
Die Spezifität eines Selektors wird wie folgt berechnet:
- Zählen Sie die Anzahl der ID-Attribute im Selektor (= a)
- Zählen Sie die Anzahl der anderen Attribute und Pseudo-Klassen im Selektor (= b)
- Zählen Sie die Anzahl der Elementnamen im Selektor (= c)
- Pseudo-Elemente werden ignoriert.
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.
6.4.4 Priorität von Darstellungsanweisungen, die nicht Teil von CSS sind
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.
Dokument erstellt 04/02/2006, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/css-rf-kap06.html
Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.
Referenzen
Diese Verweise und Links verweisen auf Dokumente, die während des Schreibens dieser Seite konsultiert wurden, oder die zusätzliche Informationen liefern können, aber die Autoren dieser Quellen können nicht für den Inhalt dieser Seite verantwortlich gemacht werden.
Der Autor Diese Website ist allein dafür verantwortlich, wie die verschiedenen Konzepte und Freiheiten, die mit den Nachschlagewerken gemacht werden, hier dargestellt werden. Denken Sie daran, dass Sie mehrere Quellinformationen austauschen müssen, um das Risiko von Fehlern zu reduzieren.
