Zurück: Die Einbindung von CSS in ein XHTML-Dokument
Weiter: Kaskade, Vererbung und Überschreibung

Vokabular und Syntax

Die einzelnen syntaktischen Strukturen von CSS haben ihre eigene Bezeichnung, die ich im folgenden an einem Beispiel erläutern möchte.

Folgende Zeichnung verdeutlicht Ihnen noch einmal die Bezeichnungen:

  blockquote { border: thin solid black; }
  ^--------------------------------------^
           Regel bzw. Regelsatz
  ^--------^   ^-----------------------^
   Selektor          Deklaration
               ^----^  ^--------------^
             Eigenschaft     Wert

Sollen für ein Element mehrere Deklarationen vorgenommen werden, empfiehlt sich folgende übersichtlichere Blockschreibweise:

blockquote {
   font-size: .9em;
   font-style: normal;
   background: #ddf;
   color: black;
   border: thin solid black;
}

Sollen Deklarationen für mehrere Selektoren gelten, können Sie diese durch Kommata getrennt in dieser Form aufzählen:

h1, h2, h3, h4 { border: thin solid black; }

Kontextabhängige Selektoren

CSS bietet die Möglichkeit, Selektoren an die Struktur des Dokumentes anzupassen. Folgende Tabelle dokumentiert Ihnen die Möglichkeiten. Sie werden beim Arbeiten mit CSS feststellen, dass ältere Browser nur die einfachsten dieser Selektoren verstehen.

Selektoren haben eine bestimmte Spezifität, nach denen sie gewichtet werden. Mehr darüber im Abschnitt Kaskade.

Selektor Bedeutung Erläuterungen, Beispiele
* Bezeichnet jedes Element. *.warnung und .warnung sind äquivalent.
E Bezeichnet jedes Element E. »E« ist hier nur Variable für ein existierendes Element. td { vertical-align: top; }
E F Bezeichnet jedes Element F, das ein Nachkomme von E ist. Der Begriff »Nachkomme« bedeutet, dass das Element F in E enthalten ist. Als Beispiel: 
#footer p { text-align: .8em; }
Enthält ein Element mit der ID footer ein oder mehrere p, werden diese in Schriftgröße 0.8em dargestellt. Diese absteigenden Selektoren lassen sich noch tiefer verschachteln.
E > F Bezeichnet jedes Element F, das ein Kind von E ist. Ein »Kind« ist ein direkter Nachkomme eines Elementes. Folgende Regel deklariert für alle Elemente p, die direkter Nachfahre von body sind, eine Zeilenhöhe von 1.3 mal der Schrifthöhe: 
body > p { line-height: 1.3 }
E:first-child Bezeichnet alle Elemente E, die das erste Kind eines Elementes sind. Auf diese Selektoren komme ich im Abschnitt Pseudoklassen und Pseudoelemente ausführlich zu sprechen.
E:link
E:visited		 Bezeichnet alle Hyperlinks im Zustand nicht-besucht bzw. besucht.
E:hover
E:active
E:focus		 Bezeichnet alle Elemente E in deren entsprechenden Zuständen.
F + E Bezeichnet alle Elemente E, denen ein Element F direkt vorausgegangen ist. Diese Regel lässt sich nur auf angrenzende Geschwister anwenden, gilt also innerhalb einer Elementgeneration. Folgendes Beispiel setzt die Schriftfarbe aller Elemente h2 auf Rot, wenn sie direkt auf ein Element h1 folgen: 
h1 + h2 { color: red; }
E[var] Bezeichnet alle Elemente E, die ein Attribut var beinhalten. Mit Attributselektoren lassen sich spezielle Elemente ansprechen, zum Beispiel alle Hyperlinks, die zu der Startseite verweisen, oder alle Elemente, denen unter anderem die Klasse »warnung« zugeordnet ist: 
a[href="http://jendryschik.de"] { font-weight: bold; }
*[class~="warnung"] { color: red; }
E[var="warnung"] Bezeichnet alle Elemente E, die ein Attribut var beinhalten, dessen Wert warnung lautet.
E[var~="warnung"] Bezeichnet alle Elemente E, die ein Attribut var beinhalten, das mehrere Werte beinhaltet, von denen ein Wert warnung lautet.
E.warnung Bezeichnet alle Elemente E der Klasse "warnung". Lesen Sie dazu auch den Abschnitt Element Identifier: Die Attribute id und class.
E#warnung Bezeichnet alle Elemente E der ID "warnung".

Kommentare

Wie in XHTML gibt es auch in CSS die Möglichkeit, Kommentare einzubinden. Deren Syntax ist an die Programmiersprache C angelehnt und sieht wie folgt aus:

/* Hier steht ein Kommentar */

Zurück: Die Einbindung von CSS in ein XHTML-Dokument
Weiter: Kaskade, Vererbung und Überschreibung
Zum Seitenanfang