Links formatieren
in CSS · Autor: Sebastian Fuchs
Auf jeder Seite gibt es sie: Links. Um sie zu erkennen, sollten sie sich immer vom normalen Text unterscheiden, gleichzeitig müssen sie aber auch zum Aussehen der Homepage passen.Das ganze lässt sich sehr gut mit CSS realisieren, da wir hier ziemlich viele Möglichkeiten haben, Links zu formatieren.
Da wir mit CSS HTML-Elementen Attribute zuweisen können, werden Links in CSS logischerweise über das a angesprochen.
a:link {
[Eigenschaften]
}
a:visited {
[Eigenschaften]
}
a:hover {
[Eigenschaften]
}
a:active {
[Eigenschaften]
}
a:focus {
[Eigenschaften]
}
Mit diesen fünf Befehlen können Links formatiert werden. a:link steht für den "Ausgangslink". a:visited gibt an, wie der Link aussehen soll, nachdem er besucht wurde. Des weiteren gibt a:hover an, wie sich der Link verändert, wenn man mit dem Mauszeiger darüber fährt. Schließlich gibt a:active noch an, wie ein aktiver, also gerade angeklickter Link aussehen soll und a:focus gibt die Eigenschaften an, wenn der Link den Fokus besitzt.[Eigenschaften]
}
a:visited {
[Eigenschaften]
}
a:hover {
[Eigenschaften]
}
a:active {
[Eigenschaften]
}
a:focus {
[Eigenschaften]
}
Die beiden letzen Eigenschaften werden aber von manchen Versionen des Internet Explorers nicht unterstützt.
Als Attribute für die Links gibt es viele Möglichkeiten. Ich mache mal ein Beispiel anhand eines normalen Links:
a:link {
text-decoration: none;
font-weight: bold;
color: #FF0000;
background-color: #FFFFFF;
}
Mit diesen Angaben kann man viel experimentieren, bis man ein gutes Ergebnis gefunden hat. Es ist auch möglich, Angaben zu kombinieren. So kann man zum Beispiel eine text-decoration von underline und overline gleichzeitig angeben, was zur Folge hat, dass über und unter dem Link eine Linie erscheint. Geschrieben wird das dann so:text-decoration: none;
font-weight: bold;
color: #FF0000;
background-color: #FFFFFF;
}
a:hover {
text-decoration: underline overline;
}
Außerdem gibt es die Möglichkeit, "Link-Typen" zusammenzufassen, wenn zum Beispiel der "Ausgangslink" und der "besuchte Link" gleich aussehen sollen. Dies geschieht, indem man die jeweiligen Angaben einfach durch Kommata voneinander abtrennt:text-decoration: underline overline;
}
a:link, a:visited {
[...]
}
Nun sind wir auch schon wieder am Ende dieses Tutorials. Wie gesagt lassen sich beinahe alle CSS Eigenschaften auch auf Links anwenden, wodurch es viele Möglichkeiten zur Gestaltung selbiger gibt. Daher kann ich nur empfehlen, einfach viel auszuprobieren. Manchmal ist weniger aber trotzdem mehr.[...]
}
Weitere CSS Attribute kannst du beispielsweise auf css4you.de nachschauen.
· zurück zu "CSS Tutorials"
