CSS 链接

最新推荐文章于 2023-09-19 08:12:28 发布

冷月醉雪

最新推荐文章于 2023-09-19 08:12:28 发布

阅读量176

点赞数

分类专栏： CSS 文章标签： CSS 链接

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80349038

版权

CSS 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

链接样式

链接的样式可以用任何CSS属性(如颜色，字体，背景等)

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

·a:link -- 正常，未访问过的链接

·a:visited--用户已经访问过的链接

·a:hover---当用户鼠标放在链接上时

·a:active--链接被点击的那一刻

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.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="http://www.baidu.com" 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>

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a:link {color:#000000;text-decoration:none;}
		a:visited {color:#00FF00;text-decoration:none;}
		a:hover {color:#FF00FF;text-decoration:underline;}
		a:active {color:#0000FF;text-decoration:underline;}
	</style>
</head>  
<body >  
	<p><b><a href="http://www.baidu.com" 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>

背景颜色

背景颜色属性指定链接背景色：

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.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="http://www.baidu.com" 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>

实例

添加不同样式的超链接

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a.one:link {color:#ff0000;}
		a.one:visited {color:#0000ff;}
		a.one:hover {color:#ffcc00;}

		a.two:link {color:#ff0000;}
		a.two:visited {color:#0000ff;}
		a.two:hover {font-size:150%;}

		a.three:link {color:#ff0000;}
		a.three:visited {color:#0000ff;}
		a.three:hover {background:#66ff66;}

		a.four:link {color:#ff0000;}
		a.four:visited {color:#0000ff;}
		a.four:hover {font-family:Georgia, serif;}

		a.five:link {color:#ff0000;text-decoration:none;}
		a.five:visited {color:#0000ff;text-decoration:none;}
		a.five:hover {text-decoration:underline;}
	</style>
</head>  
<body >  
	<p>将鼠标移至链接上改变样式.</p>
	
	<p><b><a class="one" href="http://www.baidu.com" target="_blank">这个链接改变颜色</a></b></p>
	<p><b><a class="two" href="http://www.baidu.com" target="_blank">这个链接改变字体大小</a></b></p>
	<p><b><a class="three" href="http://www.baidu.com" target="_blank">这个链接改变背景颜色</a></b></p>
	<p><b><a class="four" href="http://www.baidu.com" target="_blank">这个链接改变字体类型</a></b></p>
	<p><b><a class="five" href="http://www.baidu.com" target="_blank">这个链接改变文字修饰</a></b></p>
</body>  
</html>

高级--创建链接框

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
	<style>
		a:link, a:visited
		{
			display:block;
			font-weight:bold;
			color:#FFFFFF;
			background-color:#98bf21;
			width:120px;
			text-align:center;
			padding:4px;
			text-decoration:none;
		}
	</style>
</head>  
<body > 
	<p><b><a  href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
</body>  
</html>

参考:

https://www.yuque.com/docs/share/5c0866ba-22da-49bb-a977-0f31c14ac2bf