Wie ändere ich die Linkfarbe in CSS?-CSS-Tutorial-php.cn

Wie ändere ich die Linkfarbe in CSS?

WBOY

Freigeben： 2023-09-10 08:17:04

nach vorne

756 Leute haben es durchsucht

Wie ändere ich die Linkfarbe in CSS?

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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)
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!