Mittwoch, 24. Juli 2019

07:01

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>

Beispiel ansehen

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 ] __________________________

zurück
 weiter



© 2007 - 2019 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:11 aktualisiert.