不同的链接内容使用不同的链接样式，这是我们经常要用到的。
要做到这点，我们可分为以下两种方法实现：

一、定义多个CSS样式，链接文字时分别定义不同的Class

<style>
<!--
A.type1:link    {color:#FFDD00; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active  {color:#FFDD00; text-decoration:none;}
A.type1:hover   {color:#00FF80; text-decoration:underline;}

A.type2:link    {color:#FF0000; text-decoration:underline;}
A.type2:visited {color:#FF0000; text-decoration:underline;}
A.type2:active  {color:#FF0000; text-decoration:underline;}
A.type2:hover   {color:#ABCDEF; text-decoration:underline;}

A.type3:link    {color:#00CCFF; text-decoration:none;}
A.type3:visited {color:#00CCFF; text-decoration:none;}
A.type3:active  {color:#00CCFF; text-decoration:none;}
A.type3:hover   {color:#FF8000; text-decoration:overline underline;}

//-->
</style>

<center>
<a class="type1" href="a11.html">click</a><br>
<a class="type2" href="a13.html">click</a><br>
<a class="type3" href="a15.html">click</a><br>

<font size="2">
<a class="type3" href="a17.html">
click
</a>
</font>

 

二、利用CSS的继承性

.yourtype a:link {...}
.yourtype a:visited {...}
.yourtype a:hover {...}
.yourtype a:active {...}

然后在class为yourtype的区域下的所有链接都会自动采用以上设定的样式，

这就是css的继承方法，用在其他地方也一样，例如
.mytablestylle {...}
.mytablestyle td {...}
当指定了一个表格的class为mytablestyle的时候，它里头的td就自动套用第二行定义的样式

转载请保留本文链接地址:[http://www.oodd.net/post/24.html]