CSS链接样式设置

CSS链接样式，我们知道当我们读一篇文章的时候，有的时候鼠标滑到什么一些文字，有的文字下面会有下

划线，或者是颜色发生变化，其实我们都知道这就是一个链接，出现下滑线和颜色发生变化，都是链接的时

候我们对链接样式的设置。以上我们简单的介绍了什么是样式，你可能会问，哇呜，什么是样式，怎样没有定义

其实我们没有定义更好，我们只需要是去理解。可是我还不理解。不急。请听我慢慢道来：

不同的链接可以有不同的样式，链接样式可用CSS任意的属性，比如颜色color，font，background等等。慢着

我们在常常见到一些链接当鼠标没放到上面的时候，没有下划线，当我无意将鼠标滑过的时候，出现了下划线，这是怎样回事，其实我们学习链接应该首先是看看链接的状态，鼠标滑到链接和离开链接是属于不同的状态。，链接有四种状态，分别是link表示没有访问过的链接，visited表示的是访问过的链接，hover表示鼠标滑过，active表示的是鼠标点击链接，我们可以对链接的不同状态进行设置，来达到我们对链接想要的效果，对于链接样式很多，花样很多，我们在这个地方简单的介绍一个样式来看一下:

颜色的设置:

      a:link{color: red;}
      a:visited{color: blue;}
      a:hover{color: black;}
      a:active{color: green;}

我们是这样来设置链接的样式的，我们对链接的四个状态一个一个考虑。在这个例子中，我们就是设置这个链接的开始的颜色是红色，访问了之后是蓝色，在当鼠标滑到这个链接上面的时候是黑色，当我们点击链接的时候链接就变成为了绿色。这就是我们对链接样式的一个随着状态的不同，也发生着变化。其实我们可以将前两个状态当做是一个是静态的，后面的两个状态当做是动态的。静态的状态是我们开始的状态，没有进行任何的操作，动态则是用户对

链接产生了操作。在上面的例子中我们认识这四种状态，并且认识了对链接样式设置的基本的模式。还有就是对连接的字体进行的颜色的设置。

文本的修饰:

这个地方文本的修饰和我们在文本格式用遇到的文本修饰是一样的(详细请见:CSS文本格式).上面在颜色设置的时候我们介绍了四种状态，我们对文本修饰也要用到这个四种状态。我们在读文章的时候，常常鼠标滑到什么地方可以看到下划线，就是我们在文本修饰中做的，链接的文本修饰也就是对链接字体进行文本修饰，用到的属性是：

text-decoration，比如这个例子:

      a:link{text-decoration: none;}
/*在访问之前是没有下划线的*/
a:visited{text-decoration: none;}
/*访问之后也是没有下划线*/
    a:hover{text-decoration: underline;}
    /*鼠标滑到文本的时候有下滑线*/
    a:active{text-decoration: underline;}
    /*当鼠标点击的时候出现下划线*/

我们在这个地方要知道 的是文本修饰的几个值，underline下划线，none没有划线，overline是上划线，并且我们还要知道的是链接是有默认的下划线的，因此我们想让用户在鼠标滑到的时候产生一种效果就可以在静态的状态里面设置其下划线为none。

背景颜色:

我们上面的设置是对链接的字体颜色的设置，和字体的修饰的设置。我们也可以为链接设置背景颜色

用到的属性是background-color这个关键字，当然属性的值是颜色值:

       a:link{background-color: red;}
       a:visited{background-color: blue;}
       a:hover{background-color: orange;}
       a:active{background-color: black;}

对背景颜色的设置可以帮助我们设置出美观的链接，但是到现在位置为止，我们还是脱离不了这个四个状态的框架，现在有点烦这种不变的框架，怎么办:

<style type="text/css">
    a.one:link{color: red;}
    a.one:visited{color: blue;}
    a.one:hover{color: red;}
     /*在这个地方我们看到的链接都是对颜色的设置*/
    a.two:link{color: red;}
    a.two:visited{color: blue;}
    a.two:hover{font-size: 150%;}
    /*在前两个状态我们可以称为是初始状态，到最后一个状态的时候就变成我们参与的状态这个时候里面的字体突然之间是变大了，我们可以理解为鼠标滑过这链接的这样的一件事情，动作，不是状态了，如果说前面两个状态值静态，那么到这个地方也就变成为动态了*/
    a.three:link{color: red;}
    a.three:visited{color:blue;}
    a.three:hover{background-color: orange;}
    /*其实在我们设计链接的时候也也可以注意一地小
    技巧，也就是我们可能是在设计的时候不需要设计点击链接的时候状态，因为对于用户来说点击的那一瞬间也不会去注意的，也就是我们着重是对前说那个状态进行的重点的介绍，还有我们可以看到是在前两个状态我们是对颜色进行的设置，当然我们在其他属性也可以对比尔说字体的大小或者还背景的颜色，进行的设计*/
    a.four:link{color: red;text-decoration: none;}
    a.four:visited{color: black;text-decoration: none;}
    a.four:hover{text-decoration: underline;}
    /*在这个地方我们还可以看到是我们在进行文本
    修饰 的时候，我们是可以对在一个状态中
    属性多个可以同时的设置*/
    </style>

现在对这个链接的设置自由了很多

     a:link,a:visited
     {
      display: block;
      font-weight: bold;
      color:red;
      background-color: #98bf21;
      width: 120px;
      text-align: center;
      padding: 4px;
      text-decoration: none;
     }
     a:hover,a:active
     {
      background-color: #7A991A;
     }
    </style>

 <!-- 这个程序中将里链接更为形象的表示了出来，我们将链接用状的形式表示出来，在这个地方我们也许只有对这个里面属性进行分析才能看到其中的好处，也即是我们在block里面设置的属性包括display
 这个表示以什么样的样式表示出来，还有就粗细，还是字体的 颜色，背景颜色，也就是我们的块状的颜色，还有就是文本在块张中的对齐方式，以及文本和边框之间的距离，最后就是文本时候修饰也就是下划线为none，我们在这个地方要注意 的是我们练级的
 在这个地方同时设置了两个状态，包括link和visited这两个属性，当然还有就是我们对另外的两个状态的设置，是设置的是背景的颜色，这个就就难怪为什么我们有时候的的那个鼠标滑到什么对方发现颜色发生了变化-->