Lektion 6
April 3, 2012
Links
Sie können Ihr Wissen aus den vorangegangenen Lektionen auch auf Links anwenden (Farben verändern, Schriftarten, Unterstreichungen usw.) Neu ist aber, dass CSS es Ihnen erlaubt, dies abhängig davon zu gestalten, ob der Link schon besucht (visited) oder noch nicht besucht (link) wurde, gerade angeklickt wird (active) oder nur der Mauszeiger über dem Link platziert ist (hover). Dadurch kann man seiner Webseite tolle und nützliche Effekte hinzufügen. Um diese Effekte zu steuern, benutzt man sog. Pseudoklassen (pseudo-classes).
Was ist eine Pseudoklasse?
Eine Pseudoklasse erlaubt es Ihnen zwischen verschiedenen Zuständen oder Ereignissen zu unterscheiden, wenn Sie eine Eigenschaft für einen HTML-Tag festlegen.
Sehen wir uns ein Beispiel an. Wie Sie wissen, werden Links in HTML mit <a>-Tags markiert. In CSS nutzen wir wiederum a zum ansprechen der Links im HTML-Dokument:
a {
color: blue;
}
Ein Link kann verschiedene Zustände haben. Er kann z.B. besucht oder noch nicht besucht worden sein. Sie können die folgenden Pseudoklassen verwenden, um dies darzustellen:
a:link {
color: blue;
}
a:visited {
color: red;
}
Man benutzt a:link und a:visited für unbesuchte und besuchte Links. Links, die gerade angeklickt werden, werden mir der Pseudoklasse a:active angesprochen und die, die gerade mit dem Mauszeiger überfahren (gehovert) werden, mit a:hover.
Wir schauen uns jetzt jede der vier Pseudoklassen genauer an, geben Beispiele und Erklärungen.
Die Pseudoklasse ‘:link’
Die Pseudoklasse :link wird für Links zu Seiten benutzt, die der Nutzer vorher noch nicht besucht hat.
Im untenstehenden Beispiel sind die nicht besuchten Links hellblau.
a:link {
color: #6699CC;
}
Die Pseudoklasse ‘:visited’
Die Pseudoklasse :visited wird für Links zu bereits besuchten Seiten benutzt. Der nachfolgende Beispielcode färbt alle besuchten Links dunkelviolett:
a:visited {
color: #660099;
}
Die Pseudoklasse ‘:active’
Die Pseudoklasse :active benutzt man für aktive Links, also solche, die gerade angeklickt werden.
Das nachfolgende Beispiel gibt den aktiven Links eine gelbe Hintergrundfarbe:
a:active {
background-color: #FFFF00;
}
Die Pseudoklasse ‘:hover’
Die Pseudoklasse :hover wird angewendet, wenn der Mauszeiger auf einem Link platziert wird.
Das kann verwendet werden, um interessante Effekte zu kreieren. Wenn man beispielsweise möchte, dass seine Links orange und kursiv geschrieben werden, wenn der Mauszeiger sie berührt, dann sollte das CSS so aussehen:
a:hover {
color: orange;
font-style: italic;
}
Beispiel 1: Effekt, wenn der Mauszeiger auf dem Link ist
Es ist sehr beliebt, verschiedene Effekte für das “Überfahren” von Links in eine Webseite einzubauen. Wir schauen uns aus diesem Grund ein paar Extra-Beispiele für die Pseudoklasse :hover an.
Beispiel 1a: Laufweite
Wie Sie vielleicht noch aus Lektion 5 wissen, kann die Laufweite über die Eigenschaft letter-spacing verändert werden. Diese Eigenschaft kann auch Links zugewiesen werden, um einen speziellen Effekt zu erreichen:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Beispiel 1b: GROSSSCHREIBUNG und kleinschreibung
In Lektion 5 haben wir auch die Eigenschaft text-transform betrachtet, die zwischen Groß- und Kleinbuchstaben umschalten kann. Auch dieses kann für Link-Effekte benutzt werden:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Diese beiden Beispiele geben Ihnen einen kurzen Einblick in die fast unendlichen Möglichkeiten, verschiedene Eigenschaften zu kombinieren. Sie können sicherlich auch Ihre eigenen Effekte erstellen – probieren Sie’s!
Beispiel 2: Unterstreichung der Links entfernen
Eine uns oft gestellte Frage ist: Wie entferne ich den Strich unter den Links?
Überlegen Sie sich genau, ob es wirklich nötig ist, die Unterstreichung zu entfernen, da es die Benutzbarkeit (Usability) Ihrer Webseite erheblich herabsetzen kann. Die Menschen haben sich an blaue unterstrichene Links gewöhnt und wissen, dass man darauf klicken kann. Sogar meine Mutter weiß das! Wenn Sie die Unterstreichung und die Farbe von Links ändern, kann es durchaus sein, dass einige Nutzer irritiert sind und nicht in den vollen Genuss aller Inhalte Ihrer Seiten kommen.
Mit dem eben gelesenen im Hinterkopf wieder zurück zum Beispiel: Es ist eigentlich sehr einfach die Unterstreichungen der Links zu entfernen. Erinnern Sie sich noch an die Eigenschaft text-decoration aus Lektion 5 ? Diese konnte man verwenden um festzulegen, ob ein Text unterstrichen ist oder nicht. Um einen Unterstrich zu entfernen, setzt man den Wert für text-decoration auf none (kein).
a {
text-decoration:none;
}
Alternativ dazu, können Sie text-decoration auch für alle vier Pseudoklassen setzen.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
