Donnerstag, 19. Mai 2022
11:13
Homepage-Tipps & -tricks für Webmaster mit CSS
Hyperlinks ohne Unterstrich anzeigen (Formatierung mit text-decoration: none)
Bleiben Hyperlinks (Verweise) unformatiert, so werden diese standardgemäß von den Browsern unterstrichen dargestellt! In manchen Navigations-Menüs kann sich der Unterstrich eher als lästig erweisen. Wie Sie diesen loswerden können, erfahren Sie in nachfolgendem Beispiel (Unter- und Überstrich wird in diesem Beispiel nur beim Hovern angezeigt).
Pseudoklassen: Anweisungen in der extern ausgelagerten CSS-Datei:
/* noch nicht besuchter Link */ .navi a:link { text-decoration: none; color: #000 } /* besuchter Link */ .navi a:visited { text-decoration: none; color: #FF3333 } /* für Links, die mit der Tabulator-Taste bedient werden */ .navi a:focus { text-decoration: none; color: #FF9933 } /* Link beim Überfahren mit der Maus */ .navi a:hover { text-decoration: underline overline; color: #669999 } /* aktiver Link */ .navi a:active { text-decoration: none; color: #C0C0C0 }
Anweisungen im Html-Dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Hyperlinks ohne Unterstrich</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="navi"> <a href="link1.htm">Link 1</a> | <a href="link2.htm">Link 2</a> | <a href="link3.htm">Link 3</a> | <a href="link4.htm">Link 4</a> </div> </body> </html>
Logischerweise können in der CSS-Datei auch noch weitere Werte zu Schriftgröße, -familie, -stil oder Hintergrundfarbe, Rahmen etc. zugewiesen werden. Um in einer oder mehreren Klassen den Unterstrich zu aktivieren, ist in der CSS-Datei an entsprechender Stelle der Wert "underline" anzugeben - bei einem Überstrich verwenden Sie "overline".
Übrigens: Besuchte (visited) Links können beispielsweise auch durchgestrichen dargestellt werden; dazu weisen Sie dem a-Tag in der CSS-Datei der Pseudoklasse ":visited" unter der Eigenschaft "text-decoration" den Wert "line-through" zu.
[ veröffentlicht am 29.02.2008 ] __________________________