CSS的超链接样式设计

CSS的超链接样式设计

全栈程序员-站长 • 2022年7月4日上午10:16 • 未分类 • 阅读 25

大家好，又见面了，我是你们的朋友全栈君。

超链接是网页中最常用的对象，每个网页通过超链接相互联系在一起，从而构成一个完整的网站。而根据路径的不同，超链接可以分为以下三类：

内部链接：

内部链接所链接的目标一般位于同一个网站中，对于内部链接来说，可以使用相对路径和绝对路径。所谓的相对路径就是URL中没有指定超链接的协议和互联网的位置，仅指定相对位置关系，
CSS的超链接样式设计
例如上图中的menu.hrml和login.html在同一目录下，使用即可使用。

锚点链接：

锚点链接是一个特殊的链接方式，实际上它是在内部链接或外部链接的基础上增加锚点标记后缀。
例如http://www.mysite.cn/web2_nav/index.html#anchor 表示跳转到index页面的标记为anchor的锚点处。

外部链接：

外部链接的目标一般为外部网站目标，当然也可以是网站内部目标，当然，外部链接一般都要指定链接说使用的完整地址和协议。例http://www.mysite.cn/web2_nav/index.html。其中http为协议，www.mysite.cn为具体位置，web2_nav/index.html为目标基于站点的相对位置。

为超链接设计样式：

超链接的状态有：

（1）a:link -普通的、未被访问的链接
（2）a:visited -用户已访问的链接
（3）a:hover -鼠标指针位于链接的上方
（4）a:active -链接被鼠标点击时

例如：

<style type="text/css">
		a:link{color: aqua;}
		a:visited{color: aquamarine;}
		a:hover{color: #29962A;}
		a:active{color: burlywood;}
	</style>

<ul class="p1">
		<li><a href="#" class="a1">首页</a></li>
		<li><a href="#" class="a2">微博</a></li>
		<li><a href="#" class="a3">知乎</a></li>
		<li><a href="#" class="a4">QQ</a></li>
	</ul>
	<ul class="p2">
		<li><a href="#" class="a1">其他</a></li>
		<li><a href="#" class="a2">帮助</a></li>
		<li><a href="#" class="a3">友情链接</a></li>
	</ul>

效果：
CSS的超链接样式设计
需要注意的是，当为超链接设计样式时，必须按照以下规则：

1.a:hover必须位于a:link和a:visited之后。
2.a:active必须位于a:hover之后。

除此之外，我们还可以装饰超链接的下划线和背景色：
background-color 属性规定链接的背景色：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

实例：

<style>
a:link {text-decoration:none;}    /* 未被访问的链接 */
a:visited {text-decoration:none;} /* 已被访问的链接 */
a:hover {text-decoration:underline;}   /* 鼠标指针移动到链接上 */
a:active {text-decoration:underline;}  /* 正在被点击的链接 */
</style>

<body>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
</body>

效果：
CSS的超链接样式设计
background-color 属性规定链接的背景色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

<!DOCTYPE html>
<html>
<head>
<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="/index.html" target="_blank">W3School</a></b></p>
<p><b><a href="http://wwf.panda.org/" target="_blank">WWF</a></b></p>
</body>
</html>

CSS的超链接样式设计

实例：

<!DOCTYPE html>
<html>
<head>
<style>
a.1:link {color:#ff0000;}
a.1:visited {color:#0000ff;}
a.1:hover {color:#ffcc00;}

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

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

a.4:link {color:#ff0000;}
a.4:visited {color:#0000ff;}
a.4:hover {font-family:'微软雅黑';}

a.5:link {color:#ff0000;text-decoration:none;}
a.5:visited {color:#0000ff;text-decoration:none;}
a.5:hover {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a class="1" href="/index.html" target="_blank">这个链接会改变颜色</a></b></p>
<p><b><a class="2" href="/index.html" target="_blank">这个链接会改变字体尺寸</a></b></p>
<p><b><a class="3" href="/index.html" target="_blank">这个链接会改变背景色</a></b></p>
<p><b><a class="4" href="/index.html" target="_blank">这个链接会改变字体</a></b></p>
<p><b><a class="5" href="/index.html" target="_blank">这个链接会改变文本的装饰</a></b></p>
</body>
</html>

CSS的超链接样式设计