讲给后台程序员看的前端系列教程(20)——伪类

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100634957

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

伪类

为提升用户体验,我们经常需要为超链接指定不同的状态,使得超链接在单击前、单击后、鼠标悬停时产生不同样式效果。在CSS中,可通过超链接伪类实现不同的链接状态。所谓伪类并不是真正意义上的类,它的名称是由系统定义的,通常由标记名、类名、id名加上:构成。超链接标签a的伪类有如下四种:

  • a:link{ }设置了超链接的颜色

  • a:visited{ }设置超链接访问过后的样式

  • a:hover{ }设置鼠标放到超链接上时的样式

  • a:active{ }设置超链接被点击瞬间的样式

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style type="text/css">
            a:link{
                 color: red;
                 text-decoration: none;  
             } 
             a:visited{
                color: yellow;
             }
             a:hover{
                 color: green;
                 text-decoration: underline;   
             }
            a:active{
                 color: black;
            }
        </style>
</head>
<body>
    <a href="http://blog.csdn.net/lfdfhl" target="_blank">本文原创作者:谷哥的小弟</a>
</body>
</html>

效果如下:
在这里插入图片描述

注意事项:
请按照先后顺序实现a:link{ }、a:visited{ }、a:hover{ }、a:active{ }从而确保浏览器显示预计的效果;否则,很可能失效。

展开阅读全文

没有更多推荐了,返回首页