Verschiedene Linkfarben – Spezielle Hyperlinks auszeichnen und formatieren

Vereinzelte Links
Mehrere Links
Ressourcen/Webseiten

Erläuterungen und Beispiele zu einer oft gestellten Frage (FAQ) in der Newsgroup de.comm.infosystems.www.authoring.misc (dciwam).

Frage

Wie kann ich für einige spezielle Hyperlinks auf einer Seite ein anderes Aussehen, zum Beispiel andere Farben, festlegen?

Antwort

Das läßt sich einfach mit Klassen in (X)HTML und den zugehörigen Einträgen im Stylesheet bewerkstelligen.

1. Vereinzelte Links

Sollen vereinzelte Links anders als sonst auf der Seite dargestellt werden, so wird für diese speziellen Links im HTML-Quelltext eine Klasse vergeben:

<a class="speziell" href="http://example.com/">Beispiellink</a>

Im Stylesheet werden nun den Links mit dieser Klassenbezeichnung die gewünschten CSS-Deklarationen zugewiesen:

a.speziell:link {
   background-color: #FFCC66;
   color:            #0000CC;
}

a.speziell:visited {
   background-color: #FFCC66;
   color:            #660066;
}

a.speziell:hover {
   background-color: #0000CC;
   color:            #FFCC66;
}

a.speziell:active {
   background-color: #CCCCFF;
   color:            #CC0000;
}

2. Mehrere Links in zusammenhängenden Bereichen

Sollen mehrere Links, welche sich in einem zusammenhängenden Bereich befinden, anders dargestellt werden, so weist man einem übergeordneten HTML-Element eine Klasse zu. Nun ändert sich die Schreibweise der CSS-Regeln dahingehend, daß die Klasse vor dem a:link (und so weiter) steht.

Zum Beispiel soll ein Navigationsbereich eine andere Hintergrundfarbe erhalten und damit auch die Hyperlinks in ihm. Der HTML-Code:

<ul class="navigation">
   <li><a href="http://example.com/produkte/">Produkte</a></li>
   <li><a href="http://example.com/ueber/">Über uns</a></li>
   <li><a href="http://example.com/kontakt/">Kontakt</a></li>
</ul>

Im CSS wird für den Navigationsbereich eine andere Farbkombination festgelegt und anschließend auch die Darstellung der enthaltenen Links geändert:

.navigation {
   background-color: #FFCC66;
   color:            #000000;
}

.navigation a:link {
   background-color: #FFCC66;
   color:            #0000CC;
}

.navigation a:visited {
   background-color: #FFCC66;
   color:            #660066;
}

.navigation a:hover {
   background-color: #0000CC;
   color:            #FFCC66;
}

.navigation a:active {
   background-color: #CCCCFF;
   color:            #CC0000;
}

Beachte: Bei der Festlegung einer Vordergrundfarbe sollte immer auch die Hintergrundfarbe angegeben werden (und umgekehrt). Es könnte sonst passieren, daß bei der Vererbung von CSS-Eigenschaften eine unlesbare Farbkombination herauskommt.

Ressourcen und empfehlenswerte Webseiten

Element identifiers: the id and class attributes: Die Attribute class und id in der HTML 4.01 Spezifikation. (Deutsche Übersetzung.)
CSS2 Specification / Selectors: Eine Vielzahl an CSS-Selektoren erlaubt es, Elementen auch ohne Klassen oder id Eigenschaften zuzuweisen. (Deutsche Übersetzung.)
Die richtige Reihenfolge der Link-Pseudoklassen: Ein verwandtes Thema aus der FAQ von dciwam.

Sonstiges

Gerne nehme ich Anregungen, Hinweise und Fragen per E-Mail entgegen: Lars Kasper, mail@LarsKasper.de