CSS verschiedene Linkfarben bestimmen

CSS eignet sich prima, um Hyperlinks zu formatieren und so innerhalb einer HTML-Datei den Links unterschiedliche Farben zuzuweisen. Dazu werden in einem Stylesheet verschiedenen CSS Klassen definiert. Das Stylesheet wird entweder direkt im Quellcode der HTML-Datei im HEAD-Bereich eingefügt oder über eine externe Stylesheet-Datei eingebunden.

So sähe beispielsweise der HTML-Quelltext aus:

<html>
<head>
<title>CSS verschiedene Linkfarben</title>

<style type=”text/css”>
a.rot:link {color: red; }
a.rot:visited {color: red; }
a.rot:hover {color: black; }
a.rot:active {color: red; }

a.blau:link {color: #0000ff; }
a.blau:visited {color: #0000ff; }
a.blau:hover {color: #000000; }
a.blau:active {color: #0000ff; }

a.gruen:link {color: green; }
a.gruen:visited {color: green; }
a.gruen:hover {color: black; }
a.gruen:active {color: green; }
</style>

</head>

<body>
<a href=”#” class=”rot”>roter Link</a><br>
<a href=”#” class=”blau”>blauer Link</a><br>
<a href=”#” class=”gruen”>grüner Link</a><br>

</body>
</html>

Der Wert “a.rot:link {color: red;}” weist in meinem Beispiel dem Link mit der Klasse “class=”rot” die Farbe Rot zu. Anstatt dem “color:red” kann man auch den Farb-HEX-Wert “color: #ff0000” angeben.

Im Beispiel wurde den Links beim Überfahren mit der Maus – dem Hover – noch die Farbe schwarz (color: #000000 bzw color: black) zugewiesen.

Hier auch noch einmal die Pseudoklassen für Links im Überblick:

:link = Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:hover = Eigenschaften des Links beim Überfahren mit der Maus
:active = für gerade aktive angeklickte Links

0 Kommentare

Einen Kommentar hinterlassen


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.