image_pdfimage_print

Syntax (Schreibweise)

Selektoren stellen die Verbindung zwischen den zentralen Formaten im Head-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen. Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Eigenschaft, Wert, geschweifte Klammer zu:

Selektor {Eigenschaft:Wert;}

Selektor{
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;

   ...

}

1. Universal-Selektoren

Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben. Wird z. B. die Schrift durch einen Universal-Selektor auf 18 px festgelegt, so ist die Schrift jedes Elementes mit 18 px formatiert.

* {
   font-size:14px;
   color:#ff0000;
}

2. Typ-Selektoren

Typ-Selektoren verknüpfen einen Elementtyp, also ein HTML-Tag mit einer Formatierung.

h1 {
   font-size:14px;
   font-style:italic;
}

p {
   color:#ff0000;
}

3. Class-Selektoren (Klassen)

Klassen sind Selektoren mit beliebigen Namen.

h1.gerahmt {
   border:1px solid #aaaaaa;
}

In diesem Beispiel wir zunächst H1 definiert; dann wird die Klasse h1.gerahmt festgelegt (Rahmen). Wird Sie angewandt, bekommt H1 zusätzlich einen Rahmen: Diese Klasse funktioniert nur in einem H1-Tag.

.gerahmt {
   border:1px solid #aaaaaa;
}

.einfachertext {
   font-size:14px;
}

Diese zwei Klassen in jedem Tag, weil vor dem Punkt (.) kein Tag angegeben ist.

4. ID-Selektoren

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung. ID-Selektoren beginnen mit einer # (Raute).

div#kopfbereich {
   position:absolute;
   top:100px; left:100px;
   width:120px; height:80px;
   background-color:#000;
}

div#inhaltsbereich {
   position:absolute;
   top:150px; left:300px;
   width:120px; height:80px;
   border: 6px red solid;
}

Damit werden zwei Bereiche (Boxen) erzeugt, die mit Inhalten gefüllt werden können. Ihre Eigenschaften sind:

  • position (die Art wie ihre Position am Bildschirm festgelegt wird)
  • top (Abstand vom oberen Bildschirmrand)
  • left (Abstand vom linken Bildschirmrand)
  • width (Breite der Box)
  • height (Höhe der Box)
  • background-color (Hintergrundfarbe)
  • border (Rahmen um die Box)