CSS-Links
In diesem Kapitel erklären wir, wie Sie Links stylen und sie optisch ansprechender gestalten können.
Der Link hat folgende Zustände:
a:link- ein normaler, noch nicht besuchter Linka:visited- ein Link, den der Benutzer bereits besucht hata:hover- ein Link, über den der Benutzer mit der Maus fährta:active- ein Link in dem Moment, in dem er angeklickt wirda:focus- ein Link, der den Tastaturfokus erhalten hat
Wir werden folgende Eigenschaften behandeln:
Textdekoration
Wie Sie sich erinnern, ist ein Link standardmäßig unterstrichen. Um dies zu entfernen, müssen wir die Eigenschaft text-decoration verwenden.
Beispiel zur Verwendung der text-decoration-Eigenschaft zum Stylen eines Links:
CSS-Links: text-decoration-Beispiele
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#"> This is some link.</a>
</body>
</html>Erläuterung unseres Codes.
Hier sehen Sie, dass der Link in seinem ersten und zweiten Zustand ohne Unterstreichung dargestellt wird. Der Link wird unterstrichen, wenn der Benutzer mit der Maus darüber fährt oder darauf klickt.
Sie können dies in Ihrem Browser mit Ihren Editoren oder unserem Online-Editor überprüfen.
Diese Styles können entweder im <head>-Bereich oder in einer CSS-Datei, die Sie für Ihre Webseite verwenden, geschrieben werden.
Farbe
Wir verwenden die Eigenschaft color, um die Farbe eines Links festzulegen.
Wenn wir beispielsweise möchten, dass unser Link standardmäßig schwarz und im dritten Zustand (a:hover) #1c87c9 ist, müssen wir Folgendes schreiben:
Beispiel zur Verwendung der color-Eigenschaft zum Stylen eines Links:
CSS-Links: color-Beispiele
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Ergebnis
Hintergrundfarbe
Was können wir tun, wenn unser Link einen Hintergrund haben soll?
Dazu müssen wir einfach die Eigenschaft background-color anwenden.
Beispielsweise hat unser Link einen grauen Hintergrund, der beim Hovern zu #1c87c9 wechselt.
Wenn der erste (a:link) und der zweite (a:visited) Zustand die gleiche Hintergrundfarbe haben, können wir einfach a verwenden.
Beispiel zur Verwendung der background-color-Eigenschaft zum Stylen eines Links:
CSS-Links: background-color-Beispiele
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a href="#">This is some link.</a>
</body>
</html>Sie können Ihre bevorzugte Farbe mit dem Farbauswahl-Tool auswählen.
Praxis
Welche Eigenschaften werden in CSS verwendet, um das Aussehen von Links zu ändern?