|
Wie Sie in der Lektion Hypertext gelesen haben,
gibt es für Links unterschiedliche Zustände, je nachdem
ob sie aktiviert sind oder bereits besucht wurden. Vom Browser werden
diese Zustände standardmäßig in verschiedenen Farben dargestellt.
Mit CSS-Regeln können Sie individuelle Styles für die
unterschiedlichen Zustände von Links definieren.
CSS stellt Ihnen dafür die sogenannten Pseudoklassen zur
Verfügung. Die CSS-Regeln gelten dann, wenn sich ein Element in einem
bestimmten Zustand befindet.
Pseudoklassen schreiben Sie im Stylesheet mit einem Doppelpunkt vor dem
Namen. Es gibt derzeit fünf Pseudoklassen in der CSS-Spezifikation:
| :link |
alle Elemente, die einen Link definieren |
| :visited |
Elemente, die ein Link sind und zuvor besucht
wurden |
| :active |
Elemente, die gerade ein aktiver Link sind
(d.h. die vom Anwender gewählt wurden) |
| :hover |
Elemente, die ein Link sind und über
denen sich gerade der Mauszeiger befindet |
| :focus |
Elemente, die gerade den Fokus des Browsers
haben, d.h. an denen der Cursor steht bzw. die vom Anwender
mit Mausklick oder per Tastatur aktiviert wurden |
|
Pseudoklassen können in der Zukunft auch für andere Elemente
eingesetzt werden. Derzeit gibt es im XHTML-Standard Pseudoklassen nur
für das a-Element, so dass Sie in Ihrem Stylesheet auch
direkt a:link u.s.w. schreiben könnten. Theoretisch wäre
:link für alle Elemente, die als Links funktionieren,
gültig.
Pseudoklassen werden nicht von Internet Explorer 3 und älter und
von Netscape 4 und älter unterstützt. :focus wird
nur von Netscape 6 umgesetzt.
Neben Pseudoklassen können Sie zusätzlich für Links elementspezifische
Klassen definieren, um Links voneinander zu unterscheiden. Genauso
können Sie den Links allgemeine Klassen mit dem class-Attribut
zuweisen.
Sie sollten vermeiden, dem a-Element direkt CSS-Eigenschaften
zuzuweisen, z.B. a {color:blue;}. Diese Regeln würden
dann nicht nur für Links gelten, sondern auch für benannte Anker,
die mit a definiert wurden.
Beispiele für CSS-Regeln:
a:link {color:green; text-decoration:none;}
a:visited {color:olive; text-decoration:none;}
a:active {color:maroon; text-decoration:none;}
a:hover {color:maroon; text-decoration:underline;}
a:focus {background-color:yellow;}
a.neu {font-weight:bold;}
.alt {font-style:italic;}
Beispiel im Browser anzeigen
Beispiel-Dateien herunterladen (beispiel_csslink.zip)
Tipp: Beobachten Sie, wenn möglich, in verschiedenen Browsern
das Verhalten der Links, wenn Sie mit der Maus darüber fahren, die
Links anklicken oder mit der Tastatur ansteuern.
|
