文章目录
- CSS 链接
- 链接样式
- 常见的链接样式
- 文本修饰
- 背景颜色
- 案例
- 1，添加不同样式的超链接
- 2，高级 - 创建链接框
CSS 链接
CSS可以用来设置链接的样式，包括未访问的链接（a:link）、已访问的链接（a:visited）、鼠标悬停在链接上时（a:hover）和链接被点击时（a:active）这四种状态。
以下是一个例子：
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}
这段代码设置了链接的四种状态的样式，可以根据需求改变颜色值。链接颜色从正常未被访问的红色变为已被访问的绿色，当鼠标悬停在链接上时变为hotpink，最后在链接被点击时变为蓝色。
需要注意的是，这四种状态的样式设置顺序是有规定的，a:active必须在a:hover之后，而a:hover又必须在a:link和a:visited之后。这样才能保证当鼠标点击链接时，显示的样式是最后定义的样式。
链接样式
在CSS中，可以通过伪类选择器来设置链接的样式，包括未访问的链接（a:link）、已访问的链接（a:visited）、鼠标悬停在链接上时（a:hover）和链接被点击时（a:active）这四种状态。
以下是一个例子：
/* 未被访问的链接 */
a:link {
color: #0080ff; /* 蓝色 */
}
/* 已被访问的链接 */
a:visited {
color: #804000; /* 棕色 */
}
/* 将鼠标悬停在链接上 */
a:hover {
color: #ff0000; /* 红色 */
}
/* 被选择的链接 */
a:active {
color: #00ff00; /* 绿色 */
}
在这个例子中，四种状态的样式都被设置了，具体效果可以参考颜色代码对应的颜色。链接默认的颜色是蓝色，已被访问的链接是棕色，鼠标悬停时变为红色，被点击时变为绿色。
常见的链接样式
以下是一些常见的链接样式：
- 未被访问的链接：通常使用蓝色或黑色文本表示，当用户将鼠标悬停在链接上时，链接的颜色可能会变深或变亮，以提示用户该链接还未被访问过。
- 已被访问的链接：通常使用红色或橙色文本表示，以提示用户该链接已经被访问过。
- 鼠标悬停在链接上时：通常使用紫色的文本表示，以提示用户鼠标当前正悬停在链接上。
- 链接被点击时：通常会改变链接的颜色，以表明该链接已被用户点击或选择。
除了颜色上的变化，还可以通过CSS中的伪类选择器来定义链接在不同状态下的样式，包括字体、背景、边框等方面。
文本修饰
链接的文本修饰可以通过以下CSS伪类来实现：
a:link- 未访问的链接。可以设置文本颜色、下划线等。a:visited- 访问过的链接。可以设置文本颜色、下划线等。a:hover- 鼠标悬停在链接上。可以设置文本颜色、下划线、字体大小、背景颜色等。a:active- 点击链接时。可以设置文本颜色、下划线等。
例如，以下代码将未访问的链接文本颜色设置为红色，删除下划线；访问过的链接文本颜色设置为绿色，添加下划线；鼠标悬停在链接上时文本颜色设置为黄色，添加下划线；点击链接时文本颜色设置为蓝色，删除下划线。
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: underline;
}
a:hover {
color: yellow;
text-decoration: underline;
}
a:active {
color: blue;
text-decoration: none;
}
注意：以上代码中颜色值可以是英文、十六进制或RGB，
text-decoration包括none（无装饰）、underline（下划线）、overline（上划线）和line-through（删除线）。
背景颜色
链接的背景颜色可以使用CSS的伪类选择器来实现，具体的代码如下：
a:link, a:visited, a:hover, a:active {
background-color: #ffffff; /* 白色背景 */
}
a:active {
background-color: #f00; /* 红色背景 */
}
在这个例子中，链接在未访问、已访问、鼠标悬停和点击时的背景颜色都是白色，只有在点击链接时背景颜色才变为红色。需要注意的是，在设置背景颜色时要确保样式的格式和缩进不受影响，可以使用pre标签来包含代码。
案例
1，添加不同样式的超链接
例如，以下代码将未访问的链接文本颜色设置为红色，访问过的链接文本颜色设置为绿色，鼠标悬停在链接上时文本颜色设置为黄色，点击链接时文本颜色设置为蓝色：
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active {
color: blue;
}
此外，可以使用CSS中的其他属性来设置链接的字体、背景、边框等，例如：
a:link {
font-weight: bold; /* 加粗字体 */
background-color: #f0f0f0; /* 灰色背景 */
}
a:visited {
font-style: italic; /* 斜体字体 */
border-bottom: 2px solid #000; /* 底部边框 */
}
a:hover {
text-decoration: underline; /* 下划线 */
cursor: pointer; /* 鼠标指针 */
}
a:active {
font-size: 14px; /* 字体大小 */
background-color: #fff; /* 白色背景 */
}
需要注意的是，以上代码中颜色值可以是英文、十六进制或RGB，text-decoration包括none（无装饰）、underline（下划线）、overline（上划线）和line-through（删除线）。
2，高级 - 创建链接框
若您想要创建一个链接框，您可以使用HTML和CSS来实现。下面是一个简单的示例代码，它创建了一个链接框，当用户点击链接时，会跳转到指定的网页。
<!DOCTYPE html>
<html>
<head>
<style>
.link-box {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
background-color: #f5f5f5;
text-decoration: none;
color: #333;
}
.link-box:hover {
background-color: #e5e5e5;
}
</style>
</head>
<body>
<a href="https://www.csdn.net" class="link-box">
点击这里访问示例网站
</a>
</body>
</html>
效果如下：
在上面的代码中，使用<a>元素创建了一个链接，并设置了href属性为要跳转的网页URL。然后，使用CSS样式来设置链接框的外观。.link-box类定义了链接框的样式，包括边框、背景颜色和文字样式。.link-box:hover类定义了鼠标悬停在链接框上时的样式，这里只是改变了背景颜色。
可以根据需要调整CSS样式，例如更改边框颜色、字体大小等。请确保将实际的网页URL替换为您想要跳转的网址。
