BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

HTML Links - Verschiedene Farben


Ein HTML-Link wird in einer anderen Farbe angezeigt, je nachdem, ob er besucht, nicht besucht oder aktiv ist.


HTML Linkfarben

Standardmäßig wird ein Link so angezeigt (in allen Browsern):

  • Ein nicht besuchter Link ist unterstrichen und blau
  • Ein besuchter Link ist unterstrichen und lila
  • Ein aktiver Link ist unterstrichen und rot

Sie können die Linkstatusfarben mithilfe von CSS ändern:

Beispiel

Hier wird ein nicht besuchter Link grün und nicht unterstrichen angezeigt. Ein besuchter Link wird rosa und nicht unterstrichen angezeigt. Ein aktiver Link wird gelb und unterstrichen angezeigt. Wenn Sie mit der Maus über einen Link fahren (a:hover), wird dieser außerdem rot und unterstrichen:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Try it Yourself »

Link-Schaltflächen

Ein Link kann mithilfe von CSS auch als Schaltfläche gestaltet werden:

Dies ist ein Link

Beispiel

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
Try it Yourself »

Um mehr über CSS zu erfahren, besuchen Sie unsere CSS Tutorial.


HTML Link-Tags

Tag Beschreibung
<a>Definiert einen Hyperlink

Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML Tag-Referenz.


HTML Übungen

Testen Sie sich mit Übungen

Übung:

Verwenden Sie CSS, um die Unterstreichung aus dem Link zu entfernen.

<a href="html_images.asp" style="">HTML Images</a>