Linkfarbe

Linkfarbe


Manchmal ist es nützlich, dem Surfer mitzuteilen, ob man auf einen Link außerhalb des eigenen Projektes hinführt, oder auch nicht. Manchmal WILL man einfach nur so auf seiner Seite rote und grüne Links haben.


Überhaupt, um die Links "schön" zu formatieren, empfehle ich nachfolgenden Workshop:

Formatiern von Links

Ich erläutere das ganze einfach an 2 Linkfarben, die innerhalb einer Seite eingebaut werden sollen: rote Links für interne Verweise und grüne Links für externe Verweise.

Das Problem ist ganz einfach mit sogenannten Style-Klassen zu lösen. Das Funktioniert so, dass man in den Style-Angaben je einen Link der Klasse "intern" und extern definiert. Dazu folgender Quelltext:


<head>

<style>
<!-- Nachfolgend die Einstellungen für den internen Link -->
a.intern:link {color=#ff0000; text-decoration:none};
a.intern:hover {color=#ff0000; text-decoration:none; background=#00ff00};
a.intern:visited {color=#ff0000; text-decoration:none};
a.intern:active {color=#ff0000; text-decoration:none; background=#00ff00};

<!-- Nachfolgend die Einstellungen für den externen Link -->
a.extern:link {color=#00ff00; text-decoration:none};
a.extern:hover {color=#00ff00; text-decoration:none; background=#ff0000};
a.extern:visited {color=#00ff00; text-decoration:none};
a.extern:active {color=#00ff00; text-decoration:none; background=#ff0000};

</style>

</head>


Nun, was passiert hier? Zunächst mal habe ich die Linkunterstreichung deaktiviert. Es gibt jedoch einen entscheidenden Unterschied:
Während man normalerweise eingibt a:link {...} schiebt sich hier jeweils noch ein ".intern" bzw. ".extern" dazwischen. Das sind die Style-Klassen. (Das ganze klappt auch mit den anderen Tags, also h1, h2, p, td, ...).
Dann wurden für die verschiedenen Link-Stati (link, hover, visited und active) die Farbe definiert. Beim status "hover" habe ich mich hier entschieden, noch eine Hintergrundfarbe einzubinden. Der Phantasie sind keine Grenzen gesetzt. Man kann natürlich auch noch weitaus mehr Link-Klassen erstellen.

Die Definition wäre somit geschafft. jetzt müssen wir dem Quelltext nur noch beibringen, dass wir einen internen, oder externen Link haben. Dazu erweitert man den a-Tag um class="name". Somit "weiß" dann der Link, wie er sich darzustellen hat. Im HTML sieht das dann wie folgt aus:


<body>

<a class="intern" href="domian1intern.htm">interner Link</a><br>
<a class="extern" href="domain2extern.htm">externer Link</a>

</body>


Wenn Ihr jetzt beide Quelltextblöcke (Ich habe mit Absicht den Code ein wenig erweitert, aber die Erweiterung auf ein Minimum reduziert.) nacheinander in eine neue Datei reinkopiert und diese als HTML-Datei speichert, dann könnt Ihr das Ergebnis sofort ausprobieren und rumspielen. Grundsätzlich lassen sich adiese Klassendefinitionen auch in einer externen CSS-Datei unterbringen.

Artikeldetails

Artikel-ID:
16
Kategorie:
Datum (erstellt):
12:30:19 10-02-2013
Aufrufe:
827
Bewertung (Stimmen):
(605)