2.11.8 Pseudoklassen a:link etc.

1 Verweise optisch gestalten mit CSS

a) Zweck:

• Wenn Sie nichts anderes angeben wird, 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

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

• W3C Recommendation -
  CSS2.1 Specification: The dynamic pseudo-classes: :hover, :active, and :focus

• SELFHTML: Verweise optisch gestalten mit CSS
  SELFHTML: Beispiel: Eine kleine Verweissammlung (mit CSS)
  SELFHTML: Pseudoelemente und Pseudoklassen definieren
  SELFHTML: Beispiel: Vermutlich kennen Sie ...

• SELFHTML:
  :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise)
  Beispiel: Bekannte Suchdienste

d) Workshops

• The Styleworks: CSS 2.1: Die Pseudoklassen
  The Styleworks: CSS 2.1: Die Pseudo-Elemente

Veränderung der Farbe, wenn Mauszeiger auf den Hyperlink zeigt:

• W3Schools: 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) Angabe im Dokument:

Vor dem externen Link wurde ein Pfeil eingefügt

• Borutta: Externe Links per CSS mit einem kleinen Symbol kennzeichnen
  Borutta: Beispiel: Externer Links mit einem Pfeil nach oben rechts

↑