Wie kann man die Linkfarbe mit CSS ändern

Mithilfe von CSS-Eigenschaften können Sie Links auf unterschiedliche Weise gestalten. Häufig verwendete Eigenschaften für Stylien von Links sind color, font-family und background-color.

Es gibt 2 Möglichkeiten, die Farbe eines Links zu ändern: inline und externe.

Inline Methode

Fügen Sie das Attribut style direkt in den Hyperlinkcode hinzu und fügen Sie die Eigenschaft color ins Attribut style ein, dann geben Sie color value ein.

Beispiel

<!DOCTYPE html>
<html>
  <body>
    <p>Besuchen Sie unsere <a href="https://de.w3docs.com/" style="color: #8ebf42">Webseite</a>.</p>
  </body>
</html>

Externe Methode

Mithilfe eines externen Stylesheets können Sie die Kontrolle über alle Hyperlinks auf Ihrer Website übernehmen. Mit externen Stylesheets können viele attraktive Hyperlink-Effekte gemacht werden, um das Aussehen Ihrer Website zu entwickeln.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Besuchen Sie unsere <a href="https://de.w3docs.com/">Webseite</a>.</p>
  </body>
</html>

Darüber hinaus gibt es vier Link-Zustände, in denen Links je nach Zustand gestaltet werden können:

  • a:link - ein normaler, unbesuchter Link
  • a:visited - ein besuchter Link
  • a:hover - ein Link, wenn der Benutzer die Maus darüber bewegt
  • a:active - in dem Moment, in dem ein Link angeklickt wird

Wenn Sie den Stil für mehrere Verbindungszustände festlegen, befolgen Sie diese Reihenfolgeregeln:

  • a:hover MUSS nach a:link und a:visited kommen
  • a:active MUSS nach a:hover kommen

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* unvisited link */
      a:link {
      color: #ccc;
      }
      /* visited link */
      a:visited {
      color: #095484;
      }
      /* mouse over link */
      a:hover {
      color: #8ebf42;
      }
      /* selected link */
      a:active {
      color: #800000;
      }
    </style>
  </head>
  <body>
    <p>Besuchen Sie unsere <a href="https://de.w3docs.com/">Webseite</a>.</p>
  </body>
</html>

Um die Unterstrichfarbe zu ändern, müssen Sie die Farbe zunächst mit der Eigenschaft text-decoration entfernen und den Wert none einstellen, dann fügen Sie die Eigenschaft border-bottom mit width (in diesem Fall verwendet als Hyperlink Unterstrichbreite), border-style (solid, dotted, oder dashed) hinzu und für die Anker-Textfarbe verwenden Sie die Eigenschaft color (zur Definition des Farbcodes).

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
      text-decoration: none;
      }
      a:link {
      color: #000;
      border-bottom: 1px solid #ff0000;
      }
      a:visited {
      color: #e600e6;
      border-bottom: 1px solid #b3b3b3;
      }
      a:hover {
      color: #2d8653;
      border-bottom: 1px solid #000099;
      }
    </style>
  </head>
  <body>
    <p>Besuchen Sie unsere <a href="https://de.w3docs.com/">Webseite</a>.</p>
  </body>
</html>

Für ein komplettes Bild betrachten wir ein Beispiel mit allen erwähnten Möglichkeiten:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      a.one:link { 
      color: #ccc;
      }
      a.one:visited { 
      color: #095484;
      }
      a.one:hover { 
      color: #8ebf42;
      }
      a.two:link {
      color: #ccc;
      }
      a.two:visited {
      color: #095484;
      }
      a.two:hover {
      font-size: 150%;
      }
      a.three:link {
      color: #ccc;
      }
      a.three:visited {
      color: #095484;
      }
      a.three:hover {
      background: #8ebf42;
      }
      a.four:link {
      color: #ccc;
      }
      a.four:visited {
      color: #095484;
      }
      a.four:hover {
      font-family: monospace;
      }
      a.five:link {
      color: #095484;
      text-decoration: none;
      }
      a.five:visited {
      color: #095484; text-decoration: none; 
      }
      a.five:hover {
      text-decoration: overline underline; 
      }
    </style>
  </head>
  <body>
    <p>Bewegen Sie die Maus über die Links und beobachten Sie, wie sie geändert werden:</p>
    <p><b><a class="one" href="#">Dieser Link ändert die Farbe</a></b></p>
    <p><b><a class="two" href="#">Dieser Link ändert die Schriftgröße</a></b></p>
    <p><b><a class="three" href="#">Dieser Link ändert die Hintergrundfarbe</a></b></p>
    <p><b><a class="four" href="#">Dieser Link ändert die Schriftart</a></b></p>
    <p><b><a class="five" href="#">Dieser Link ändert die Textgestaltung</a></b></p>
  </body>
</html>

Erfahren Sie mehr über CSS-Links.