1
2
3
4
5
6

知识点:链接伪类

发布时间:2019-10-22 20:32   发布人:侯素玲   浏览次数:2927

      

默认的超链接状态

     未访问的超链接:带有下划线,蓝色 

     已访问的超链接带有下划线,紫色

     被激活的超链接带有下划线,红色

     这种默认的超链接样式并不美观,在CSS中,通过链接伪类实现不同的链接状态。所谓伪类并不是真正意义上的类,他的名称是由系统定义的,通常由标记名、类名或id名加“:”构成。

      超链接标记<a>的伪类有4种,具体如下表所示。

超链接标记的伪类

含义

a:link{CSS样式规则; }

未访问时超链接的状态

a:visited{CSS样式规则; }

访问后超链接的状态

a:hover{CSS样式规则; }

鼠标经过、悬停时超链接的状态

a:active{CSS样式规则; }

鼠标点击不动时超链接的状态


        点击查看示例代码

  网页中常见的超链接样式

     1.去掉超链接默认的下划线

         a {text-decoration:none;}            

     2. 网页中超链接无下划线,鼠标移到超链接上时,出现下划线

         a {text-decoration:none;}            

         a:hover {text-decoration:underline;}

     3.超链接无下划线,鼠标移到超链接上时,颜色由灰黑色(#333)变为红色(# BF0915;)

         a {

             text-decoration:none;

             color:#333;

           }            

         a:hover {color:# BF0915;}

     4.新浪网超链接样式

      (1)超链接无下划线,字号为14px,未访问时,超链接颜色为#122E67

      (2)鼠标停留在超链接上时出现下划线,同时超链接颜色变为橙色#ff8400

      (3)访问以后的超链接颜色变成#52687e

         a{font-size:14px;

            text-decoration:none;

            }

         a:link{color:#122E67;}

         a:visited{color:#52687e;}

         a:hover{color:#ff8400 }