CSS入门教程——链接(a)

链接(a)

对于很多追求页面美观的站长来说，默认的链接样式实在是太难以容忍了。而且它们也很难和网站的风格相吻合。不过有了CSS之后我们就不用担心了。下面就看看如何修改网页的链接样式。

1.改变整个页面的链接样式。

<style type="text/css">
 a:link {
   color: #FF0000;
   text-decoration: none;
   }
   a:visited {
   color: #333333;
   }
   a:hover {
   text-decoration: none;
   color: #FFFFFF;
   background-color:#0000FF;
   }
   a:active {
   text-decoration: none;
   color: #FFFFFF;
   }
 </style> 

就是上面的这段CSS代码改变了页面的链接样式。其中a:link、a:visited、a:hover和a:active分别对应未访问的链接、已经访问过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时候)。这段代码看起来很简单，但是一定要注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。下面再来看看如何只更改部分页面的链接样式。

2.只改变局部的链接样式。

就以菜鸟吧本身为例子吧。您也许已经注意到了，在菜鸟吧页面的导航部分(页面上方)的链接和教程部分的链接具有不同的样式。事实上是我们只为导航部分的链接定义了样式，而教程主体部分的链接则是正常的链接样式，不受定义影响。如何实现这种对局部链接的样式定义呢？其实这是很简单的。我们只要在链接样式的定义前面加上相应class或者id即可。例如本页面导航部分的id是navbar，那么定义的语句就应该是：

#nvbar a:link {
   color: #003366;
   text-decoration: none;
   }
   #nvbar a:visited {
   text-decoration: none;
   color: #000000;
   }
   #nvbar a:hover {
   color: #FFFFFF;
   background-color:#FF0000;
   }
   #nvbar a:active {
   text-decoration: none;
   }       

这样链接样式的定义就只对id为nvbar的内容起作用了。相应的，如果你希望这些链接的样式只对某个类起作用只要上面的#nvbar替换成该类即可。例如只对class为rightbox的内容起作用，那么就可以定义为：

.rightbox  a:link {
   color: #003366;
   text-decoration: none;
   } ……       

好了，你已经知道CSS部分的代码怎么写了，但是别以这就完事了，你还需要看看我们在网页中是如何应用它们的。假设我们现在有一个页面，它使用了上面的CSS代码。页面中有一个链接，它的代码如下：

<a id="nvbar" href="http:///">菜鸟吧</a>

如果你一直尝试着跟着本节教程，自己书写代码，那么预览结果一定会令你失望的，因为它的样式根本就没有改变。而如果将链接的代码改为：

<div id="nvbar"><a href="http:///">菜鸟吧</a></div>

这次CSS正常工作了。也就是说我们必须有一个id为“nvbar”的div或者是p之类的标签，然后包含在它里面的链接标签a的样式才会受到影响。为了更好的理解这种方法，我们再来看一个例子。

补充：本节的链接内容涉及在CSS官方，以及w3schools.com和其它的一些权威教程中被叫做pseudo-classes的概念。国内的高手们似乎习惯译做伪类。本教程主要是CSS入门，以实践中常用的CSS为主，并不会深入研究“伪类”这个术语的具体含义。如果你对术语的研究比较感兴趣可以查看pseudo-classes的详细信息。

进入下一节：总结与应用