Ramnips Homepage-Help      www.chathomepage.de  
CSS - Linkstyling

« Zurück zur CSS-Auswahl

Der Aufbau:

Wenn wir solche Effekte erzielen wollen, bedienen wir uns eines externen CSS Definitionsteiles,
der direkt in das Dokument geschrieben wird.
Der Code muss im Knuddels-Homepageeditor hintereinander weg geschrieben werden, sonst funktioniert es nicht.
Achtung: Der CSS Code wird nur ein einziges mal in das Dokument geschrieben, er gilt dann für alle Links auf der HP. Also nicht dass mir jemand auf die Idee kommt, vor jeden Link den CSS Code zu schreiben!
Ich stelle hier viele Beispiele vor, in denen nur noch die Farbe geändert werden muss.
Zwischen <!-- und --> werden die zu "stylenden" Parameter definiert.
(a:link, a:visited und a:active sollten die gleiche Farbzuweisung bekommen!)
In den folgenden Beispielen stelle ich die Möglichkeiten einzeln und kaum kombiniert vor. Eine Zusammenfügung/Aneinanderreihung von Parametern innerhalb der CSS-Anweisung erfolgt durch das Semikolon ; - da also genau aufpassen.



Die einfache Verfärbung eines Links

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink



Verfärbung + Dekorieren eines Links

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:none;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Der Unterstrich wird entfernt)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:overline;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Der Unterstrich wird zum Überstrich)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:line-through;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Der Unterstrich wird zum Durchstrich)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:underline overline;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Der Unterstrich bleibt und Überstrich kommt dazu)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:underline overline line-through;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Der Unterstrich bleibt und Überstrich sowie Durchstrich kommen dazu)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:none;border:1px solid;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Unterstrich verschwindet und ein Rahmen taucht auf)   

oder...

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:none;border:1px dotted;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Unterstrich verschwindet und ein gestrichelter Rahmen taucht auf)
Die Ziffer 1 kann man natürlich auch erhöhen, allerdings sieht es dann leicht "augenkrebserzeugend" aus!)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:none; position: relative; top:1; left:1;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Unterstrich verschwindet Link-Text "versetzt sich" leicht.)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:none; filter:FlipV(); height:0;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Unterstrich verschwindet, Link-Text stellt sich auf den Kopf.)

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000;text-decoration:none; filter:dropshadow(color=#000000,offX=1,offY=1); height:0;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Unterstrich verschwindet, Link-Text schattiert sich)

<style type="text/css"><!--a:link{color: #00009F;}a:visited{color: #00009F;}a:active{color:#00009F;}a:hover{color:#00009F;text-transform:lowercase;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Erzwingen von Kleinbuchstaben)



Weitere Veränderungsmöglichkeiten

<style type="text/css"><!--a:link{color:#6E6892;}a:visited{color:#6E6892;}a:active{color:#6E6892;}a:hover{color:#7F0000; background-color:#FFBF00; text-decoration:none; font-family:Comic Sans MS; font-size:13pt;}--></style>

Beispiel-Ergebnis:
    Bewege die Maus über den Beispiellink

(Der Unterstrich wird entfernt, Schriftgröße vergrößt sich auf 13pt, Schriftart wird zu Comic Sans MS und einen farblichen Hintergrund erzielen wir auch)

Design-Tipp In den vorangegangen Beispielen haben wir jeweils den "a:hover"-Parameter mit Anweisungen ausgestattet. Der Effekt war immer nur dann zu sehen, wenn wir mit der Maus den Link berührten.
Allerdings gibt es ja noch die Parameter "a:link", "a:visited" und "a:active".
Diese 3 Parameter (Link, besuchter Link und aktivierter Link) können wie der "a:hover"-Parameter mit denselben Anweisungen ausgestattet werden.
Ergebnis ist, dass wir jetzt schon die (unberührten) Links verändern können, z.B. den Linkunterstrich entfernen oder hinter jeden Link eine Hintergrundfarbe legen.
"a:link", "a:visited" und "a:active" sollten dabei immer gleich ausgestattet werden.

<style type="text/css"><!--a:link{color:#FFBF00;text-decoration:none;} a:visited{color:#FFBF00;text-decoration:none;} a:active{color:#FFBF00;text-decoration:none;} a:hover{color:#000000; text-decoration:underline;}--></style>

Beispiel-Ergebnis:     Bewege die Maus über den Beispiellink
(Hier färben wir also die Links in eine rote Farbe vor und kein Unterstrich ist zu sehen. Beim Berühren wird eine schwarze Linkfarbe erzielt und der Unterstrich wird hinzugefügt.)