CSS链接样式设置

CSS链接样式设置

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

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

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

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

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

颜色的设置:

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

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

文本的修饰:

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

text-decoration，比如这个例子:

我们在这个地方要知道 的是文本修饰的几个值，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;}

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

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

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;      }    

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。