Standardmäßig haben Webbrowser bestimmte CSS-Stile, die sie auf bestimmte HTML-Elemente anwenden. Wenn Sie diese Standardwerte nicht mit den eigenen Stylesheets Ihrer Site überschreiben, gelten die Standardwerte. Bei Hyperlinks ist der Standard-Anzeigestil, dass der verknüpfte Text blau und unterstrichen ist. Der Browser macht dies, damit die Besucher einer Website leicht erkennen können, welcher Text verlinkt ist. Viele Webdesigner interessieren sich nicht für diese Standardstile, insbesondere für diese Unterstreichungen. Zum Glück macht es CSS einfach, das Aussehen dieser Unterstreichungen zu ändern oder vollständig zu entfernen.
Unterstrich bei Textlinks entfernen
Unterstrichener Text kann schwieriger sein, diesen nicht unterstrichenen Text zu lesen. Darüber hinaus interessieren sich viele Designer einfach nicht für das Aussehen unterstrichener Textlinks. In diesen Fällen möchten Sie diese Unterstreichungen möglicherweise ganz entfernen.
Um die Unterstriche von Textlinks zu entfernen, verwenden Sie die CSS-Eigenschaft text-decoration. Hier ist das CSS, das Sie schreiben würden, um dies zu tun:
eine {Textdekoration: keine; }
Mit dieser einen Zeile von CSS entfernen Sie die Unterstreichung von allen Textlinks. Obwohl dies ein sehr allgemeiner Stil ist (er verwendet eine Elementauswahl), ist er dennoch genauer als die Standardstile des Browsers. Da diese Standardstile die Unterstriche für den Anfang erstellen, müssen Sie diese überschreiben.
Vorsicht beim Entfernen von Unterstreichungen
Visuell kann das Entfernen von Unterstreichungen genau das sein, was Sie erreichen möchten, aber Sie sollten auch vorsichtig sein, wenn Sie dies tun. Unabhängig davon, ob Sie das Aussehen unterstrichener Links mögen oder nicht, Sie können nicht argumentieren, dass sie deutlich machen, welcher Text verlinkt ist und welcher nicht. Wenn Sie Unterstriche wegnehmen oder die standardmäßige blaue Linkfarbe ändern, sollten Sie sicherstellen, dass Sie sie durch Formatvorlagen ersetzen, durch die der verknüpfte Text noch hervorgehoben wird. Dies macht die Besucher Ihrer Website intuitiver.
Keine Links unterstreichen
Ein weiterer Hinweis auf Links und Unterstreichungen unterstreicht nicht den Text, der kein Link ist, um ihn hervorzuheben. Die Menschen erwarten, dass unterstrichener Text ein Link ist. Wenn Sie also den Inhalt unterstreichen, um ihn hervorzuheben (anstatt ihn fett oder kursiv zu machen), senden Sie die falsche Nachricht und verwirren die Site-Benutzer.
Ändern Sie die Unterstreichung in Punkte oder Bindestriche
Wenn Sie die Unterstriche Ihres Textlinks beibehalten möchten, den Stil dieser Unterstreichung jedoch von der Standardoption, der "soldi" -Zeile, ändern, können Sie dies auch tun. Anstelle dieser durchgezogenen Linie können Sie Punkte verwenden, um Ihre Links zu unterstreichen. Um dies zu tun, wird die Unterstreichung weiterhin entfernt, jedoch durch die Stileigenschaft "border-bottom" ersetzt:
eine {Textdekoration: keine; Rand unten: 1px gepunktet; }
Da Sie die Standard-Unterstreichung entfernt haben, wird nur die gepunktete angezeigt.
Sie können dasselbe tun, um Striche zu erhalten. Ändern Sie einfach den unteren Randstil in gestrichelt:
eine {Textdekoration: keine; Rand unten: 1px gestrichelt; }
Ändern Sie die Unterstrichfarbe
Eine andere Möglichkeit, auf Ihre Links aufmerksam zu machen, besteht darin, die Farbe der Unterstreichung zu ändern. Stellen Sie einfach sicher, dass die Farbe zu Ihrem Farbschema passt.
eine {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 eine doppelte Unterstreichung, die wie eine einzige Unterstreichung aussieht.
eine {Textdekoration: keine; Rand unten: 3x doppelt; }
Sie können die vorhandene Unterstreichung auch verwenden, um eine doppelte Unterstreichung mit anderen Features zu erstellen, z. B. eine der gepunkteten Linien:
a {border-bottom: 1px double; }
Vergiss nicht die Verbindungszustände
Sie können den Links unten-Stil in verschiedenen Status hinzufügen, z. B. Hover,: Aktiv oder: Besuchte. Dies kann für Besucher eine schöne "Rollover" -Erfahrung bedeuten, wenn Sie diese "Schwebeflug" -Pseudoklasse verwenden. Wenn Sie den Mauszeiger über den Link bewegen, wird eine zweite gepunktete Unterstreichung angezeigt:
eine {Textdekoration: keine; } a: hover {border-bottom: 1px gepunktet; }
Originalartikel von Jennifer Krynin. Herausgegeben von Jeremy Girard
