CSS Links

Verschiedene Links können unterschiedliche Stile haben.

Link-Stile

Link-Stile können beliebige CSS-Eigenschaften verwenden (wie Farbe, Schriftart, Hintergrund usw.).

Bestimmte Links können unterschiedliche Stile haben, je nachdem, in welchem Zustand sie sich befinden.

Die vier Link-Zustände sind:

  • a:link - normal, unbesuchte Links
  • a:visited - Links, die der Benutzer besucht hat
  • a:hover - wenn sich die Maus des Benutzers über dem Link befindet
  • a:active - in dem Moment, in dem der Link angeklickt wird

Beispiel

a:link {color:#000000;} /*Unbesuchter Link*/ a:visited {color:#0080FF;} /*Besuchter Link*/ a:hover {color:#FF00FF;} /*Maus über dem Link*/ a:active {color:#0000FF;} /*Beim Mausklick*/

Selbst ausprobieren »

Beim Festlegen von Stilen für mehrere Link-Zustände gibt es ebenfalls einige Reihenfolgeregeln:

  • a:hover muss nach a:link und a:visited kommen
  • a:active muss nach a:hover kommen

Gängige Linkstile

Sehen Sie anhand des obigen Beispiels der Link-Farbänderungen, in welchem Zustand er sich befindet.

Kommen wir nun zu einigen anderen gängigen Möglichkeiten, Links zu gestalten:

Textdekoration

Die Eigenschaft text-decoration wird hauptsächlich verwendet, um die Unterstreichung von Links zu entfernen:

Beispiel

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

Selbst ausprobieren »

Hintergrundfarbe

Die background-color-Eigenschaft legt die Hintergrundfarbe von Links fest:

Beispiel

a:link {background-color:#8CC6FF;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

Selbst ausprobieren »

Examples

Weitere Beispiele

Hyperlinks mit verschiedenen Stilen hinzufügen
Dieses Beispiel zeigt, wie man zu Hyperlinks andere Stile hinzufügt.

Fortgeschritten - Link-Box erstellen
Dieses Beispiel zeigt ein fortgeschritteneres Beispiel, bei dem wir mehrere CSS-Eigenschaften kombinieren, um es als Box darzustellen.

Weitere Erweiterungen