|
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 ;o)
Ü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 {color:#ff0000; text-decoration:none;}
a.intern:link {color:#ff0000; text-decoration:none;}
a.intern:hover {color:#ff0000; text-decoration:none; background-color:#00ff00;}
a.intern:visited {color:#ff0000; text-decoration:none;}
a.intern:active {color:#ff0000; text-decoration:none; background-color:#00ff00;}
<!-- Nachfolgend
die Einstellungen für den externen Link -->
a.extern {color:#00ff00; text-decoration:none;}
a.extern:link {color:#00ff00; text-decoration:none;}
a.extern:hover {color:#00ff00; text-decoration:none; background-color:#ff0000;}
a.extern:visited {color:#00ff00; text-decoration:none;}
a.extern:active {color:#00ff00; text-decoration:none; background-color:#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, hoverBeim "Drüberwegfahren" mit der Maus, visitedBereits besuchter Link
und activeLink auf den gerade geklickt wird) 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>
Klick hier
Beispiel:
interner Link
externer Link
Wenn Sie jetzt beide Quelltextblöcke
nacheinander in eine neue Datei hineinkopieren und diese als HTML-Datei speichern,
dann können Sie das Ergebnis sofort ausprobieren und
experimentieren. Grundsätzlich
lassen sich diese Klassendefinitionen auch in einer externen CSS-Datei
unterbringen.
Dieser Workshop ist ein Service von more4webmaster.de
Für Hilfe und mehr besuchen Sie unser more4webmaster.com Board
|
