Standardmäßig werden Hyperlinks durch unterstrichene blaue Schrift kenntlich gemacht. Besuchte Links werden lila dargestellt. Früher sah man diese Darstellung fast überall im WWW. Heutezutage wirkt sie allerdings sehr altbacken. Daher sehen wir uns nun an, wie man mit CSS Hyperlinks schöner gestalten kann.
Grundsätzlich können wir für die Gestaltung von Hyperlinks alle CSS-Anweisungen verwenden, die wir zur Gestaltung von Text kennen. Sehen wir uns dies als Beispiel an zwei Links an, die wir schon kennen:
So einfach kann man sie mit CSS gestalten:
Darstellung im Browser:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Entwirf mithilfe von CSS ein Design für die Hyperlinks in einer Deiner bereits erstellten HTML-Seiten. Teste verschiedene Designs, um zu sehen, wie man sie klar und deutlich als Links erkennen kann.
Bei vielen Webseiten verändern Links ihre Farbe, wenn man mit der Maus über sie fährt oder reagieren in noch einer anderen Weise darauf. Durch solch kleine Details kann eine Seite schnell ein ganzes Stück moderner wirken. Daher sollten wir uns ansehen, wie man solche Effekte erzielt.
Eine kleine Anpassung der CSS-Datei genügt:
Hier werden drei unterschiedliche Designs der Links angegeben:
a:link beschreibt, wie ein Link im Normalfall aussehen soll. D.h. wenn die Seite zum ersten mal aufgerufen wird, sehen alle Links so aus.a:visited bezieht sich auf bereits besuchte Seiten. So erkennt der Besucher, wo er schon war.a:hover gibt an, wie ein Link aussehen soll, wenn man mit der Maus darüber fährt.
Sehen wir uns das Ergebnis an:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Modifiziere Deine von Dir erstellen Links so, dass unbesuchte, besuchte und mit der Maus ausgewählte Links unterschiedlich erscheinen.