Standardmäßig ist der Textinhalt verlinkt mit HTML die Verwendung des oder "Anker"-Elements wird mit einer Unterstreichung formatiert. Häufig entscheiden sich Webdesigner dafür, dieses Standard-Styling zu entfernen, indem sie die Unterstreichung entfernen.
Gründe für und gegen die Unterstreichung
Viele Designer kümmern sich nicht um das Aussehen von unterstrichenem Text, insbesondere bei dichten Inhaltsblöcken mit vielen Links. All diese unterstrichenen Wörter können den Lesefluss eines Dokuments wirklich unterbrechen. Viele haben argumentiert, dass diese Unterstreichungen die Unterscheidung und das schnelle Lesen von Wörtern tatsächlich erschweren, da das Unterstreichen die natürlichen Buchstabenformen verändert.
Es gibt jedoch legitime Vorteile, diese Unterstreichungen auf Textlinks beizubehalten. Wenn Sie beispielsweise große Textblöcke durchsuchen, machen es unterstrichene Links in Verbindung mit dem richtigen Farbkontrast den Lesern leicht, eine Seite sofort zu durchsuchen und zu sehen, wo sich die Links befinden.
Wenn Sie sich entscheiden, Links aus dem Text zu entfernen (ein einfacher Vorgang, den wir in Kürze behandeln werden), sollten Sie unbedingt Wege finden, diesen Text so zu gestalten, dass immer noch unterschieden wird, was ein Link von einem einfachen Text ist. Dies geschieht am häufigsten mit Farbkontrast, aber Farbe allein kann für Besucher mit Sehbehinderungen wie Farbenblindheit ein Problem darstellen. Abhängig von ihrer besonderen Form der Farbenblindheit kann der Kontrast bei ihnen vollständig verloren gehen, sodass sie den Unterschied zwischen verknüpftem und nicht verknüpftem Text nicht erkennen können. Aus diesem Grund gilt der unterstrichene Text immer noch als die beste Möglichkeit, Links anzuzeigen.
Wie können Sie also eine Unterstreichung deaktivieren, wenn Sie dies dennoch tun möchten? Da dies ein visuelles Merkmal ist, mit dem wir uns beschäftigen, wenden wir uns dem Teil unserer Website zu, der alles visuelle behandelt – CSS.
Verwenden Sie Cascading Style Sheets, um die Unterstreichungen auf Links zu deaktivieren
In den meisten Fällen möchten Sie die Unterstreichung nicht nur für einen Textlink deaktivieren. Stattdessen erfordert Ihr Designstil wahrscheinlich, dass Sie Unterstreichungen von allen Links entfernen. Sie würden dies tun, indem Sie Ihrem Stile hinzufügen externes Stylesheet.
ein {
Textdekoration: keine;
}
Das ist es! Diese eine einfache Zeile von CSS würde die Unterstreichung (die tatsächlich die CSS-Eigenschaft für "Text-Dekoration" verwendet) auf allen Links deaktivieren.
Sie können mit diesem Stil auch spezifischer werden. Wenn Sie beispielsweise nur die Unterstreichung oder die Links im Element "nav" deaktivieren möchten, können Sie Folgendes schreiben:
Navi ein {
Textdekoration: keine;
}
Jetzt würden Textlinks auf der Seite die Standardunterstreichung erhalten, aber die in der Navigation hätten sie entfernt.
Viele Webdesigner entscheiden sich dafür, den Link wieder einzuschalten, wenn jemand mit der Maus über den Text fährt. Dies geschieht mit dem :hover CSS-Pseudoklasse, so was:
ein {
Textdekoration: keine;
}
a: schweben {
Textdekoration: unterstreichen;
}
Verwenden von Inline-CSS
Als Alternative zu Änderungen an einem externen Stylesheet können Sie die Stile auch direkt dem Element selbst hinzufügen in HTML.
Das Problem bei dieser Methode besteht darin, dass Stilinformationen in Ihre HTML-Struktur eingefügt werden, was keine bewährte Methode ist. Stil (CSS) und Struktur (HTML) sollten getrennt gehalten werden.
Wenn Sie möchten, dass die Unterstreichung aller Textlinks einer Website entfernt wird, fügen Sie diese Stilinformationen zu. hinzu Jeder Link auf individueller Basis würde bedeuten, dass eine beträchtliche Menge zusätzliches Markup zu Ihrer Website hinzugefügt wird Code. Dieses Aufblähen von Seiten kann die Ladezeit einer Website verlangsamen und die allgemeine Seitenverwaltung erheblich erschweren. Aus diesen Gründen ist es vorzuziehen, für alle Seitengestaltungsanforderungen immer ein externes Stylesheet zu verwenden.
Abschließend
So einfach es ist, die Unterstreichung aus den Textlinks einer Webseite zu entfernen, sollten Sie sich auch der Konsequenzen bewusst sein. Es kann zwar das Aussehen einer Seite bereinigen, dies jedoch auf Kosten der allgemeinen Benutzerfreundlichkeit. Berücksichtigen Sie dies, wenn Sie das nächste Mal erwägen, die "Textdekoration"-Eigenschaften einer Seite zu ändern.