Links können Sie mit tollen Effekten dank ein wenig CSS ausstatten.
Hier gibts das nötige Know-How, um die ersten Links selbst
mit CSS zu gestalten.
Für die Gestaltung von Links gibt es mit CSS keine Grenzen.
Mit insgesamt vier CSS Anweisungen können Sie die Links in
ihren verschiedenen Zuständen formatieren.
Die Zustände sind
- normaler Zustand
- Link bereits besucht
- Link gerade aktiv
- Link bei MouseOver
Das folgenden Beispiel formatiert alle Links, da keine CSS Klasse
definiert wurde, sondern direkt der a-Tag definiert wird.
<style type="text/css">
a:link {color:red; text-decoration:none}
a:visited {color:blue; text-decoration:none}
a:active {color:black; text-decoration:none}
a:hover {color:black; text-decoration:underline}
</style>
Hier der Ergebnislink:
Im Vergleich zu einem solchen Link können die "normalen"
Links nicht mithalten.
Der CSS Code ist eigentlich auch recht einfach. link
ist der Zustand des normalen Links (wenn er noch unberührt
ist). In den geschweiften Klammern { } steht die Definition der
Eigenschaften des Linkes. Er soll in diesem Zustand rot sein, sie
können anstatt der Farbangabe auch die Hexadezimale Schreibweise
verwenden. Die CSS-Eigenschaft text-decoration: gibt
an, wie der Text "dekoriert" sein soll, das bedeutet,
ob er unterstrichen, überstriche usw. sein soll. Für diese
Eigenschaft gibt es vier mögliche Werte.
text-decoration:none
Keine "Dekoration"
text-decoration:overline
Über dem Text ist eine Linie
text-decoration:underline
Unter dem Text ist eine Linie
text-decoration:overline underline
Über und unter dem Text ist eine Linie.
Wobei die vierte Möglichkeit natürlich eine Kombination
ist, und deshalb nicht als eigenstehende Eigenschaft bezeichnet
werden kann.
Jetzt zurück zu unserem Beispiel. visited definiert
das Aussehen des Linkes, wenn dieser bereits einmal besucht wurde.
Dieser ist blau, und ist nicht "dekoriert".
active gibt den Zustand an, wenn auf den Link gerade
geklickt wurde, und man sich jetzt auf der entsprechenden Seite
befindet.
Nun kommt der wohl interessanteste Zustand, der hover
Zustand, er definiert das Aussehen, wenn man sich mit der Maus über
dem Link befindet. Hier soll der Text schwarz sein, und unterstrichen
sein.
Diese Änderung betrifft alle Links auf allen Seiten, in denen
das Stylesheet verwendet wird.
Wollen Sie nur einzelne Links mit diesem Effekt ausstatten, dann
empfiehlt sich die Definition einer Klasse für diesen Link.
Das ganze sieht dann so aus:
<style type="text/css">
.menu:link {color:#ff0000; text-decoration:none}
.menu:visited {color:#0000ff; text-decoration:none}
.menu:active {color:#000000; text-decoration:none}
.menu:hover {color:#000000; text-decoration:underline}
</style>
Die Klasse heißt in diesem Beispiel menu, auf diese
muss in der Definition des Linkes hingewiesen werden, nämlich
über das class-Attribut.
<a href="https://www.devmag.net" class="menu">devmag.net</a>
Das Ergebnis bleibt wie gehabt, nur das Sie sich jetzt die Links
aussuchen können, die mit diesem Effekt ausgestattet werden
sollen.
Mit weiteren CSS Befehlen in den Definitionen der Links können
Sie schnell aus ihren Links wahre Kunstwerke schaffen, einfach ausprobieren.
Es gilt der Grundsatz "Schön ist, was gefällt".