freeCodeCamp/guide/chinese/css/styling-links/index.md

title	localeTitle
Styling Links	样式链接

样式链接

链接可以使用任何CSS属性设置样式，例如color ， font-family ， font-size和padding 。 这是一个简单的例子：

a { 
    color: hotpink; 
 } 

此外，链接的样式可以根据它们所处的状态而有所不同。

链接也有4个状态，许多程序员对每个状态的设置方式不同。 这四个州是：

• a:link ：未访问的，未被忽略的链接
• a:visited ：已访问，已点击的链接
• a:hover ：当用户的鼠标悬停在它上面时的链接
• a:active ：单击时的链接

<a href="">属性负责创建URL，并且可以使用许多CSS样式属性进行修改，但默认情况下它有一些：

1. 强调
2. 蓝色

您可以通过添加更改color和text-decoration属性来更改这些。

   color: black; 
   text-decoration: none; 

您还可以使用这些属性（也称为链接状态）基于交互设置链接的样式：

• a：链接 - 正常的，未访问的链接
• a：已访问 - 用户访问过的链接
• a：悬停 - 当用户将鼠标悬停在其上时的链接
• a：active - 单击时的链接

以下是一些使用4种状态的示例CSS：

a:link { color: red; } 
 a:visited { color: blue; } 
 a:hover { color: green; } 
 a:active { color: blue; } 

请注意 ，在为链接状态设置样式时，有一些_排序规则_ 。

• a:hover必须在a:link和a:visited

• a:active必须在a:hover

  a：链接 - 正常的，未访问的链接 a：已访问 - 用户访问过的链接 a：悬停 - 当用户将鼠标悬停在其上时的链接 a：active - 单击时的链接

/* unvisited link */ 
 a:link { 
    color: red; 
 } 
 
 /* visited link */ 
 a:visited { 
    color: green; 
 } 
 
 /* mouse over link */ 
 a:hover { 
    color: hotpink; 
 } 
 
 /* selected link */ 
 a:active { 
    color: blue; 
 }