Zurück: Vokabular und Syntax
Weiter: Werte

Kaskade

Auf welche Art und Weise ein Element auf einer Website dargestellt wird, ergibt sich aus einer festgelegten Sortierreihenfolge.

  1. Es werden alle Deklarationen ermittelt, die sich auf das betreffende Element und die Eigenschaft beziehen.

  2. Die Regeln werden nach Ursprung und Gewichtung sortiert.

    Wenn Sie sich XHTML-Dokumente in einem grafischen Browser anschauen, werden Sie feststellen, dass jedes Element auf eine ganz bestimmte Art und Weise dargestellt wird. Überschriften werden ihrer Wichtigkeit entsprechend groß und fett dargestellt, Listen wird ein Bullet vorangestellt, die Hintergrundfarbe ist vermutlich weiß, die Vordergrundfarbe schwarz. Der Browser wendet also ganz bestimmte Gestaltungsmerkmale auf die einzelnen Elemente an. Je nach Browser können sich diese Gestaltungsmerkmale verändern, man denke nur an den Textbrowser Lynx. Ein Browser tut also nichts anderes, als XHTML-Dokumente nach einem festgelegten Browser-Stylesheet darzustellen.

    Jeder Browser bietet Konfigurationsmöglichkeiten. Es lassen sich Schriftgrößen und -farben festlegen oder das Aussehen der Links in deren unterschiedlichen Zuständen bestimmen. Oft haben Sie die Möglichkeit, eigene Stylesheets einzubinden. Ihre Einstellungen überschreiben das Browser-Stylesheet.

    Das Stylesheet einer Website, die Sie besuchen, überschreibt wiederum Ihre Einstellungen. Es existiert somit folgende Kaskade:

    1. Das Stylesheet des Browsers
    2. Das Stylesheet des Nutzers
    3. Das Stylesheet des Autors
     

  3. Spezifische Selektoren überschreiben allgemeinere Selektoren.

    Für jeden Selektor wird ein Wert berechnet, der die Relevanz des Selektors angibt. Diesen Wert bezeichnet man als Spezifität eines Selektors. Sie ist eines der Kriterien, nach denen ein User-Agent im Konfliktfall die CSS-Regeln sortiert. Selektoren höherer Spezifität sind wichtiger als Selektoren geringerer Spezifität. Falls Ihr Stylesheet also nicht so »funktioniert«, wie Sie sich das vorstellen, eine Regel also anscheindend nicht angewandt wird, ist es wahrscheinlich, dass Sie sich die Spezifität der Selektoren genauer anschauen müssen. Diese wird in vier Schritten berechnet:

    1. A wird auf 1 gesetzt für CSS-Regeln, die durch ein Attribut style im Quelltext definiert sind, ansonsten 0.
    2. B ist die Anzahl der ID-Attribute eines Selektors.
    3. C ist die Anzahl aller anderen Attribute einschließlich Klassen und Pseudo-Klassen innerhalb des Selektors.
    4. D ist die Anzahl der Elementnamen und Pseudo-Elemente, die der Selektor beinhaltet.

    Die Spezifität ergibt sich aus der Verknüpfung der vier Zahlen. In CSS 2.1 werden folgende Beispiele aufgeführt, die nach Spezifität aufsteigend sortiert sind:

     *             {}  /* A=0 B=0 C=0 D=0 -> Spezifität = 0,0,0,0 */
 li            {}  /* A=0 B=0 C=0 D=1 -> Spezifität = 0,0,0,1 */
 li:first-line {}  /* A=0 B=0 C=0 D=2 -> Spezifität = 0,0,0,2 */
 ul li         {}  /* A=0 B=0 C=0 D=2 -> Spezifität = 0,0,0,2 */
 ul ol+li      {}  /* A=0 B=0 C=0 D=3 -> Spezifität = 0,0,0,3 */
 h1 + *[rel=up]{}  /* A=0 B=0 C=1 D=1 -> Spezifität = 0,0,1,1 */
 ul ol li.red  {}  /* A=0 B=0 C=1 D=3 -> Spezifität = 0,0,1,3 */
 li.red.level  {}  /* A=0 B=0 C=2 D=1 -> Spezifität = 0,0,2,1 */
 #x34y         {}  /* A=0 B=1 C=0 D=0 -> Spezifität = 0,1,0,0 */
 style=""          /* A=1 B=0 C=0 D=0 -> Spezifität = 1,0,0,0 */

  4. Schließlich werden die Regeln nach der vorgegebenen Reihenfolge sortiert: Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang.

