前端必知必会-css链接Links

---

CSS 链接Links

使用 CSS，链接可以采用多种不同的样式。

样式化链接

可以使用任何 CSS 属性（例如颜色、字体系列、背景等）来设置链接样式。

示例

a {
   
   
color: hotpink;
}

此外，链接可以根据其所处的状态采用不同的样式。

四种链接状态为：

• a:link - 普通、未访问的链接
• a:visited - 用户已访问的链接
• a:hover - 用户将鼠标悬停在链接上时的链接
• a:active - 单击链接时的链接

示例

/* 未访问的链接 */
a:link {
   
   
color: red;
}

/* 已访问的链接 */
a:visited {
   
   
color: green;
}

/* 鼠标悬停在链接上 */
a:hover {
   
   
color: hotpink;
}

/* 选定的链接 */
a:active {
   
   
color: blue;
}

在为多个链接状态设置样式时，有一些顺序规则：

a:hover 必须在 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

文本装饰text-decoration

text-decoration 属性主要用于从链接中删除下划线：

示例

a:link {
   
   
text-decoration: none;
}

a:visited {
   
   
text-decoration: none;
}

a:hover {
   
   
text-decoration: underline;
}

a:active {
   
   
text-decoration: underline;
}

背景颜色background-color

background-color 属性可用于指定链接的背景颜色：

示例

a:link {
   
   
background-color: yellow;
}

a:visited {
   
   
background-color: cyan;
}

a:hover {
   
   
background-color: lightgreen;
}

a:active {
   
   
background-color: hotpink;
}

链接Links按钮

示例

a:link, a:visited {
   
   
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center