W3docs
de
Anmelden

CSS-Links

To style links with CSS use the following properties: text-decoration, color, background color. See examples.

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 Link
  • a:visited - ein Link, den der Benutzer bereits besucht hat
  • a:hover - ein Link, über den der Benutzer mit der Maus fährt
  • a:active - ein Link in dem Moment, in dem er angeklickt wird
  • a: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>
Probier es selbst »

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:

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>
Probier es selbst »

Ergebnis

Color Property

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.

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>
Probier es selbst »

Sie können Ihre bevorzugte Farbe mit dem Farbauswahl-Tool auswählen.

Praxis

Übung

Welche Eigenschaften werden in CSS verwendet, um das Aussehen von Links zu ändern?