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>
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/154872.html原文链接：https://javaforall.cn