返回顶部

CSS的超链接样式设计

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

内部链接:

内部链接所链接的目标一般位于同一个网站中,对于内部链接来说,可以使用相对路径和绝对路径。所谓的相对路径就是URL中没有指定超链接的协议和互联网的位置,仅指定相对位置关系,

例如上图中的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>

效果:

需要注意的是,当为超链接设计样式时,必须按照以下规则:

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>

效果:

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>

实例:

<!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>

posted @ 2020-01-15 15:31  violet-evergarden  阅读(1939)  评论(0编辑  收藏  举报