29.12.2007
Links mit Klassen unterschiedlich gestalten
Links für die Navigation (Menü) befinden sich üblicherweise in einem Div (z.B. "#navi") und werden einheitlich definiert. Zu diesem Zweck wird in der CSS-Datei ein Bezug zwischen dem Navi-Div und den Links hergestellt.
Damit ist gewährleistet, dass sich die CSS-Style-Angaben für den a-Link ausschließlich auf die Links innerhalb des Navi-Divs beziehen. Das sieht dann wie folgt aus:
#navi a
{
Styleangaben...
}
Entsprechend werden die Angaben für #navi a:visited und #navi a:hover definiert.
Normale Linkformatierung (Standardlinks)
Für alle weiteren Links, die sich nicht zwingend in einem bestimmten Div befinden müssen, erfolgen die CSS-Angaben wie folgt:
a:link
{
color:#FF00FF;
text-decoration:none;
}
a:visited
{
color:#8B2323;
text-decoration:none;
}
a:hover
{
color:#FFB90F;
font-weight:bold;
font-size:1.1em;
text-decoration:none;
}
Der HTML-Code für einen solchen Standard-Link lautet:
<a href="#">Standardlink</a>
Das Rautezeichen # bitte durch die Dateibezeichnung der Zielseite ersetzen.
Besondere Linkformatierung durch Link-Klassen
Will man neben den Standardlinks noch weitere Links verwenden, die von der Standard-Definition abweichend dargestellt werden sollen, ist dies durch Definition weiterer Link-Klassen möglich. Die Bezeichnung dieser Klassen ist dabei im Rahmen der zulässigen Zeichen beliebig. Ich verwende als Beispiel die Klasse "class1", die abweichend vom Standardlink definiert wird.
Daraus folgt z.B. folgender CSS-Code:
a.class1:link
{
color:#ff0000;
text-decoration:none;
}
a.class1:visited
{
color:#0000ff;
text-decoration:none;
}
a.class1:hover
{
color:#8A2BE2;
font-weight:bold;
font-size:1.1em;
text-decoration:none;
}
Beim HTML-Aufruf muss dann ein Bezug zur CSS-Klasse "class1" hergestellt werden:
<a href="#" class="class1">Link der Klasse "class1"</a>
Das Rautezeichen # bitte durch die Dateibezeichnung der Zielseite ersetzen.
Auf diese Weise können noch mehrere Linkklassen gebildet werden, die sich durch ihr Aussehen unterscheiden.