CSS 链接
# CSS 链接
CSS 允许我们自定义和样式化 HTML 中的链接，使得它们在不同状态下呈现不同的效果。这些状态包括正常状态、访问过的状态、悬停状态以及点击状态。下面是关于如何使用 CSS 来样式化链接的详细指南。
# 1. 链接样式
链接的样式可以使用任何 CSS 属性（如颜色、字体、背景等）。特别的链接可以有不同的样式，具体取决于它们的状态。以下是四种链接状态：
a:link- 正常，未访问过的链接a:visited- 用户已访问过的链接a:hover- 当用户鼠标放在链接上时a:active- 链接被点击的那一刻
# 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color: #000000;} /* 未访问链接 */
a:visited {color: #00FF00;} /* 已访问链接 */
a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */
a:active {color: #0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后定义才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后定义。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
当设置若干链接状态的样式时，必须遵循以下顺序规则：
a:hover必须跟在a:link和a:visited之后。a:active必须跟在a:hover之后。
# 2. 文本修饰
text-decoration 属性主要用于删除链接中的下划线或为链接添加其他文本装饰。
# 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {text-decoration: none;} /* 未访问链接 */
a:visited {text-decoration: none;} /* 已访问链接 */
a:hover {text-decoration: underline;} /* 鼠标移动到链接上 */
a:active {text-decoration: underline;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后定义才有效。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后定义才有效。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 3. 背景颜色
background-color 属性指定链接的背景色，使链接在不同状态下显示不同的背景颜色。
# 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {background-color: #B2FF99;} /* 未访问链接 */
a:visited {background-color: #FFFF85;} /* 已访问链接 */
a:hover {background-color: #FF704D;} /* 鼠标移动到链接上 */
a:active {background-color: #FF704D;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后定义才有效。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后定义才有效。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 4. 自定义链接样式的其他属性
除了颜色和文本装饰外，还可以为链接添加其他样式属性，如字体大小、字体样式、边框等，以实现更多样化的链接效果。
# 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color: #000; text-decoration: none; font-size: 16px;} /* 未访问链接 */
a:visited {color: #060; text-decoration: none; font-style: italic;} /* 已访问链接 */
a:hover {color: #F00; text-decoration: underline; border-bottom: 2px solid #F00;} /* 鼠标移动到链接上 */
a:active {color: #00F; text-decoration: underline; background-color: #FF0;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后定义才有效。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后定义才有效。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
通过灵活运用这些 CSS 属性，您可以创建视觉上更吸引人和交互性更强的链接，提高用户体验。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08