2.13.8 Pseudoklassen a:link a:visited a:hover a:active
⇧ 1 Verweise optisch gestalten mit CSS
Text-Elemente:
Pseudoelemente & Pseudoklassen
↑ a) Zweck
-
Wenn Sie nichts anderes angeben, erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben, z.B. blau für Verweise zu noch nicht besuchten Seiten und violett für Verweise zu bereits besuchten Seiten.
-
Mit Hilfe von CSS können Verweise individueller gestaltet werden.
-
Unter anderem ist es auch möglich, die meist voreingestellte Unterstreichung des Verweistextes zu unterdrücken.
↑ b) Angabe im Stylesheet
Pseudoklassen für Verweise :link, :visited, :focus, :hover, :active
Damit sich die Regeln für die einzelnen Pseudo-Klassen nicht falsch überlagern, müssen sie im Stylesheet in folgender Reihenfolge deklariert werden:
-
a:link = noch nicht besuchter Link
-
a:visited = schon besuchter Link
-
a:hover = schweben (Benutzer schwebt mit der Maus über dem Link)
-
a:active = Link wird ausgewählt
1) Eintrag im Quelltext:
a:link { color: blue }
/*noch nicht besuchter Link*/
a:visited { color: purple }
/*schon besuchter Link*/
a:hover { color: red }
/*Benutzer 'hovert'*/
a:active { color: lime }
/*Link wird ausgewählt*/
↑ c) Grundlagen-Websites & Workshops
-
W3C Recommendation -
CSS2.1 Specification en The dynamic pseudo-classes: :hover, :active, and :focus
-
SELFHTML
de
Verweise optisch gestalten mit CSS
de Beispiel: Eine kleine Verweissammlung (mit CSS)
de Pseudoelemente und Pseudoklassen definieren
de Beispiel: Vermutlich kennen Sie ...
-
SELFHTML
de :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise)
de Beispiel: Bekannte Suchdienste
-
The Styleworks
de
CSS 2.1: Die Pseudoklassen
de CSS 2.1: Die Pseudo-Elemente
Veränderung der Farbe, wenn Mauszeiger auf den Hyperlink zeigt:
-
W3Schools
en
Beispiel: Different colors to a hyperlink)
⇧
2 Externe Links mit einem Symbol ↗
Zweck: Externe Links mit einem kleinen Symbol kennzeichnen, damit man sie besser von den internen Links untescheiden kann.
1) Angabe im Stylesheet:
/* Fügt ein Zeichen vor externe Links ein */
a[href^="http://"]:before {
content: "\2197\a0"
}
2) Anzeige im HTML-Dokument:
Vor dem externen Link wurde ein Pfeil nach rechts oben: "↗" eingefügt.
So kann man die externen Links (mit Pfeil) von den internen Links (ohne Pfeil) unterscheiden, ohne dass man dies im Quelltext speziell angeben muss.
-
Borutta
de
Tipps zu HTML und CSS
de Externe Links per CSS mit einem kleinen Symbol kennzeichnen
de Beispiel: Externer Links mit einem Pfeil nach oben rechts