CSS链接颜色

使用一些五颜六色的链接很容易就会为您的网站增添不少趣味；在这一教程中，我们将为您展示如何使用Hex颜色代码和CSS颜色属性为您的锚标签加入一些必须的流行元素。不仅如此，我们还会为您说明如何使用CSS来改变悬停链接颜色。让我们开始吧！

CSS链接颜色使用HTML标签

针对CSS颜色而言，链接或是<a>标签作为常规文本的表现方式相同。这意味着要改变一个链接的颜色，你要做的只是在锚标签上使用CSS颜色属性，Hex颜色任您选择。在以下示例中我们使用红色。 

HTML

<head>
  <style>
    a { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a href="http://example.com/">A Red Link</a>
</body>
演示的CodePen

对于这个教程中的示例，我们使用一个Hex颜色代码，但是要记住还有许多其他可能的CSS颜色值；请参看我们的其他CSS指南，对样式表中颜色使用的各种不同方法会有概括了解。

CSS链接颜色使用ID

ID是使用CSS设计<a>标签的另一种方法。您之前可能见过，ID在CSS中以'#'符号为前缀，而且通常意味着在任何给定网页上只能使用一次。 

HTML

<head>
  <style>
    #link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a id="link" href="http://example.com/">A Red Link</a>
</body>
演示的CodePen

CSS链接颜色使用类（class）

另一方面，类的目的是为了在整个网页中重复使用，比ID更为常见。CSS类的前缀为一个'.'，而且多个类甚至可以附在同一个HTML元素上。这里我们使用一个类，同样使用红色Hex颜色代码。 

HTML

<head>
  <style>
    .link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a class="link" href="http://example.com/one">A Red Link</a>
  <a class="link" href="http://example.com/two">Another Red Link</a>
</body>
演示的CodePen

使用CSS改变链接悬停颜色

您可能已经注意到了，光标放在链接上时，链接颜色会有改变，这是一种流行的效果，使用CSS也很容易实现这种效果。为改变链接悬停效果，在链接的类上使用:hover伪属性并赋予一个不同的颜色。 

CSS

.link { color: #FF0000; } /* CSS link color (red) */
.link:hover { color: #00FF00; } /* CSS link hover (green) */
演示的CodePen

悬停属性同样可以用在ID和元素本身，像教程中较早演示过的那样。颜色只是使用:hover能够改变的众多属性之一，尝试使用下划线、边框颜色和背景色体验更多乐趣吧。