Im Folgenden finden Sie die Schritte, wie Sie die Farbe der auf Ihrer Webseite angezeigten Links mithilfe von HTML und CSS ändern können. Obwohl die Linkfarben mit dem HTML-BODY-Tag vorgenommen werden können, empfehlen wir immer, Styling-Einstellungen in CSS vorzunehmen, wie unten gezeigt.
Wenn Sie die Farbe eines beliebigen Webseitenelements definieren, müssen Sie möglicherweise HTML-Farbcodes verwenden. Für Hauptfarben können Sie auch die Namen dieser Farben angeben, anstatt die Farbcodes zu verwenden, z. B. Rot, Blau, Grün und Schwarz, anstatt ihre respektierten Farbcodewerte zu verwenden.
Verstehen der verschiedenen Arten von Hyperlinks
Hyperlinks sind besondere Elemente auf Ihrer Seite, da sie interaktiv sind. Um anzuzeigen, dass sie interaktiv sind, sind sie je nach Zustand unterschiedlich gefärbt. Ein Hyperlink hat zusätzlich zu seiner standardmäßigen blauen Farbe drei spezielle Farben, die drei verschiedene Zustände darstellen:
-
Besuchter Link – Die Farbe eines besuchten Links. Wenn ein Hyperlink diese Farbe hat, kann der Benutzer erwarten, dass das Klicken auf den Link ihn zu einer Seite führt, die er bereits gesehen hat. Lila ist die Standard-Hyperlink-Farbe für einen besuchten Link.
-
Hover-Link – Die Farbe, wenn die Maus über einen Link schwebt. Wenn ein Hyperlink diese Farbe hat, kann der Benutzer erwarten, dass das Drücken der linken Maustaste (Klicken) und das anschließende Loslassen der Taste dazu führt, dass der Link besucht wird. Die Hover-Farbe ist für “Aktive” und “Besuchte” Links gleich.
-
Aktiver Link – Die Farbe des Links, wenn er angeklickt wird. Wenn der Benutzer diese Farbe sieht, kann er erwarten, dass das Loslassen der Maustaste den Browser veranlasst, den Link zu besuchen.
Weitere Informationen und verwandte Fragen zu Hyperlinks finden Sie in unserer Hyperlink-Definition.
Beispiel für die Farbe eines CSS-Links
Im folgenden CSS-Beispiel stellen wir die Hyperlink-Farben so ein, dass sie denen auf dieser Seite ähneln. Zuerst werden alle Anker auf #2c87f0 (Blauton), #636 auf einen Violettton und alle Hover- und aktiven Links auf die Farbe #c33 (Rot) gesetzt. Der folgende Code kann dem CSS-Stilelement oder in Ihrer .css-Datei hinzugefügt werden.
a {
color: #2c87f0;
}
a:visited {
color: #636;
}
a:hover, a:active, a:focus {
color:#c33;
}
Wenn Ihre Seite kein CSS verwendet, zeigen die folgenden Schritte, wie Sie dies im HTML-BODY-Tag tun. Wie bereits erwähnt, empfehlen wir jedoch dringend, den obigen CSS-Code anstelle des Body-Tags zu verwenden. Sie können den obigen Code in eine CSS-Datei einfügen und alle Ihre Webseiten mit dieser CSS-Datei verknüpfen. Dann könnten Sie die Werte für die Hintergrundfarbe in dieser einen CSS-Datei ändern, um sofort die Hintergrundfarbe aller Seiten zu ändern, die darauf verlinken.
Beispiel für ein HTML-Body-Tag
In einigen sehr seltenen Situationen kann es vorkommen, dass CSS nicht verwendet werden kann. Für diese Situationen können Sie auch die Hintergrundfarbe, Textfarbe, Linkfarbe und andere Werte im HTML-Body-Tag wie unten gezeigt definieren.
<BODY TEXT="#092d07" LINK="#1FOOFF" VLINK= "#000000" ALINK="#000000" BGCOLOR="#ffffff">
Nachfolgend finden Sie die Beschreibungen der einzelnen HTML-Attribute im Body-Tag.
TEXT = Die Farbe des Textes.
LINK = Die Farbe der Links.
VLINK = Farbe des besuchten Links.
ALINK = Farbe des aktiven Links oder die Farbe, in die sich der Link ändert, wenn er angeklickt wird.
BGCOLOR = Die Hintergrundfarbe der Seite.
