网页超链接样式的CSS写法
作者：Davidszhou 来源:Davidszhou博客 时间:2014-05-13 22:50:02 点击：上一篇文章讲了母栏目后面两行子栏目的DIV布局，这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。
上图所示上上一篇文章的大概样式，颜色就不一一举例了，我现在现在是给了“男士”“女士”“养生”三个母栏目不同的颜色，为了好看一点，我想鼠标移动到“男士”后面的子栏目上面的颜色和“男士”的字体颜色一样，移到“女士”其后面的子栏目的超链接与“女士”的超链接颜色一样，“养生”同样的。
先来看看网页中定义超链接样式的代码：
a:link：超链接字体的颜色
a:hover：鼠标移动覆盖在超链接上面的颜色
a:active：当鼠标点击按下的时候颜色的一个变化
a:visited：超链接已经被访问后的文本颜色
在以上各个样式里面还可以定义，下划线（text-decoration），超链接背景（background）以及超链接字体大小（font-size）等；
先看全部的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body { padding:0px; margin:0px;}
#zongk { width:180px; height:30px; line-height:30px; margin:auto; text-align:center;}
#zongk a:link { color:#000; text-decoration:none; background:url(images/lja.png) no-repeat 0px 0px;}
#zongk a:hover { color:#ccc; text-decoration:underline; background:url(images/lja.png) no-repeat 0px -30px;}
#zongk a:active { color:#00F; text-decoration:none;}
#zongk a:visited { color:#0F0; text-decoration:none;}
</style>
<body>
<div id="zongk"><a href="http://www.zongk.com" target="_blank">Davids zhou 博客</a></div>
</body>
</html>
这里我只写了超链接的样式，我先写了一个层DIV，把这个层DIV居中话处理，给了他的宽width：180px; height：30px；居中：margin：auto；我需要将超链接在未被访问点击的时候是一个颜色，在鼠标移动覆盖到超链接上面是一个颜色，访问点击完成之后是一个颜色且在鼠标覆盖在超链接上时，是有下划线的。
#zongk { width:180px; height:30px; line-height:30px; margin:auto; text-align:center;}
这段说我将zongk这个层定义了宽180px，高30px，行高30px(文本在垂直方向上居中)，层居中显示且文本都是在水平方向居中；
#zongk a:link { color:#000; text-decoration:none; background:url(images/lja.png) no-repeat 0px 0px;}
层zongk下面的超链接在未被访问的时候颜色为#000；没有下划线，且背景图片是image下面的“lja.png”,X轴方向距离0px,Y轴方向举例为0px;
#zongk a:hover { color:#ccc; text-decoration:underline; background:url(images/lja.png) no-repeat 0px -30px;}
“zongk”里面超链接样式在鼠标覆盖时的样式，前面和上面一样只是颜色改变了，背景图片改变了同一张图片下面X轴距离不变，Y轴举例向下30PX像素距离。
#zongk a:active { color:#00F; text-decoration:none;}
#zongk a:visited { color:#0F0; text-decoration:none;}
这两个第一个定义了点击一瞬间的颜色，第二个定义了已经被访问的超链接的颜色，后面是定义了文本的下划线。
text-decoration定义下划线，background定义背景图片也可以定义背景颜色以及其他样式，background定义的其他样式在后面文章在说。这里background用到了两个切换图片放在了一张图片素材上的方式写法，具体使用方法看：http://www.zongk.com/zongk/2.html 这篇文章
总结，这篇文章主要是讲了在CSS样式中超链接的样式定义其中针对“:link”“a:hover”“a:active”“a:visited ”几个的不同作用与顺序不能弄混了。演示中的素材我就随便做了一下，以及颜色选取，您可以根绝您实际情况来定义颜色，与背景图片素材的制作可以依据您实际需要制作。
自己写的源码下载：
TAGS:超链接
来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/4.html转载请标注此链接
- 上一篇：导航样式 母栏目并列两行子栏目CSS写法
- 下一篇：帝国CMS采集教程
- 七日热点
- 热力推荐
- TAGS 列表
- 网站统计
- 文章总数：138
- 今天发布：0
- 软件资源数：20
- 友情连接：()
Davids zhou | 站点地图 | | | 皖ICP备14017762号 如有侵犯您权利点击上面QQ -Powered By 帝国CMS -davids.zhou#qq.com(#换@)
Davidszhou个人博客主要记录在网站建设、SEO优化、python开发、PHP开发中遇到问题记录保存，作为他人参考学习教程
