【图】CSS入门教程—

链接(a)

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

（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）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://cainiao8.com1/"菜鸟吧/a

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

div id="nvbar"a href="http://cainiao8.com1/"菜鸟吧/a/div

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

下面我们会介绍地二种方法，不过我个人还是推荐第一种方法，因此希望你能理解上面的例子，记住应用规则。3.只改变局部的链接样式。(方法二)

这种方法选自www.w3schools.com，请先仔细看这里的实例和源代码。

这种写法虽然也实现了为页面内的链接定义多种外观，不过你可以看到，当你准备在你的页面中实践的时候，你首先需要找到你想添加各种样式的链接，然后为每一个链接都加上一个class=...(不同的class)，即使对于使用Dreamweaver的开发者这也是一项比较麻烦的工作，更不用说喜欢手写代码的同志了。而且日后当你希望做修改的时候你会发现工作量也是很大的。这也正是我个人不推荐这种写法的原因。当然了，这种方法在你只想为一个或者个别几个链接添加样式的时候还是相当好用的。

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