|
Mit einem Selektor legen Sie fest, auf welche
Elemente ein Style angewendet werden soll.
Elementselektoren
Der deklarierte Style gilt für genau dieses
Element.
h1 { color:red; } setzt für
die Eigenschaft color (Schriftfarbe)
des Elementes h1 den Wert red
(rot) fest.
body { background-color:yellow; }setzt
background-color (Hintergrundfarbe)
des ganzen Dokuments auf den Wert yellow
(gelb).
Gruppenselektoren
Der deklarierte Style gilt für eine Gruppe
von Elementen. Die einzelnen Selektoren sind durch
Kommas voneinander getrennt.
h2, h3 { color:gray; } zeigt die
Elemente h2 und h3 in grau
an.
Kontextsensitive Selektoren
Der deklarierte Style gilt für ein Element,
wenn es innerhalb eines anderen Elementes liegt.
h3 b { color:blue; } bewirkt, dass
b-Elemente innerhalb von h3-Elementen
blau angezeigt werden. Die h3-Elemente
selbst werden nicht in blau angezeigt.
Klassenselektoren
Mit dem Attribut class weisen Sie einem
Element einen bestimmten Style zu. Sie können
allgemeine Klassen deklarieren oder elementspezifische
Klassen. In der CSS-Regel setzen Sie einen
Punkt vor den Namen der Klasse.
.rot { color:red; } kann beliebigen
Elementen zugewiesen werden:
<p class="rot">Roter
Text</p>
h2.rot { color:red; } ist nur für
das Element h2 anwendbar:
<h2 class="rot">Rote
Überschrift</h2>
ID-Selektoren
Mit dem Atribut id weisen Sie einem
Element einen Bezeichner zu.
<div id="abschnitt1">Erster
Abschnitt</div>
Für dieses Element deklarieren Sie einen
ID-Style, indem Sie dem Selektor das Rauten-Zeichen
# voranstellen:
#abschnitt1 { color:red; } zeigt
das Element mit dem id-Wert abschnitt1
in rot an.
Pseudoklassen-Selektoren
Das a-Element kann durch in CSS definierte Pseudoklassen unterschiedlich
angezeigt werden (vgl. auch Lektion CSS-Formatierung
von Links).
a:link |
für den normalen Hyperlink |
a:visited |
für bereits besuchte Hyperlinks |
a:hover |
für Hyperlinks, über denen sich
gerade der Mauszeiger befindet (to hover =
schweben) |
Pseudoelement-Selektoren
werden von älteren Browsern nicht unterstützt
und sind deshalb nicht empfehlenswert.
Vererbung von Style-Zuweisungen
Eltern-Elemente vererben Styles an ihre Kind-Elemente,
wenn für diese keine abweichenden Eigenschaften
festgelegt sind.
<blockquote class="rot">
<p>p-Element innerhalb von blockquote-Element
mit der Klasse "rot"</p>
<p class="blau">p-Element,
das mit der Klasse "blau" gekennzeichnet
ist</p>
</blockquote>
Beispiel
im Browser anzeigen
|
