Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen)

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Standardmäßig sind die Links in Webdokumenten unterstrichen. Diese Unterstreichungen sollen entfernt werden, wie in der folgenden Abbildung gezeigt.

Links ohne Unterstreichungen

Abbildung: Links ohne Unterstreichungen.

Lösung

Verwenden Sie die Eigenschaft text-decoration zusammen mit dem Pseudoklassen-Selektor für besuchte und unbesuchte Links:

a:link, a:visited {
 text-decoration: none;
}

Diskussion

Mit Hilfe der Pseudoklassen :link und :visited können Sie die Links in einem Webdokument mit Stildefinitionen versehen. Mit der Pseudoklasse :link werden Links ausgewählt, die noch nicht besucht wurden, während :visited für bereits besuchte Links steht. Der Eigenschaft text-decoration können fünf verschiedene Werte zugewiesen werden (siehe folgende Tabelle).

Tabelle: Mögliche Werte für die Eigenschaft text-decoration.

Werte für text-decoration Ergebnis
underline Unter dem Text wird eine Linie gezogen (Unterstreichung).
overline Über dem Text wird eine Linie gezogen (Überstreichung).
blink Der Text blinkt.
line-through Der Text wird durchgestrichen.
none Der Text erhält keine zusätzlichen Verzierungen.

Oft wird die Eigenschaft text-decoration eingesetzt, um die Präsentation einer Webseite zu verbessern. Anstatt alle Links in einem Dokument zu unterstreichen, setzen Designer text-decoration gern auf den Wert none und verändern zusätzlich die Hintergrund- oder Textfarbe des Links oder sogar beides:

a:link, a:visited {
 text-decoration: none;
 background-color: red;
 color: white;
}

Um auch Besuchern gerecht zu werden, die vielleicht farbenblind sind und daher einen Link nicht unbedingt an der Farbe erkennen können, stellen manche Designer den Linktext zusätzlich fett gedruckt dar:

a:link, a:visited {
 font-weight: bold;
 text-decoration: none;
 color: red;
}

Auch der Wert line-through kann nützlich sein, um anzuzeigen, dass ein Link bereits besucht wurde; er wird dann wie ein abgehakter Tagesordnungspunkt dargestellt (siehe folgende Abbildung):

a:link {
 font-weight: bold;
 text-decoration: none;
 color: red;
}
a:visited {
 font-weight: bold;
 text-decoration: line-through;
 color: black;
}

Links werden durchgestrichen dargestellt

Abbildung: Links werden durchgestrichen dargestellt.

Siehe auch

Die CSS 2.1-Spezifikation zur Eigenschaft text-decoration und Jakob Neilsens "Design Guidelines for Visualizing Links".

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln