Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

6.2 Ein Selektor wählt das zu gestaltende Kästchen aus

Jede CSS-Regel beginnt also mit mindestens einem Selektor. Selektoren wählen aus, welches Kästchen auf der Webseite gestaltet werden soll, und beziehen sich auf eines von drei Dingen (oder eine Kombination davon):

  • den Namen eines HTML-Elements
  • eine ID (id)
  • eine Klasse (class)

Ein einfacher Selektor: der Name des Kästchens

Eine CSS-Regel wie die folgende kennen Sie bereits:

h2 { font-size: 130%; }

Der einfachste Selektor ist der Name des Kästchens, das gestaltet werden soll, und wird auch Element-Selektor oder Typ-Selektor genannt, weil er alle Elemente eines bestimmten Typs auswählt: Der Selektor h2 selektiert auf den zu gestaltenden Webseiten also alle Überschriften der zweiten Ebene.

Mehrere Kästchen auf einmal: Selektoren mit Komma trennen

Schauen Sie sich die folgenden zwei Regeln zur Gestaltung von Überschriften an:

h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 150%;
}
h2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 130%;
}

Für beide Überschriften wird dieselbe Schriftartfamilie definiert, nur die Schriftgröße ist unterschiedlich. Durch Gruppierung der Selektoren mit einem Komma können Sie ein bisschen Tipparbeit sparen und die Übersichtlichkeit erhöhen:

h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; }
h1 { font-size: 150%; }
h2 { font-size: 130%; }

Wenn Sie den Überschriften eine andere Schriftart zuweisen möchten, brauchen Sie nur noch eine Zeile zu ändern.

Bei der Gruppierung das Komma nicht vergessen

Bei der Gruppierung von Selektoren dürfen Sie das Komma zwischen den einzelnen Selektoren nicht vergessen, sonst erhalten Sie versehentlich verschachtelte Selektoren, die etwas völlig anderes bewirken.

Alle Kästchen auf der Seite: der Universalselektor *

Sie werden ihn nur selten benutzen, aber es gibt ihn: das Sternchen (*) als universeller Selektor, der besagt: »alle Kästchen«:

* {
  padding: 0;
  margin: 0;
}

Dieses Beispiel setzt die Eigenschaften padding und margin für alle HTML-Elemente auf null und wird im Kapitel über das Box-Modell im Abschnitt über die »Kalibrierung« genauer erklärt.