CSS之——伪类选择器设置超链接样式和创建按钮式超链接（学习笔记）

最新推荐文章于 2025-06-12 11:23:36 发布

原创最新推荐文章于 2025-06-12 11:23:36 发布 · 7k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #伪类选择器 #超链接 #按钮

HTML 同时被 2 个专栏收录

4 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文介绍如何使用CSS伪类为超链接设置不同的样式效果，包括普通、已访问、悬停及激活状态，并通过实例展示了按钮式超链接的设计方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用CSS伪类别来设置超链接样式

链接的四种状态：

a:link 普通的，未访问的链接

a:visited: 用户已访问的链接

a:hover 鼠标指针位于链接的上方

a:active: 链接被点击的时候

二、创建按钮式超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用CSS伪类来设置超链接样式</title>
<style type="text/css">
body {
	margin: 20px;
}
a {
	font-family:Arial;
	margin:5px;
}
a:link,a:visited{
	color: #A62020;
	padding: 4px 10px;
	background-color: #DDD;
	text-decoration: none;
	border-top: 1px solid #EEE;
	border-left:1px solid #EEE;
	border-bottom: 1px solid #717171;
	border-right:1px  solid #717171;
}
a:hover{
	color:#821818;
	padding: 5px 8px 3px 12px;
	border-top: 1px solid #717171;
	border-left: 1px solid #717171;
	border-bottom: 1px solid #EEE;
	border-right:1px solid #EEE;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">Java</a>
<a href="http://www.baidu.com">Php</a>
<a href="http://www.baidu.com">.Net</a>
</body>
</html>