Lädt...

CSS Links

Links sind der Weg, auf dem Menschen durch Ihre Seiten gehen. In CSS gestalten Sie das a-Element und seine Zustände — unbesucht, besucht, hover und active — damit ein Link klickbar wirkt, bei Interaktion wechselt und lesbar bleibt.

Link-Zustände auf einen Blick

📊 Toolkit der Link-Zustände

Zustand Wann er gilt
a / a:link Standard- / unbesuchter Link
a:visited Link, den der Besucher schon geöffnet hat
a:hover Zeiger liegt über dem Link
a:active Link wird gedrückt (mousedown)
text-decoration Unterstreichung an oder aus — häufige Link-Steuerung

Browser merken sich oft eine hilfreiche Reihenfolge namens LVHA: :link, :visited, :hover, :active. Regeln in dieser Ordnung verhindern, dass spätere Zustände versehentlich überschrieben werden.

Den Basis-Link gestalten

Beginnen Sie mit Farbe und Unterstreichung. Viele moderne Designs entfernen die Standard-Unterstreichung und holen sie beim Hover zurück.

Basis-Linkstile

css
CSS Code 
a {
color: #0b5fff;
text-decoration: none;
}

Besuchte Links

:visited kann die Farbe leicht verschieben, damit Wiederkehrer bekannte Pfade erkennen. Halten Sie die Änderung dezent — der Datenschutz begrenzt, was an visited stylbar ist.

Visited-Ton

css
CSS Code 
a:visited {
color: #5b4b8a;
}

Hover-Feedback

:hover ist Ihr klarstes Alltagssignal. Farbwechsel, Unterstreichung oder beides sagt „das ist interaktiv“, ohne zu schreien.

Hover-Unterstreichung

css
CSS Code 
a:hover {
color: #0842b8;
text-decoration: underline;
}

Active — der Druckmoment

:active gilt, während der Link gedrückt wird. Ein etwas dunklerer Ton gibt ein kleines „Klick“-Gefühl.

Active-Druck

css
CSS Code 
a:active {
color: #062e80;
}

Eine ruhige Nav-Link-Gewohnheit

Gruppieren Sie die LVHA-Zustände, halten Sie Hover klar und löschen Sie Fokus-Outlines nicht nur für ein flaches Look. Tastatur-Nutzer brauchen ein sichtbares Fokus-Signal.

Ruhige Nav-Links

css
CSS Code 
nav a:link,
nav a:visited {
color: #1a1a1a;
text-decoration: none;
}

nav a:hover,
nav a:active {
color: #0b5fff;
text-decoration: underline;
}

nav a:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 2px;
}

Selbst ausprobieren

  1. Basis-a-Farbe und text-decoration: none setzen.
  2. a:visited mit leicht anderer Farbe hinzufügen.
  3. Bei a:hover unterstreichen und verdunkeln.
  4. Bei a:active etwas dunkler.
  5. nav a in LVHA-Ordnung stylen und :focus-visible-Outline behalten.

Häufige Fehler

  • :hover vor :link / :visited schreiben, sodass Zustände verlieren
  • Unterstreichung und jedes andere Link-Signal entfernen
  • Neon-Hover auf jedes Wort im Absatz
  • outline: none an Links ohne Ersatz-Fokusstil
  • Diese Lektion mit text-shadow / Ellipsis vermischen (vorherige Sitzung)

Kurzfassung

  • Links mit a und :link, :visited, :hover, :active gestalten
  • LVHA-Ordnung hilft der Kaskade wie erwartet
  • Farbe + text-decoration sind die Alltagssteuerungen
  • Hover klar halten; Visited-Änderungen dezent
  • Sichtbaren Fokusstil für Tastaturnavigation behalten

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 30 von 35
Css Tutorial