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;}
对背景颜色的设置可以帮助我们设置出美观的链接,但是到现在位置为止,我们还是脱离不了这个四个状态的框架,现在有点烦这种不变的框架,怎么办:
现在对这个链接的设置自由了很多
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;
}