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.
|