CSS - Links formatieren
Links lassen sich komfortabel per CSS formatieren. Dafür existieren besondere Pseudoklassen, über die die unterschiedlichen Zusände von Links gestaltet werden können.
- a:link - für einen normalen Link
a:visited - für einen besuchten Link - a:focus - für einen Link, der den Fokus über die Tastatur erhält, z.B. beim Durchsteppen mit der Tabulatortaste. a:focus wird jedoch vom Internet Explorer bis einschließlich Version 6 nicht unterstützt.
- a:hover - während man mit der Maus über einen Link fährt, ohne dass dieser angeklickt wird
- a:active - für einen gerade mit der Maus angeklickten Link
Hinter dem a befindet sich jeweils ein Doppelpunkt. Dadurch werden die verschiedenen Pseudoklassen gekennzeichnet - bei normalen Klassen würden wir hingegen wie gewohnt einen Punkt setzen, z.B. p.wichtig. Es lassen sich auch Klassen oder IDs mit den Pseudoklassen kombinieren, so würde über a.wichtig:visited nur ein besuchter Link formatiert werden, der mit der Klasse wichtig gekennzeichnet ist.
Folgendes Beispiel soll die Verwendung von Pseudoklassen demonstrieren. Bei den einzelnen Verlinkungen werden unterschiedliche Farben gewählt und außerdem werden normale und besuchte Links ohne Unterstreichung und fett dargestellt. In anderen Zuständen sind die Links wieder wie gewohnt unterstrichen. Natürlich können Sie weitere Gestaltungen vornehmen und z.B. Hintergrundfarben, Rahmen etc. zuweisen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Links formatieren</title>
<style type="text/css">
/* <![CDATA[ */
body {
background-color: #CCCCCC;
}
a:link {
color: red;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: green;
text-decoration: none;
font-weight:bold;
}
a:focus {
color: white;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
/* ]] */
</style>
</head>
<body>
<p><a href="#">Ein bedeutsamer Link</a></p>
<p><a href="#">Noch ein bedeutsamer Link</a></p>
</body>
</html>
Zu Beginn sollten im Beispiel alle Links rot sein (a:link), wenn wir mit der Maus darüberfahren, hingegen blau werden (a:visited). Gelb erscheinen die Links, wenn wir darauf klicken und die Maustaste gedrückt halten. Verwenden wir die Tabulatortaste, um uns durch das Dokument zu bewegen, werden sie jeweils weiß dargestellt (a:focus).