Verlauf
Alle Kapitel anzeigen
voriges Kapitel
Ein Stylesheet besteht aus einer bis beliebig vielen einzelnen Anweisungen, die beschreiben wie bestimmte Objekte in einem HTML-Dokument durch ein Ausgabegerät dargestellt werden soll. Eine sehr einfache beispielhafte Anweisung setzt sich aus zwei Teilen zusammen:
-
Dem Selektor (im Beispiel p): Welche Elemente sollen durch die Anweisung beschrieben werden
-
einem Eigenschaft-Werte - Paar (color:black): Welche Eigenschaft der Elemente wird auf welchen Wert gesetzt?
p { color: black; }
Der Selektor befindet sich stets links und die Deklaration innerhalb einer geschwungenen Klammer. Eigenschaft und Wert sind durch einen Doppelpunkt getrennt und nach dem Wert folgt ein Semikolon. Man kann mit einem Selektor auch mehrere Eigenschaften auf einmal setzen; das folgende Beispiel würde für alle Überschriften erster Klasse in einem HTML-Dokument eine Schriftfarbe von schwarz und eine Hintergrundfarbe von Orange setzen:
h1 { color: black; background-color: orange; }
In einer Stylesheet Datei können jetzt mehrere dieser sogenannten "CSS-Selektoren" stehen, z.B. legen die beiden folgenden Zeilen das Aussehen von Überschriften erster Klasse und für Paragraphen fest:
h1 { color: red; background-color: yellow; }
p { color: green; }
Möchte man zwei verschiedenen Objekttypen diesselben Attribute zuweisen, kann man dies auch mit einer CSS-Regel zusammenfassen, im folgenden Beispiel wird die Textfarbe für Paragraphen und Links auf rot sowie ein fetter Schriftschnitt gesetzt; die Objektselektoren werden jeweils durch ein Komma getrennt:
p, a { color: red; font-weight: bold; }
Die bisher aufgezeigten Selektoren haben nur Objekte eines bestimmten Typs bschrieben; man kann aber auch
- benutzerdefinierte Klassen und Pseudoklassen erstellen,
- das Standard-Aussehen bestehender HTML-Tags verändern,
- und ID- sowie erweiterte Selektoren definieren (siehe weiter unten).
