CSS-Verknüpfung

Mit CSS können Links auf verschiedene Weise stilisiert werden.

Text-Link Text-Link Link-Schaltfläche Link-Schaltfläche

Link-Stil festlegen

Links können jede CSS-Eigenschaft (z.B. color,font-family,background und so weiter) zur Stilisierung verwendet werden.

Beispiel

a {
  color: hotpink;
}

Versuchen Sie es selbst

Darüber hinaus können verschiedene Stile für Links basierend auf ihrem Zustand gesetzt werden.

Es gibt vier Link-Status:

  • a:link - Der normale, nicht besuchte Link
  • a:visited - Der Link wurde besucht
  • a:hover - Wenn der Benutzer den Cursor über dem Link hält
  • a:active - Wenn der Link geklickt wird

Beispiel

/* Der Link wurde noch nicht besucht */
a:link {
  color: red;
}
/* Der Link wurde besucht */
a:visited {
  color: green;
}
/* Der Cursor ist über dem Link */
a:hover {
  color: hotpink;
}
/* Der ausgewählte Link */
a:active {
  color: blue;
}

Versuchen Sie es selbst

Wenn für mehrere Link-Status Stile gesetzt werden, befolgen Sie bitte die folgenden Reihenregeln:

  • a:hover muss nach a:link und a:visited folgen
  • a:active muss nach a:hover folgen

Textdekoration

text-decoration Diese Eigenschaft wird hauptsächlich verwendet, um die Unterstreichung aus den Links zu entfernen:

Beispiel

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Versuchen Sie es selbst

Hintergrundfarbe

background-color Die Eigenschaft kann verwendet werden, um die Hintergrundfarbe der Links zu spezifizieren:

Beispiel

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Versuchen Sie es selbst

Link-Schaltfläche

In diesem Beispiel wird ein fortgeschritteneres Beispiel gezeigt, bei dem wir mehrere CSS-Attribute kombinieren, um Links als Kasten/KNopf anzuzeigen:

Beispiel

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Versuchen Sie es selbst

Mehr Beispiele

Andere Stile zu Hyperlinks hinzufügen
Dieses Beispiel zeigt, wie man andere Stile zu Hyperlinks hinzufügt.
Fortgeschritten - Erstellen von Rahmen-Links mit Rand
Dies ist ein weiteres Beispiel, wie man Linksrahmen/Buttons erstellt.
Cursor ändern
Die cursor-Eigenschaft legt den Cursor-Typ fest, der angezeigt werden soll. Dieses Beispiel zeigt verschiedene Cursor-Typen (nützlich für Links).