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;
des Textes groß geschrieben werden soll. Den ganzen Effekt
können Sie natürlich auch als Klasse definieren, damit
Sie sich die einzelnen Links aussuchen können, welche mit diesem
Effekt "ausgestattet" werden.
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="https://www.devmag.net" class="up">devmag.net</a>
(tf)