Das Erscheinungsbild von Hyperlinks wird, soweit es nicht durch den Ersteller der Webseite modifiziert wird, von den Einstellungen im Browser des Besuchers bestimmt.
Per CSS gibt es diverse Möglichkeiten zur Formatierung von Hyperlinks:
Zum Einen lassen sich Links wie jedes andere Element einer Webseite formatieren, wobei zu beachten ist, daß im Normalfall Links untertrichen dargestellt werden.
Will man diesen Effekt unterbinden, notiert man im Stylesheet der Seite die Zeile:
Verwendet man Grafiken als Hyperlink und möchte den angezeigten Rahmen verschwinden lassen, genügt die Angabe:
im betreffenden <img>-Tag.
Des Weiteren bieten CSS sogenannte "Pseudo-Formate" für die verschiedenen "Zustände" von Hyperlinks:
| a:link | -bisher nicht besuchter Link |
| a:visited | -bereits besuchter Link |
| a:hover | -beim Überfahren des Links mit dem Cursor |
| a:focus | -Link mit aktivem Focus |
| a:active | -Link beim Anklicken |
Zur korrekten Umsetzungrechenden Formatierungen je nach Zustand ist es erforderlich, die entsprechenden Pseudoformate in der oben
aufgeführten Reihenfolge innerhalb des Stylesheets zu notieren.
Diese Pseudoformate lassen sich bspw. auch auf Klassen von Links anwenden. In diesem Fall notiert man anschliessend an die entsprechende Klasse das Pseudoformat:
Beispiel:
Link-Klassen formatieren
Quelltext:
 |
|
|
|
<html>
<head>
<title>Link formatieren</title>
<style type="text/css">
<!--
a.schraeg
{
font-style:italic;
}
a.schraeg:hover
{
text-decoration:none;
}
-->
</style>
</head>
<body>
<a href="#">Link ohne Formatzuweisung</a>
<a href="#"class="schraeg">Link mit Formatzuweisung</a>
</body>
</html>
|
|
|
|
|
Erläuterung:
Die Seite enthält 2 Links. Der Zweite davon wurde der Klasse schraeg zugeordnet und wird per CSS standardmässig kursiv formatiert. Zusätzlich wird über das Pseudoformat :hover bestimmt, dass dieser Link beim Überfahren nicht unterstrichen dargestellt wird.
Der erste Link in der Seite wird durch die Style-Angaben nicht beeinflusst.
|
|
|
|
 |
Die verschiedenen Pseudoformate werden nicht von allen Browsern lückenlos umgesetzt. Insbesondere interpretiert Netscape4 nicht das
Format a:hover
|
|
|
|
|
|
|
