定义超链接样式-CSDN博客

本文链接：https://blog.csdn.net/qq_41807399/article/details/138427191

本文详细介绍了如何在HTML中使用CSS定义超链接的不同状态样式，包括默认样式、访问过后的样式、鼠标悬停和激活状态。还探讨了下划线、立体效果、动态尺寸变化以及图像交换和自定义鼠标光标的实现方法。

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

定义链接样式

:link：定义超链接的默认样式
:visited：定义超链接被访问过之后的样式
:hover：定义鼠标经过超链接时的样式
:active：定义超链接被激活时的样式，如鼠标单击之后，到鼠标松开之间这段世间的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link{
				color: #FF0000;
			}
			a:visited{
				color: #0036f0; 
			}
			a:hover{
				color: #00ff0f;
			}
			a:active{
				color: #Fbff00;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com/">百度一下</a>
	</body>
</html>

:link元素只有在标签首次出现时才显示，浏览器历史记录清除后再打开使用可以看到效果

定义下划线样式

完全清除下划线效果使用text-decoration:none;
下划线的样式不仅仅是一条实线，他需要进行自定义设置。好的设计思路不仅美观还能达到提示的作用。主要有两种方法：
1.利用a标签的底部边框设置下划线样式
2.利用背景图像实现下划线样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
				color: #000;
				border-bottom: 1px dashed  #f00;
			}
			a:hover{
				border-bottom:1px dashed #000;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com/">百度一下</a>
	</body>
</html>

定义立体样式

借助边框样式的变化来模拟凹凸变化的立体效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
				color: #000;
				border: 1px solid;
				padding: 0.4em 0.8em;
				color: #444;
				background: #f99;
				border-color: #fff #aaab9c #aaab9c #fff;
			}
			a:hover{
				color: #800000;
				background: transparent;
				border-color: #aaab9c #fff  #fff #aaab9c;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com/">百度一下</a>
	</body>
</html>

定义立体边框的方法：
1.利用边框线的颜色制造视觉错觉，例如将顶部与左边边框合并，将底部与右边边框合并，利用明暗关系变化搭配来设计立变化效果
2.利用超链接背景色的变化制造凹凸变化效果，超链接背景色可以比较深，移过时，再定义浅色背景
3.利用前景色字体颜色红土立体变化的过程

定义动态样式

动态样式借助大小和位置产生一种动态感。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				color: #fff;
				height: 80px;
				line-height: 80px;
				padding-left: 1em;
			}
			a{
				text-decoration: none;
				float: right;
				margin-right: 4px;
				background:#0ffff0;
				color: #00cc66;
				width: 100px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
			a:hover{
				height: 60px;
				line-height: 60px;
				color: #0000ff;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<a href="https://www.baidu.com/">百度一下</a>
	</body>
</html>

定义图像交换样式

利用相同大小但不同效果的背景图像进行轮换，模拟复杂的鼠标动态效果。主要在于设计背景图像，利用效果不同的背景图像，使超链接可以模拟各种我们想要的效果。

定义鼠标样式

默认情况下鼠标经过超链接会变成手型。可以使用cursor属性改变这种默认效果。他的值有：
auto：基于上下文决定使用什么光标
crosshair：十字线光标
default：某平台默认光标，长渲染为一个箭头
pointer：指针光标，表示一个超链接
move：十字箭头光标，用于标示对象可被移动
e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize:表示正在移动的某个边
text：可以选择文本，通常为I型光标
wait：表示程序正忙，需客户等待，通常渲染为沙漏
help：光标下的对象包含帮助内容，通常将渲染为一个个问号
URL:自定义光标类型的图标路径
自定义光标，使用绝对相对路径指定光标文件（后缀为.cur或.ani）