CSS Links: Groß und klein
Stand vom 20.09.2002
Diese Links bestehen einmal au Großbuchstaben, das andere mal aus Kleinbuchstaben. CSS machts möglich!
Mit der text-transfrom Eigenschaft von CSS können Sie
definieren, das ein Text nur in Groß-, Kleinbuchstaben angezeigt
wird. Zudem können sie den Anfangsbuchstabe eines Textes in
Groß-, oder Kleinbuchstaben anzeigen.
Diese Eigenschaft ist natürlich auch anwendbar auf Linktexte.
<style type="text/css">
a:link { color: black; text-transform: lowercase}
a:visited { color: black; text-transform: lowercase }
a:active { color: black; text-transform: lowercase }
a:hover { color: darkblue; text-transform: uppercase; font-weight:
bold; }
</style>
Der Code ist für den ersten Link. Im normalen Zustand soll
der Text die schwarz sein. text-transform: lowercase
bedeutet, das dieser Text in Kleinbuchstaben angezeigt wird. Genauso
verhält es sich im aktiven, und besuchten Zustand. Im Hover-Zustand
wird der Text dunkelblau ausgegeben. text-transform: uppercase
bedeutet, das der Text in Großbuchstaben angezeigt wird.
Bei dem zweiten Link wird nur der Hover-Zustand verändert.
a:hover { color: darkblue; text-transform: capitalize;}
text-transform: capitalize;
Dabei müssen Sie lediglich eine Klasse definieren.
<style type="text/css">
.up:link { color: black; text-transform: lowercase}
.up:visited { color: black; text-transform: lowercase }
.up:active { color: black; text-transform: lowercase }
.up:hover { color: darkblue; text-transform: uppercase; font-weight:
bold; }
</style>
Jetzt muss nur noch auf die Klasse verwiesen werden, dabei müssen
Sie das class-Attribut des Linkes wie folgt verändern:
<a href="http://www.devmag.net" class="up">devmag.net</a>
(tf)
technisch
HTML