Heim > Artikel > Web-Frontend > Wie ändere ich die Linkfarbe in CSS?

Wie ändere ich die Linkfarbe in CSS?

WBOYnach vorne: 2023-09-10 08:17:04734Durchsuche

Links verweisen auf HTML-Ankerelemente, dargestellt durch das -Tag. Dieses Element wird zum Erstellen von Hyperlinks verwendet, die es Benutzern ermöglichen, zwischen Webseiten und anderen Ressourcen zu navigieren.

CSS (Cascading Style Sheets) ist eine leistungsstarke Sprache zur Steuerung der visuellen Darstellung von Webseiten. Eines der wichtigsten Dinge, die wir mit CSS tun können, ist das Ändern der Farbe von Links auf der Webseite verschiedene Möglichkeiten, die Farbe von Links in CSS zu ändern

Mithilfe des „a“-Selektors

Dies ist die grundlegende Möglichkeit, die Farbe von Links in CSS zu ändern. Die Farbeigenschaft wird verwendet, um die Farbe des Links zu ändern

a{
   color:blue;
}

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Hier ist ein Beispiel zum Ändern der Linkfarbe mithilfe des „a“-Selektors in CSS

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a{
         color:blue;
      }
   </style>
</head>
<body>
   <h2>Change the link color in CSS</h2>
   <a href = "https://www.tutorialspoint.com/">  link to tutorialspoint </a>
</body>
</html>

Durch die Verwendung der Selektoren „id“ und „class“

Wenn wir die Farbe eines bestimmten Links ändern möchten, können wir den Klassenselektor oder den ID-Selektor verwenden. Wenn wir beispielsweise für einige Links eine Klasse namens „special-link“ haben, verwenden wir den folgenden Code, um die Farbe dieser Links zu ändern −

.special-link{
   color:blue; (By using class seletor)
}
#special-link{
   color:blue; (By using id seletor)
}

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Hier ist ein Beispiel für die Änderung der Farbe eines Links in CSS mithilfe der Selektoren „ID“ und „Klasse“.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      #special-link {
         color: red;
      }
      .special-link {
         color: green;
      }
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with ID Selector in CSS </a>
   <p></p>
   <a class="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with CLASS Selector in CSS </a>
</body>
</html>

Durch die Verwendung der Pseudoklasse „:hover“

Um die Farbe eines Links zu ändern, wenn man mit der Maus darüber fährt, verwenden wir zum Beispiel die Pseudoklasse „:hover“

a:hover {
   color: red;
}

Dieses CSS ändert die Farbe des Links in Rot, wenn die Maus darüber bewegt wird.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Dies ist ein Beispiel für die Verwendung der Pseudoklasse „.hover“ in CSS, um die Farbe eines Links zu ändern.

<html>
<head>
   <title>Change link color in CSS</title>
   <style>
      body{
         text-align:center;
      }
      a {
         color: blue;
      }
      a:hover {
         color: red;
      } 
   </style>
</head>
<body>
   <h2>Change link color in CSS</h2>
   <a id="special-link" href = "https://www.tutorialspoint.com/"> Change the link color with Mouse-hover in CSS </a>
</body>
</html>

Fazit

Das Ändern der Farbe eines Links in CSS ist eine einfache und effektive Möglichkeit, die Optik Ihrer Website zu verbessern. Mithilfe von Selektoren, Pseudoklassen und Attributen können wir auf bestimmte Links oder Linkzustände abzielen und deren Farbe entsprechend dem Design ändern.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Linkfarbe in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html for using class Property this 选择器伪类

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich CSS3-Eigenschaften, um ein mehrspaltiges Layout von Webseiten zu implementieren?Nächster Artikel：Wie verwende ich CSS3-Eigenschaften, um ein mehrspaltiges Layout von Webseiten zu implementieren?

In Verbindung stehende Artikel

Mehr sehen