So ändern Sie HTML-Link-Unterstreichungen auf einer Webseite Web

In diesem Artikel werden verschiedene Möglichkeiten erläutert, wie Sie mit CSS das standardmäßige Aussehen von Textlinks auf Ihrer Webseite ändern können, indem Sie die Unterstreichung entfernen, in eine gepunktete Linie ändern oder ihre Farbe ändern. Zusätzliche Informationen sind enthalten, um die Unterstreichung in eine gestrichelte Linie oder doppelte Unterstreichung zu ändern.

So entfernen Sie die Unterstreichung von Textlinks

Standardmäßig haben Webbrowser bestimmte CSS-Stile dass sie auf bestimmte HTML-Elemente angewendet werden. Wenn Sie diese Standardeinstellungen nicht mit den eigenen Stylesheets Ihrer Site überschreiben, gelten die Standardeinstellungen. Zum

Hyperlinks, ist der Standardanzeigestil, dass verlinkter Text blau und unterstrichen ist. Wenn Sie möchten, können Sie das Aussehen dieser Unterstreichungen ändern oder sie vollständig von Ihrer Webseite entfernen.

Um die Unterstreichungen von Textlinks zu entfernen, verwenden Sie die CSS-Eigenschaft text-decoration. Hier ist das CSS, das Sie schreiben, um dies zu tun:

a { Textdekoration: keine; }

Mit dieser einen CSS-Zeile entfernen Sie die Unterstreichung von allen Textlinks auf Ihrer Webseite. Obwohl dies ein sehr allgemeiner Stil ist (er verwendet einen Elementselektor), hat er immer noch mehr Spezifität als die Standardstile des Browsers. Da diese Standardstile zunächst die Unterstreichungen erzeugen, müssen Sie diese überschreiben.

Ein Hinweis zum Entfernen von Unterstrichen

Optisch mag das Entfernen von Unterstreichungen genau das sein, was Sie erreichen möchten, aber Sie sollten auch dabei vorsichtig sein. Ob Ihnen das Aussehen von unterstrichenen Links gefällt oder nicht, Sie können nicht argumentieren, dass sie offensichtlich machen, welcher Text verlinkt ist und welcher nicht. Wenn Sie Unterstreichungen entfernen oder die standardmäßige blaue Linkfarbe ändern, sollten Sie sicherstellen, dass Sie sie durch Stile ersetzen, die den verknüpften Text weiterhin hervorheben lassen. Dies sorgt für eine intuitivere Erfahrung für die Besucher Ihrer Website.

Nicht-Links nicht unterstreichen

Eine weitere Vorsichtsmaßnahme bei Links und Unterstreichungen: Unterstreichen Sie keinen Text, der kein Link ist, um ihn hervorzuheben. Die Leute erwarten, dass unterstrichener Text ein Link ist. Wenn Sie also Inhalte unterstreichen, um sie hinzuzufügen Hervorhebung (anstatt es fett oder kursiv zu machen), senden Sie die falsche Nachricht und verwirren die Website Benutzer.

So ändern Sie die Unterstreichung in Punkte oder Striche

Wenn Sie die Unterstreichung Ihres Textlinks beibehalten möchten, aber den Stil dieser Unterstreichung vom Standarddesign ändern, das eine "durchgezogene" Linie ist, können Sie dies auch tun. Anstelle dieser durchgezogenen Linie können Sie Ihre Links mit Punkten unterstreichen. Dazu entfernen Sie immer noch die Unterstreichung, ersetzen sie jedoch durch die Stileigenschaft border-bottom:

a { Textdekoration: keine; Rand-unten: 1px gepunktet; }

Da Sie die Standardunterstreichung entfernt haben, wird nur die gepunktete angezeigt.

Sie können das gleiche tun, um Bindestriche zu erhalten. Ändern Sie einfach den Rand-Boden-Stil in gestrichelte:

a { Textdekoration: keine; Rand-unten: 1px gestrichelt; }

So ändern Sie die Unterstreichungsfarbe

Eine andere Möglichkeit, auf Ihre Links aufmerksam zu machen, besteht darin, die Farbe der Unterstreichung zu ändern. Achte nur darauf, dass die Farbe zu deinem passt Farbschema.

a { Textdekoration: keine; Rand-unten: 1px durchgehend rot; }

Doppelte Unterstreichungen

Der Trick bei der Verwendung von doppelten Unterstreichungen besteht darin, dass Sie die Breite des Rahmens ändern müssen. Wenn Sie einen 1px breiten Rahmen erstellen, erhalten Sie am Ende eine doppelte Unterstreichung, die wie eine einzelne Unterstreichung aussieht.

a { Textdekoration: keine; Rand-unten: 3px doppelt; }

Sie können die vorhandene Unterstreichung auch verwenden, um eine doppelte Unterstreichung mit anderen Funktionen zu erstellen, z. B. eine der Linien wird gepunktet:

a { border-bottom: 1px double; }

Vergiss die Linkzustände nicht

Sie können Ihren Links in verschiedenen Zuständen wie :hover, :active oder :visited den Rahmen-unten-Stil hinzufügen. Dies kann für Besucher ein angenehmes "Rollover"-Erlebnis schaffen, wenn Sie diese "Hover"-Pseudoklasse verwenden. So wird eine zweite gepunktete Unterstreichung angezeigt, wenn Sie mit der Maus über den Link fahren:

a { Textdekoration: keine; }
a: schweben { border-bottom: 1px gepunktet; }