先创建一个链接:
<a href=" http://www.google.com" title="Visit the best search engine in the world">Google</a>
1、修改链接的颜色
- a:link{color:#F00;}
- a:visited{color:#999;}
- a:hover{color:#333;}
- a:active{color:#000;}
上面的这段css改变了链接各个状态的文本颜色,link这个伪类将控制所有未访问的链接状态;visited这个伪类则控制已经被访问过的链接状态;hover伪类则控制鼠标悬停在此链接上时的状态;最后就是active伪类了,这是在点击这个链接瞬间的链接状态;
注意:上面的css好像可以正常的工作了,不过这个css的四个伪类顺序不能改变哦,如果改变的话有一些链接的状态就不会正常的工作了。究其原因是继承在作怪,不过我们记住这个顺序就好了。
2、文本修饰
不管是什么状态,所有链接都具有和链接文本一样颜色的下划线。css可以通过样式将下划线容易去除,那我们就来看看吧。
- a.link{
- color:#f00;
- text-decoration:none;
- border-bottom:1px dashed #333;
- line-height:150%
- }
这个css做了什么呢?首先border-bottom:1px dashed #333;这个给链接加了一个边框;我们不认识的样式是text-decoration:none;
这个样式就应该是把下划线给变没了吧,bingo!答对了。
详细解释一下这个属性把,text-decoration有5个值,none、underline(默认值)、overline、line-through和blink。这些值大家可以自己去试一下,不过个人建议,考虑到链接的可用性和直观性,还是在这方面作很谨慎的修改。
3、用背景图像添加记号
- a.link{
- color:#F00;
- padding:0 15px 0 0;
- background:url(images/arrow.gif) no-repeat right center;
- }
- a.visited{
- color:#999;
- padding:0 15px 0 0;
- background:url(images/checkmark.gif) no-repeat right center;
- }
大家发挥想象,这是一个怎么样子的呢?我因为不知道怎么样才能在网页上表现出这个样式,所以大家在自己的机器上联系看看吧。
4、利用链接来转换导航栏
- ul a:link,ul a:visited,ul a:hover,ul a:active{
- display:block;
- padding:2px 10px;
- text-decoration:none;
- }
- ul a:hover{
- color:#F00;
- background:#FFF;
- }
这样的样式当鼠标留在链接上时,文本变成红色,而整个列表项的背景则变成白色。整个css结合第六篇的css。因为不知道伪类怎么样加到style中去,就看不到效果了。