CSS-Stile für Links

Ein Link (das HTML-Element <a>) ist eines der meistgeklickten Elemente auf jeder Seite, daher ist seine Gestaltung sowohl für das Erscheinungsbild als auch für die Benutzerfreundlichkeit wichtig. In diesem Kapitel erklären wir, wie man Links mit CSS gestaltet und sie klar, zugänglich und optisch ansprechend macht.

Die Link-Zustände (Pseudo-Klassen)

CSS stellt einen Link über fünf Pseudo-Klassen bereit, die jeweils einem bestimmten Zustand des Links entsprechen:

a:link — ein normaler, nicht besuchter Link
a:visited — ein Link, den der Benutzer bereits besucht hat
a:hover — ein Link, über den sich die Maus befindet
a:active — ein Link im Moment des Anklickens
a:focus — ein Link, der Tastaturfokus erhalten hat (zum Beispiel über die Tab-Taste)

Man kann jeden dieser Zustände einzeln ansprechen, aber wenn mehrere gleichzeitig gestaltet werden, ist die Reihenfolge wichtig. Da :hover, :active und :visited alle dieselbe Spezifität haben, überschreibt eine spätere Regel eine frühere. Die bewährte Reihenfolge ist LVHA — :link, :visited, :hover, :active:

a:link    { color: #1c87c9; }  /* normal   */
a:visited { color: #8e44ad; }  /* visited  */
a:hover   { color: #f4511e; }  /* mouse over */
a:active  { color: #c0392b; }  /* clicked  */

Wenn man :hover vor :visited setzt, wird die Hover-Farbe bei besuchten Links nie angezeigt. Eine praktische Eselsbrücke ist „LoVe HAte." :focus sollte (üblicherweise zusammen mit :hover) hinzugefügt werden, damit Tastaturbenutzer dasselbe Feedback erhalten wie Mausbenutzer — das Weglassen ist ein häufiger Barrierefreiheitsfehler.

Wir werden die drei am häufigsten verwendeten Eigenschaften zur Link-Gestaltung behandeln:

Text Decoration

Standardmäßig zeichnet ein Browser unter jeden Link eine Unterstreichung. Um diese zu ändern oder zu entfernen, verwendet man die Eigenschaft text-decoration. text-decoration: none entfernt die Unterstreichung; sie bei :hover wieder auf underline zu setzen ist ein beliebtes Muster, das die Seite aufgeräumt hält und gleichzeitig bei der Interaktion Klickbarkeit signalisiert.

Ein Wort der Vorsicht: Die vollständige Entfernung der Unterstreichung kann Links schwer erkennbar machen, besonders für Benutzer, die Farben nicht gut wahrnehmen. Wenn man sie entfernt, sollten Links auf andere Weise auffallen — durch eine markante Farbe, ein font-weight oder durch Wiederherstellen der Unterstreichung beim Hover und Fokus.

Beispiel für die Verwendung der text-decoration-Eigenschaft zur Link-Gestaltung:

CSS-Links text-decoration-Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="#"> This is some link.</a>
  </body>
</html>

Probier es selbst »

Erklärung des Codes

Hier sieht man, dass der Link in seinem ersten und zweiten Zustand ohne Unterstreichung angezeigt wird. Der Link wird unterstrichen, wenn der Benutzer mit der Maus darüber fährt oder ihn anklickt.

Das kann man im Browser mit den eigenen Editoren oder mit unserem Online-Editor überprüfen.

Diese Stile können entweder im Abschnitt <head> oder in einer CSS-Datei geschrieben werden, die für die Webseite verwendet wird.

Color

Wir verwenden die Eigenschaft color, um die Farbe eines Links festzulegen.

Wenn der Link zum Beispiel standardmäßig schwarz sein soll und im dritten Zustand (a:hover) die Farbe #1c87c9 haben soll, schreibt man Folgendes:

Beispiel für die Verwendung der color-Eigenschaft zur Link-Gestaltung:

CSS-Links color-Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Probier es selbst »

Ergebnis

Background Color

Was kann man tun, wenn ein Link einen Hintergrund haben soll?

Man muss einfach die Eigenschaft background-color anwenden.

Zum Beispiel soll der Link einen grauen Hintergrund haben, der beim Hover zu #1c87c9 wechselt.

Wenn der erste (a:link) und der zweite (a:visited) Zustand dieselbe Hintergrundfarbe haben, kann man einfach a verwenden.

Beispiel für die Verwendung der background-color-Eigenschaft zur Link-Gestaltung:

CSS-Links background-color-Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Probier es selbst »

Die gewünschte Farbe kann mit dem Color Picker ausgewählt werden.

Alles zusammensetzen

In echten Projekten gestaltet man selten nur eine Eigenschaft. Das folgende Beispiel kombiniert Farbe, das Unterstreichen-beim-Hover-Muster, etwas Padding damit der Hintergrund Raum zum Atmen hat, sowie eine :focus-Regel, die :hover spiegelt, sodass Tastaturbenutzer sichtbares Feedback erhalten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link,
      a:visited {
        color: #1c87c9;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 4px;
      }
      a:hover,
      a:focus {
        color: #ffffff;
        background-color: #1c87c9;
        text-decoration: underline;
      }
      a:active {
        color: #ffffff;
        background-color: #14679b;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Man beachte, wie die Gruppierung von a:link, a:visited mit einem Komma denselben Standard auf beide Zustände anwendet und wie die Paarung von a:hover, a:focus die Erfahrung für Maus- und Tastaturbenutzer identisch hält.

Tipps zur Barrierefreiheit

Niemals nur auf Farbe verlassen. Benutzer mit Farbenblindheit können einen blauen Link möglicherweise nicht von schwarzem Text unterscheiden. Eine Unterstreichung beibehalten oder Farbe mit einem anderen Hinweis kombinieren.
Immer :focus gestalten. Wenn der Standard-Fokusrahmen entfernt wird, sollte er durch einen eigenen sichtbaren Stil ersetzt werden — andernfalls können Tastaturbenutzer nicht erkennen, wo sie sich befinden. Siehe die Eigenschaft outline.
Ausreichenden Kontrast wahren. Link-Text sollte sich klar von seinem Hintergrund und vom umgebenden Fließtext abheben.

Zusammenfassung

Ein Link hat fünf Zustände, jeder mit seiner eigenen Pseudo-Klasse: :link, :visited, :hover, :active und :focus.
Beim Gestalten mehrerer Zustände sollte die LVHA-Reihenfolge eingehalten werden, damit spätere Regeln nicht versehentlich frühere überschreiben.
text-decoration steuert die Unterstreichung, color legt die Textfarbe fest und background-color fügt einen Hintergrund hinzu.
:focus immer gestalten und Links nicht nur durch Farbe kennzeichnen, um sie barrierefrei zu halten.

Übungen

Übung

Welche Eigenschaften werden in CSS verwendet, um das Erscheinungsbild von Links zu ändern?