CSS-Kaskadierung

Einführung in CSS-Kaskadierung: http://jendryschik.de/wsdev/einfuehrung/css/kaskade

  • Zum Verfassen von Kommentaren bitte anmelden.
Bewertung: 
0
Bisher keine Bewertung

Kaskade

Die CSS-Kaskade

Beginnen wir mit Ebene 1, der am wenigsten gewichteten Regel.

Ebene 1: Browser-Stylesheets

  • Browser definiert selbst gewisse Regeln, wie bestimmte Elemente auszusehen haben
  • Diese werden als erstes angewendet, werden aber auch am einfachsten bzw. als erstes überschrieben
  • Lehnen sich zum größten Teil an den Initialwerten der CSS-Empfehlung an
  • Unterscheiden sich leicht von Browser zu browser
  • Beispiel dafür ist der Standard-Abstand des <body> Elements zum Browserrand. Dieser muss – falls gewünscht – durch den Autor einer Webseite entfernt werden.

Ebene 2: User-Stylesheets

  • Einstellungen des Benutzers im Browser, die ebenfalls das Erscheinungsbild einer Webseite beeinflussen
  • Beispiel: die Definition einer bestimmten Schriftgröße.

Ebene 3: Autoren-Stylesheets

Dies sind die Stylesheets, die durch den Autoren – also durch den Entwickler – einer Webseite bei der Webseitenerstellung definiert werden.

Alle vom Autor definierten Stylesheets führen bei der Darstellung einer Webseite zu einem Gesamtstylesheet, in dem ebenfalls ein Element an mehreren Stellen, unterschiedliche Deklarationen bekommen kann, die sich überschneiden. Hier gilt: Je näher die Deklaration am Element ist, desto mächtiger ist sie.

Die Reihenfolge (in ihrer Priorität aufsteigend):

  1. externe CSS-Anweisungen
  2. interne CSS-Anweisungen
  3. style-Anweisungen direkt im Tag

Ebene 4: !important

Ist eine CSS-Deklaration mit dem Schlüsselwort “!important” versehen, wird sie immer den anderen Deklarationen bevorzugt. Sollten zwei Deklarationen mit “!important” versehen sein und auf ein Element zutreffen, gilt die zuletzt ausgegebene Deklaration.

Gewichtung der Selektoren durch die Spezifität

Doch auch unter den Selektoren gibt es bestimmte Prioritäten.
Um die Relevanz bzw. Priorität dieser Selektoren nun herauszufinden, wird ein Wert berechnet, der dessen Durchsetzungsfähigkeit festlegt. Dieser Wert lässt sich anhand eines Zahlenwertes ausdrücken, der mittels Tabelle errechnet wird.

  • A erhält den Wert 1, wenn die CSS-Deklarationen direkt im style-Attribut eines HTML-Elements notiert sind.
  • B ist die Anzahl der id-Attribute eines Selektors (“X#name”)
  • C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudoklassen innerhalb des Selektors.
  • ist die Anzahl der Elementnamen und Pseudoelemente, die der Selektor beinhaltet.

 

Beispiele:

Selektor                 A               B               C               D

a:link                       0               0               1                1

.xyz                         0               0               1                0

#nav a.xyz              0               1               1                1

li a                           0               0               0                2

#nav li a                  0               1               0                2

Um die Spezifität nun als Wert vorliegen zu haben, werden die Zahlen der Reihe nach von Kategorie A bis Kategorie D hintereinander Weg geschrieben. Deklarationen mit einem höheren Wert (also einer höheren Spezifität) überschreiben die Deklarationen, mit einer niedrigeren Spezifität.

Im oberen Beispiel beschreiben alle Selektoren das gleiche Element:

<div id="nav">

<ul>

<li><a class="xyz" href="URL">Link</a></li>

</ul>

</div>

Die Deklarationen von “#nav a.xyz” treffen aufgrund der höheren Spezifität auf das Element zu und werden angewendet.

Sortierung nach Vorkommen

Haben zwei oder mehrere Selektoren die gleiche Spezifität und sprechen das gleiche Element an, so entscheidet die Reihenfolge der Vorkommens. Da Browser den Quelltext einer Seite von oben nach unten auslesen, zählt der zuletzt notierte Selektor.

 

  • Zum Verfassen von Kommentaren bitte anmelden.
Bewertung: 
5
Durchschnitt: 5 (1 Stimme)