常见的color, font-family, background 等css属性都能够设置链接的样式，a链接的特殊性在于能够根据它们所处的状态来设置它们的样式。a标签与人交互的4个状态属于伪类状态切换，常见的链接四种状态为：a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻，具体看下面的代码展示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>a链接四种伪类状态切换实现人机交互</title>

     <style type="text/css">

     a:link{

         color: red; /*初始状态*/

         font-size: 10px;

         letter-spacing: 10px;

     }

     a:visited{

         color: green;/*点击访问*/

         font-size: 20px;

         text-decoration: none;

     }

     a:hover{

         color:blue ;/*鼠标移动*/

         font-size: 30px;

         text-decoration: overline;

     }

     a:active{

         color: yellow;/*点击状态*/

         font-size: 40px;

         border: 1px solid red;

     }

     </style>

 </head>

 <body>

     <a href="#" title="" target="_self">大灰牛博客</a>

 </body>

 </html>

a链接四种伪类状态切换实现人机交互的更多相关文章

  1. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. a:link a:visited a:hover a:active四种伪类选择器的区别

    a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...

  3. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...

  4. a标签的四个伪类

    A标签的css样式   CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link    :v ...

  5. 理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序

    理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都 ...

  6. a 标签的四个伪类

    link        有链接属性时visited    链接地址已被访问过active     被用户激活(在鼠标点击与释放之间发生的事件)hover      其鼠标悬停 <!DOCTYPE ...

  7. python装饰器、继承、元类、mixin，四种給类动态添加类属性和方法的方式(一)

    介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式 有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. # coding=u ...

  8. CSS链接四种状态注意顺序、UI伪类选择器的顺序

    css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式不起作用的bug.例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了. 正确的顺序: a:link ...

  9. （4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

    1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...

随机推荐

  1. cocos2dx,Layer锚点与scale缩放

    最近写代码需要用到缩放,而且是Layer的,但是发现怎么设置位置都是错误,于是决定研究下. 首先,基础代码,代码上不错特殊处理,没有锚点设置和缩放 class TestLayer : public L ...

  2. 域渗透之票据传递攻击（pass the ticket，ptt）

    票据传递攻击(PtT)是一种使用Kerberos票据代替明文密码或NTLM哈希的方法.PtT最常见的用途可能是使用黄金票据和白银票据,通过PtT访问主机相当简单. 1.ptt攻击的部分 就不是简单的N ...

  3. 深入学习MySQL 01 一条查询语句的执行过程

    在学习SpringCloud的同时,也在深入学习MySq中,听着<mysql45讲>,看着<高性能MySQL>,本系列文章是本人学习过程的总结,水平有限,仅供参考,若有不对之处 ...

  4. typescript 第一弹

    typescript官网: http://typescriptlang.org typescript 在线运行环境: http://www.typescriptlang.org/play/index. ...

  5. 使用静态URL片段 URL路由 精通ASP-NET-MVC-5-弗瑞曼

  6. 解决keil5不支持Samsung 2440A等较旧型号Soc的方法

    手上有一块mini2440,最近想拿来跑一下程序.于是去下了最新版的Keil5,结果发现创建工程时没有Samsung一系列型号的CPU选项.   没有办法,去网上找了很久,才发现原因是新版的Keil5 ...

  7. 一个基于RabbitMQ的可复用的事务消息方案

    前提 分布式事务是微服务实践中一个比较棘手的问题,在笔者所实施的微服务实践方案中,都采用了折中或者规避强一致性的方案.参考Ebay多年前提出的本地消息表方案,基于RabbitMQ和MySQL(JDBC ...

  8. （转）KL散度的理解

    KL散度(KL divergence) 全称:Kullback-Leibler Divergence. 用途:比较两个概率分布的接近程度.在统计应用中,我们经常需要用一个简单的,近似的概率分布 f * ...

  9. 八使用Shell函数

    在Shell脚本中,将一些需要重复使用的操作,定义为公共的语句块,即可称为函数 使用函数的好处? 使脚本代码更简洁,增强易读性 提高Shell脚本的执行效率 函数定义方法 基本格式1 function ...

  10. FFMPEG学习----解码视频

    基础概念 我们平时看到的视频文件有许多格式,比如 avi, mkv, rmvb, mov, mp4等等,这些被称为容器(Container), 不同的容器格式规定了其中音视频数据的组织方式(也包括其他 ...