CSS链接的四种状态:
- a:link 普通的、未被访问的链接
- a:visited 已访问的链接
- a:hover 鼠标指针位于链接的上方
- a:active 链接被点击的时刻
常见的链接样式
text-decoration属性大多用于去掉链接中的下划线。
属性值:
值 | 描述 |
none | 默认 |
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
blink | 闪烁的文本 |
inherit | 从父元素继承text-decoration的值 |
背景颜色
background-color定义链接的背景颜色。
根据上述知识点的综合实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
text-decoration: none;
}
a:hover{
background-color: aquamarine;
text-decoration: underline;
}
a:active{
background-color: burlywood;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>