在网页开发中，超链接是承载页面跳转、资源访问功能的核心元素，默认的蓝色带下划线样式通常不符合设计需求，通过css可以灵活自定义超链接的各类样式，适配不同的页面风格。
超链接的基础样式设置
超链接在html中通过<a>标签实现，我们可以直接对<a>标签设置基础css样式，改变所有超链接的默认表现。常见的可设置属性包括颜色、字体、下划线、背景等。
下面是一个基础样式设置的示例，将所有超链接的文字颜色改为深灰色，去掉默认下划线，设置字体大小：
/* 基础超链接样式设置 */
a {
color: #333333; /* 文字颜色为深灰色 */
text-decoration: none; /* 去掉默认下划线 */
font-size: 16px; /* 字体大小16px */
font-family: "Microsoft YaHei", sans-serif; /* 设置字体 */
}
使用伪类选择器设置不同状态的样式
超链接有四种常见的交互状态，分别对应不同的伪类选择器，我们可以针对不同状态设置差异化样式，提升用户交互体验：
:link：超链接的默认状态，还未被访问过:visited：超链接已被访问过的状态:hover：鼠标悬停在超链接上的状态:active：超链接被点击瞬间的状态
需要注意伪类选择器的书写顺序，建议按照:link、:visited、:hover、:active的顺序排列，避免样式被覆盖。下面是完整的状态样式示例：
/* 未访问过的超链接样式 */
a:link {
color: #1e80ff; /* 蓝色 */
text-decoration: none;
}
/* 已访问过的超链接样式 */
a:visited {
color: #8c8c8c; /* 灰色 */
}
/* 鼠标悬停时的样式 */
a:hover {
color: #ff4d4f; /* 红色 */
text-decoration: underline; /* 添加下划线 */
cursor: pointer; /* 鼠标变为手型 */
}
/* 点击瞬间的样式 */
a:active {
color: #cf1322; /* 深红色 */
transform: scale(0.98); /* 轻微缩小效果 */
}
常见超链接样式调整场景
1. 去掉或添加下划线
通过text-decoration属性可以控制下划线的显示，none为去掉，underline为添加，还可以设置line-through实现删除线效果。
/* 去掉所有超链接下划线 */
a {
text-decoration: none;
}
/* 鼠标悬停时添加下划线 */
a:hover {
text-decoration: underline;
}
2. 设置背景和边框样式
可以给超链接添加背景色、圆角、边框等样式，让超链接更像按钮，适合导航栏或者操作类链接的场景。
/* 按钮样式超链接 */
a.btn {
display: inline-block;
padding: 8px 20px;
background-color: #1e80ff;
color: #ffffff;
border-radius: 4px;
border: none;
text-decoration: none;
font-size: 14px;
}
/* 悬停时加深背景色 */
a.btn:hover {
background-color: #0d6efd;
}
3. 控制超链接的显示范围
默认<a>标签是行内元素，只能包裹文字或者行内内容，如果需要让超链接可以包裹块级元素，或者调整点击范围，可以设置display属性为block或者inline-block。
/* 块级超链接，占满父容器宽度 */
a.block-link {
display: block;
width: 100%;
padding: 15px;
background-color: #f5f5f5;
text-align: center;
color: #333333;
text-decoration: none;
}
a.block-link:hover {
background-color: #e8e8e8;
}
完整示例代码
下面是一个完整的html和css结合示例，展示不同样式的超链接效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接样式示例</title>
<style>
/* 基础样式 */
a {
font-size: 16px;
}
/* 状态样式 */
a:link { color: #1e80ff; text-decoration: none; }
a:visited { color: #8c8c8c; }
a:hover { color: #ff4d4f; text-decoration: underline; }
a:active { color: #cf1322; }
/* 按钮样式 */
.btn-link {
display: inline-block;
padding: 8px 20px;
background-color: #1e80ff;
color: #ffffff !important;
border-radius: 4px;
margin-top: 20px;
}
.btn-link:hover {
background-color: #0d6efd;
text-decoration: none;
}
</style>
</head>
<body>
<p>普通超链接：<a href="https://ipipp.com">访问示例网站</a></p>
<p>按钮样式超链接：<a href="https://ipipp.com" class="btn-link">点击跳转</a></p>
</body>
</html>