首先我们先来看一下链接的默认样式：有下划线、蓝色，点击访问之后变为暗红色，激活状态下四周有虚线

<a href=http://domety.com>点击访问domety主页</a>

效果

点击访问domety主页

那么如何改变这种样式，让我们的链接个性化呢？我们可以结合CSS技术，发挥你的想象，展现你的个性链接样式。

四个伪类

要达到个性化效果，用到的主要是CSS的四个伪类

  • a:link —— 未点击之前的样式
  • a:visited —— 访问之后的样式
  • a:hover —— 鼠标经过时的样式
  • a:active —— 激活时的样式

使用的过程中，一定要按照这个顺序，不然不起效果，既LoVe:HAte(注意大写字母)。

下面是些比较常用的技巧，你可以根据这些示例举一反三，制作出更多效果。本文的示例源文件可以通过文章后面的下载链接下载

自定义链接颜色

我们来实现这样一个效果：鼠标经过、激活以及访问之后都有不同的颜色，这个颜色你可以根据网站的配色方案定义。

比如CSS样式为

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover，a:active{color:#2AFF2A}

 

自定义链接下划线

下面我们在上面例子的基础上添加这样一个效果：链接默认没有下划线，当鼠标经过以及激活的时候下划线出现。text-decoration可以定义有无下划线，CSS如下：

a{text-decoration:none}

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover,a:active{color:#2AFF2A;text-decoration:underline}

 

我们还可以通过定义border样式来模拟下划线的效果，比如默认下划是虚线，当鼠标经过以及激活的时候变为实线，CSS如下：

a{text-decoration:none;border-bottom:1px dotted}

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover,a:active{color:#2AFF2A;border-bottom-style:solid}

 

动态下划线

我们可以通过设定背景为一张动态的gif图片来实现动态下划线的效果。首先制作两张gif图片，一张用作默认不动的下划线(underline.gif)，另一张用作鼠标经过时的动态gif(underline_over.gif)，CSS如下：

a{text-decoration:none;background:url("images/underline.gif") repeat-x left bottom;}

a:link{color:#FF7F00;}

a:visited{color:#1F9554}

a:hover,a:active{color:#2AFF2A;background:url("images/underline_over.gif") repeat-x left bottom}

 

模拟按钮效果

为链接添加背景色或背景图片，可以实现按钮效果。下面是一个背景色模拟的按钮效果，当时鼠标经过时按钮颜色改变，CSS如下：

a{

display:block;

width:90px;

padding:2px;

text-decoration:none;

background-color:#94B8E9;

border:1px solid black;

color:#000;

}

a:hover,a:active{

color:#fff;

background-color:#369

}

 

另外一种方法是通过设置背景图片来实现这一效果。比如我们做三张按钮图片，分别作为默认（button.png）、鼠标经过（button-over.png）以及激活时（button-active.png）的状态，可以定义如下CSS样式来实现这一效果：

a{

display:block;

width:203px;

height:72px;

text-indent:-1000px;

background:url("images/button.png") no-repeat top left;

overflow:hidden

}

a:hover{

background:url("images/button-over.png") no-repeat top left

}

a:active{

background:url("images/button-active.png") no-repeat top left

}

这种方法有一个小缺点，可能在网页第一次加载的时候，当鼠标经过时需要切换图片，所以需要加载另一张图片，这时候由于网速原因，会感觉有一点的停顿。

解决这一问题的办法是把几张图片做在一张图片里，通过改变背景图片的位置来实现上面的效果，比如我们把上面三张图片并列排在一张图片里(bottons.png)，定义如下的CSS可以达到同样的效果，而且会更流畅：

        a{

         display:block;

         width:203px;

         height:72px;

         text-indent:-1000px;

         background:url("images/buttons.png") no-repeat -203px 0;

         overflow:hidden

         }

         a:hover{

         background-position:top right

         }

         a:active{

         background-position:top left

         }

这种方法的好处是，在网页加载的时候已经把图片加载到本地，当鼠标经过的时候直接改变图片的位置，不需要重新加载图片。

上例中text-indent和overflow:hidden的作用是隐藏链接文字，因为我们已经在背景图片里把文字已经做出来，这里就不再需要再显示文字了。

 

下载本文的示例文件：   Xun6下载        趣盘下载