Nachdem die Regeln nach ihrer Relevanz sortiert wurden, werden sie auf das Dokument angewandt.

Angenommen, Sie erstellen eine Website bestehend aus mehreren einzelnen Dokumenten. Sie haben ein separates Stylesheet »default.css« in alle Dokumente eingebunden. In einem bestimmten Dokument möchten Sie für Überschriften erster Ordnung eine andere Schriftfarbe. Sie haben nun mehrere Möglichkeiten:

  1. Sie binden nach dem allgemeinen Stylesheet ein weiteres Stylesheet ein und überschreiben somit die allgemeinen Angaben. Das lohnt sich jedoch nicht, da die Änderungen nur ein einziges Dokument und in diesem Beispiel auch nur einen einzigen Elementtyp betreffen.
  2. Sie arbeiten mit Inline-Styles, die eine höhere Spezifität besitzen. Das wird umso problematischer, je mehr Elemente h1 auf der Seite vorkommen.
  3. Sie arbeiten mit kontextabhängigen Selektoren und können die Überschriften auf dieser Seite so gezielt ansprechen. Die allgemeinen Angaben werden durch die spezifischen überschrieben.
  4. Sie arbeiten mit einem style-Element im head. 
    <link rel="stylesheet" href="default.css" type="text/css" />

<style type="text/css">
h1 { color: blue; }
</style>

    Der Inhalt des style-Elementes überschreibt die Angabe für die Schriftfarbe in dem ausgelagerten Stylesheet, da es als zweites eingebunden wird. Alle anderen Angaben für h1 werden natürlich übernommen.

Vererbung und Überschreibung

Das Prinzip der Vererbung und Überschreibung lässt sich am besten an einem Beispiel demonstrieren.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Anzeige von Elementen</title>

<style type="text/css">
h1, p {
   color: blue;
   background-color: white;
}

p em {
   color: black;
}
</style>
</head>

<body>

<h1>Diese Überschrift enthält ein <em>betontes</em> Wort</h1>

<p>Dieser Absatz enthält ein <em>betontes</em> Wort</p>

</body>
</html>

Beispieldokument ansehen

In diesem Beispiel wird für Überschriften erster Ordnung und Absätze blaue Schriftfarbe vor weißem Hintergrund deklariert (Mehr über die verwendeten Eigenschaften lesen Sie später im Abschnitt Farben und Hintergründe). Für betonten Text, also das Element em, wird nichts angegeben, dennoch erscheint er innerhalb der Überschrift ebenfalls blau. Das liegt daran, dass die für h1 vorgenommenen Deklarationen auf das darin enthalten Element em vererbt werden. Um für em also wieder schwarze Textfarbe zu erhalten, muss der für color vererbte Wert überschrieben werden. Dies wird für betonten Text innerhalb von Absätzen explizit festgelegt.

Die !important-Regel

Eine mit !important gekennzeichnete Deklaration überschreibt eine normal angegebene Deklaration. Sowohl das Autoren- als auch das User-Stylesheet können !important-Regeln enthalten. !important-Regeln des Users überschreiben dabei !important-Regeln des Autoren.

Somit wird die Zugänglichkeit der Seiten für alle Menschen erhöht, zum Beispiel für sehbehinderte Menschen, die auf eine entsprechende Mindestschriftgröße angewiesen sind. Die Syntax für eine Notation mit !important-Regel sieht wie folgt aus:

p { font-size: 18px !important; }

Zurück: Vokabular und Syntax
Weiter: Werte
Zum Seitenanfang