Css基础学习（七）—链接

 网页的发展就是从链接开始的，没有链接的网页只是孤立的，基本称不上是网页。通过css，链接可以变成一个非常美观且功能强大的对象。当然话说回来，虽然我们可以对链接进行很多控制，但是不能够为了追求美观和新奇而影响链接的基本功能。废话就不多说了，就开始链接对象css的学习吧。
先创建一个链接：
<a href="http://www.google.com" title="Visit the best search engine in the world">Google</a>
1、修改链接的颜色

1. a:link{color:#F00;}
2. a:visited{color:#999;}
3. a:hover{color:#333;}
4. a:active{color:#000;}

上面的这段css改变了链接各个状态的文本颜色，link这个伪类将控制所有未访问的链接状态；visited这个伪类则控制已经被访问过的链接状态；hover伪类则控制鼠标悬停在此链接上时的状态；最后就是active伪类了，这是在点击这个链接瞬间的链接状态；

注意：上面的css好像可以正常的工作了，不过这个css的四个伪类顺序不能改变哦，如果改变的话有一些链接的状态就不会正常的工作了。究其原因是继承在作怪，不过我们记住这个顺序就好了。

2、文本修饰

不管是什么状态，所有链接都具有和链接文本一样颜色的下划线。css可以通过样式将下划线容易去除，那我们就来看看吧。

1. a.link{
2. color:#f00;
3. text-decoration:none;
4. border-bottom:1px dashed #333;
5. line-height:150%
6. }

这个css做了什么呢？首先border-bottom:1px dashed #333;这个给链接加了一个边框；我们不认识的样式是text-decoration:none;
这个样式就应该是把下划线给变没了吧，bingo！答对了。

详细解释一下这个属性把，text-decoration有5个值，none、underline（默认值）、overline、line-through和blink。这些值大家可以自己去试一下，不过个人建议，考虑到链接的可用性和直观性，还是在这方面作很谨慎的修改。

3、用背景图像添加记号

1. a.link{
2. color:#F00;
3. padding:0 15px 0 0;
4. background:url(images/arrow.gif) no-repeat right center;
5. }
6. a.visited{
7. color:#999;
8. padding:0 15px 0 0;
9. background:url(images/checkmark.gif) no-repeat right center;
10. }

大家发挥想象，这是一个怎么样子的呢？我因为不知道怎么样才能在网页上表现出这个样式，所以大家在自己的机器上联系看看吧。

4、利用链接来转换导航栏

• Drinks Menu
• Beer
• Spirits
• Cola
• Lemonade
• Tea
• Coffee

1. ul a:link,ul a:visited,ul a:hover,ul a:active{
2. display:block;
3. padding:2px 10px;
4. text-decoration:none;
5. }
6. ul a:hover{
7. color:#F00;
8. background:#FFF;
9. }

这样的样式当鼠标留在链接上时，文本变成红色，而整个列表项的背景则变成白色。整个css结合第六篇的css。因为不知道伪类怎么样加到style中去，就看不到效果了。