超链接css样式设置

蓝忧无泪

/*链接CSS*/
a.A_See:link{text-decoration:underline; color:Green;}
a.A_See:visited{text-decoration:underline; color:Green;}
a.A_See:hover{text-decoration:none; color:Green;}
a.A_See:active{text-decoration:underline; color:Green;}



<a href="See.aspx?id=1>" target="_blank" class="A_See">查看详情</a>



1：解释：
link:设置a对象在未被访问前的样式表属性。
visited:设置a对象在其链接地址已被访问过时的样式表属性。
hover:设置对象在其鼠标悬停时的样式表属性。
active:设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。

2：hover和a:visited书写顺序的重要性，
css中关于超链接的四个属性正确顺序为：
a:link {}
a:visited {}
a:hover {}
a:active {}

蓝忧无泪

很多人在网页上实现不同链接有不同的颜色上不知如何处理，如果改a的属性，好像所有的链接的颜色都改了。

事实上，采用css样式实现这个效果比较简单。


先看一下常用设置：
a:link 超链接的普通样式
a:visited 点击过的
a:hover 鼠标经过时的
a:active 单击时
a:link{text-decoration:none;} 无下划线
a:link{text-decoration:underline;} 有下划线


为了实现不同链接不同效果，我们要为不同效果的那个链接专门定义一个css规则。
比如：
我们常规css是这样的：
a:link{color:#ff0000}
那么网页上所有链接的颜色都是：#ff0000。
现在我们改一下：
a:link{color:#ff0000}
.line1 a:link{color:#000000}
同时，在要改变颜色的链接前加上css定义，像这样：<span class=line1><a href="/">不同颜色的超链接</a></span>，这样的话，这个链接的颜色就改变了。

蓝忧无泪

1、通常对全站超链接样式化方法
a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;

2、通过链接内设置类控制超链接样式css方法
案例超链接代码<a href="http://www.divcss5.com/" class="yangshi">CSS</a>
对应CSS代码
a.yangshi{color:#333;text-decoration:none; }
a.yangshi:hover {color:#CC3300;text-decoration:underline;}
通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式

3、通过对应超链接外的父级的css类的css样式来控制超链接的样式
案例超链接代码<div class="yangshi"><a href="http://www.divcss5.com/">CSS</a></a>
对应CSS代码
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}

这里值得注意的是a.yangshi与.yangshi a的样式css代码区别

-------------------------------------------------------
介绍这4个常见伪类作用与解释
1、a:link
设置a对象在未被访问前（未点击过和鼠标未经过）的样式表属性。也就是html a锚文本标签的内容初始样式。

2、a:hover
设置对象在其鼠标悬停时的样式表属性，也就是鼠标刚刚经过a标签并停留在A链接上时样式。

3、a:active
设置A对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。也就是鼠标左键点击html A链接对象与释放鼠标右键之间很短暂的样式效果。

4、a:visited
设置a对象在其链接地址已被访问过时的样式表属性。也就是html a超链接文本被点击访问过后的CSS样式效果。


一般a:active样式效果是瞬间效果观察不了，所以使用时候可以不用设置。同时超链接默认情况下是自动加下划线的，如果要去掉或再增加下划线可以设置css text-decoration （http://www.divcss5.com/rumen/r129.shtml）。



-------------------------------------------------------------
更多：http://www.divcss5.com/shili/s57.shtml