Stil mit {stil}

Dez 2007

Die CSS-Kaskade

p { font-size: 0.9em; }
…
…
p { font-size: 0.82em; }

Stylesheets können vier Quellen aufweisen:

1. aus dem vorgegebenen Stil, den der Browser auf jedes Dokument anwendet (z.B. Schriftgröße, Farbe und margin für p-Elemente)
2. aus einem externen Stylesheet
3. aus einer inline-Style-Regel
4. aus dem Stylesheet des Benutzers, wenn der Browser das Laden eines eigenen Stylesheets erlaubt (Benutzerstylesheets können z.B. eine bestimmte Schriftgröße erzwingen)

Assigning property values, Cascading, and Inheritance

h4 { color: darkorange; }               // aus dem externen Stylesheet
.post h4 { color: cornflowerblue; }     // das dem globalen Stylesheet 
                                        // der HTML-Datei
style="color: mediumseagreen"           // style-Attribut im h4-Tag

CSS Konflikte lösen

Wenn verschiedene Eigenschaften in Konflikt geraten, weil sie externen in der CSS-Datei, im style-Tag, in einer inline-Regel und im Stylesheet des Benutzers unterschiedlich deklariert sind, löst die Kaskade den Konflikt. Die Regel, die dem Element am nächsten liegt, hat die höhere Priorität.

1. Eine CSS-Eigenschaft überschreibt die vom Browser vorgegebene Eigenschaft.
2. Existieren Eigenschaften mit Konflikten innerhalb des globalen Stylesheets, übertrumpft die Regel, die zuletzt im globalen Stylesheet aufgeführt wird.
3. Eine genauer deklarierte Stylesheet-Regel überschreibt eines weniger genau deklarierte Regel.

   .post h4 { color: teal; }
   h4 { color: darkorange; }
   

4. Ein style-Attribut überschreibt eine Eigenschaft aus einer globalen Regel – und entspricht damit einer Regel, die im globalen Stylesheet zuletzt aufgeführt wurde.
5. Eine Eigenschaft aus dem Stylesheet des Benutzers überschreibt die Eigenschaften aus den Regeln, die der Autor des Webdokuments hinterlegt.

!important

Diese Regeln können wiederum vom Autor durch das !important-Schlüsselwort außer Kraft gesetzt werden.

p { color: white !important;
    background: green; 
    font-size: 0.9em; 
  }

Am Ende hat der Benutzer wieder die Oberhand, denn er kann selber auch wieder eine !important-Regel in sein persönliches Stylesheet legen.

zurück zum Seitenanfang