Selektoren/Deklarationen

Sie haben jetzt schon ein paar Beispiele für CSS-Definitionen gesehen, ohne überhaupt genau zu wissen, was diese eigentlich bedeuten und wie sie aufgebaut sind. Die folgende Grafik erklärt die einzelnen Bestandteile einer solchen Definition:

Der Selector ist meist ein HTML-Tag; es gibt zwar noch weitere Selectoren, dazu aber erst später mehr.

Der Deklarationsbereich gehört zum Selector und ist von geschweiften Klammern umschlossen und enthält eine oder mehrere Eigenschaften (hier die Farbe “color”) und den dazugehörigen Wert (#00FF00).

Getrennt werden Eigenschaften von Ihren Werten durch einen Doppelpunkt; abgeschlossen wird eine einzelne Definition durch ein Semikolon.

Eine Eigenschaft kann auch mehrere Werte enthalten, die durch ein Leerzeichen getrennt werden müssen, z.B.:

H1 {
 border: 1px solid black;
}

Durch diese Definition wird um alle Überschriften ein durchgezogener (”solid”) Rahmen (”border”) mit der Dicke ein Pixel und der Farbe Schwarz (”black”) gezogen.

Gruppieren von Selectoren

Stellen Sie sich vor, alle Überschriften (H1 bis H6) sollen den gleichen schwarzen Rahmen erhalten. Völlig richtig wären die nachstehenden Definitionen:

H1 { border: 1px solid black; }
H2 { border: 1px solid black; }
H3 { border: 1px solid black; }
H4 { border: 1px solid black; }
H5 { border: 1px solid black; }
H6 { border: 1px solid black; }

Einfacher wird eine solche Formatierung der Überschriften aber durch das Gruppieren von Selectoren:

H1, H2, H3, H4, H5, H6 { border: 1px solid black; }

So lassen sich beliebig viele Selectoren - durch Kommata getrennt - vor einer Definition notieren.

Gruppieren von Deklarationen

Sie können jedoch nicht nur Selectoren gruppieren, sondern auch Deklarationen:

H1 {
 border: 1px solid black;
 color: lime;
 text-align: center;
}

Gruppieren von Selectoren und Deklarationen

Jetzt können Sie Selectoren und Deklarationen gruppieren. Es lassen sich aber auch Selectoren und Deklarationen gleichzeitig gruppieren:

H1, H2, H3, H4, H5, H6 {
 border: 1px solid black;
 color: lime;
 text-align: center;
}

Mit wenigen Zeilen Quelltext lassen sich so mehrere Deklarationen auf verschiedene Selectoren anwenden.

Bedenken Sie einmal, wie viele Zeilen Quelltext für dieses Beispiel in reinem HTML nötig gewesen wären…