Veit Schiele Communications

Veit Schiele Communications

Kaskaden und Vererbung

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:10 © Veit Schiele Communications GmbH, 2007–2017

Vererbung

Einige Werte werden von den untergeordneten Elementen eines Elements im Dokumentbaum geerbt. Jede Eigenschaft definiert, ob sie geerbt wird oder nicht.

Um eine ererbbare Stileigenschaft für ein Dokument einzurichten, kann die Eigenschaft in der Wurzel des Dokumentbaums festgelegt werden – in HTML beispielsweise im body-Element.

Da die Eigenschaft color vererbbar ist, erben in folgendem Beispiel alle Ableitungen des body-Elements die Farbe black:

body {color: black;}

Angegebene Prozentwerte werden nicht vererbt, berechnete Werte dagegen schon.

inherit

Durch inherit wird die Ererbung des berechnete Wert eines übergeordneten Elements erzwungen.

@import

@import erlaubt Nutzern, 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:

@import url(http://www.veit-schiele.de/vsScreen.css);

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 (z.B. HTML) an.
Benutzer
Der Benutzer kann Stilinformationen für ein bestimmtes Dokument angeben.
Benutzerprogramm
Konforme Benutzerprogramme müssen vor allen anderen Stylesheets für ein Dokument ein Standard-Stylesheet anwenden. 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).

Stylesheets aus diesen drei Ursprüngen überlappen sich im Gültigkeitsbereich. Die CSS-Kaskade ordnet jeder Stilregel eine Gewichtung zu, wobei sich diejenige mit der höchsten Gewichtung durchsetzt:

  • Priorität haben immer die !important-Regeln;
  • Regeln in Autoren-Stylesheets haben mehr Gewicht als Regeln in Benutzer-Stylesheets.
  • Alle Benutzerregeln und Autorenregeln haben mehr Gewicht als die Regeln des Benutzerprogramms.

Importierte Stylesheets sind ebenfalls kaskadenartig angeordnet, und ihre Gewichtung ist von ihrer Import-Reihenfolge abhängig.

Kaskaden-Reihenfolge

  1. Es werden alle Deklarationen ermittelt, die sich auf das betreffende Element und die Eigenschaft für den Ziel-Medientyp beziehen.
  2. Deklarationen werden 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.
  3. Die zweite Sortierung erfolgt nach der Spezifität des Selektors: Spezifischere Selektoren überschreiben allgemeinere Selektoren. Dabei werden Pseudo-Elemente und Pseudo-Klassen als normale Elemente bzw. Klassen betrachtet.
  4. Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang. Regeln in importierten Stylesheets werden vor allen anderen Regeln verwendet.

!important-Regeln

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.