In diesem Kapitel werden wir erklären, wie man Links stylen.
Der Link hat folgende vier Zustände:
- a:link - ein normaler, unbesuchter Link
- a:visited - ein Link, den der Benutzer bereits besucht hat
- a:hover - ein Link, wenn der Benutzer mit der Maus darüber bewegt
- a:active - ein Link, sobald er angeklickt wird
Jetzt werden wir über diese Eigenschaften sprechen:
Text Decoration
Beachten Sie bitte, dass, wenn wir einen Link erstellen, ist er voreingestellt unterstrichen. Wenn wir es entfernen möchten, müssen wir die Eigenschaft text-decoration verwenden.
Lassen Sie uns ein Beispiel betrachten.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>Das ist ein Link.</a>
</body>
</html>Jetzt lassen Sie uns die Bedeutung unseres Codes erklären.
Hier sehen Sie, dass unser Link im ersten und zweiten Zustand ohne Unterstrich sein wird. Der Link wird unterstrichen, wenn der Benutzer mit der Maus darüber bewegt und wenn im Moment auf den Link geklickt wird.
Sie können es in Ihren Browsern mit Ihren Redakteuren oder mit unserem Online-Editor testen.
Diese Styles können entweder in den Abschnitt <head> oder in die css-Datei, die Sie für Ihre Webseite verwenden, platziert werden.
Color
Die Eigenschaft color verwenden wir für die Farbe des Links.
Zum Beispiel, um unseren Link schwarz zu machen und #1c87c9 in seinem dritten Zustand (a:hover) zu haben, müssen wir folgendes schreiben:
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #1c87c9;
}
a:active {
color: #1c87c9;
}
</style>
</head>
<body>
<a>Das ist ein Link.</a>
</body>
</html>Hintergrundfarbe
Was können wir tun, um einen Link mit Hintergrund zu haben?
Wir müssen nur einen Stil mit der Eigenschaft background-color angeben.
Zum Beispiel wird unser Link mit grauem Hintergrund sein und im Hover #1c87c9 sein.
Wenn der erste (a:link) und der zweite (a:visited) Zustand die gleiche Hintergrundfarbe haben, können wir nur das Tag <a> angeben.
Lassen Sie uns den Code ansehen.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
a {
background-color: #555555;
}
a:hover {
background-color: #1c87c9;
}
a:active {
background-color: #1c87c9;
}
</style>
</head>
<body>
<a>Das ist ein Link.</a>
</body>
</html>Sie können Ihre bevorzugte Farbe mit dem Farbwähler auswählen.
Übe dein Wissen
