常见的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. Nmap使用教程（进阶篇）

    什么是防火墙? 防火墙是用来控制网络访问的软件或硬件.分为以下两类:1.基于主机的防火墙:2.基于网络的防火墙. 基于主机的防火墙 这是在单台主机上运行的软件,用来控制入站流量(从网络向主机)和出站流 ...

  2. 共享excel工作簿

  3. THU的告诫

    究其原因,还是自己只会OI了.要成为一个合格的选手,是方方面面各个地方都要看的,同时也要自己去实现.快速实现.清晰实现.运行成功. 尤其是各种平时用的东西,不要只会技,还要研其道. 再次警醒,各位同我 ...

  4. swagger基本使用指南

    Maven依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-s ...

  5. springIOC源码接口分析(七):ApplicationEventPublisher

    一 定义方法 此接口主要是封装事件发布功能的接口,定义了两个方法: /** * 通知应用所有已注册且匹配的监听器此ApplicationEvent */ default void publishEve ...

  6. 快速理解DevOps概念和意义-兼谈SRE

    最近几年,由于负责的范围的变化.工作逐渐从某个IT领域或者部门,开始关注到整个IT体系的运转和管理.中间也遇到不少困难,同时也有机会去从更高的层面去学习和实践IT治理.文章主要是总结一下我对DevOp ...

  7. JsonCpp中文unicode编码问题

    用JsonCpp解析C++中文unicode编码,转换问题,今天找打了一种解决办法 这个问题画了不少时间,贴出来供大家参考 在json_reader.cpp中找到codePointToUTF8函数,添 ...

  8. 关于RiscV的一些资料整理

    1. 基于RISC-V架构的开源处理器及SoC研究综述 https://mp.weixin.qq.com/s/qSD-q8y0_MY8R0MBA85ZZg 原文链接: https://blog.csd ...

  9. （二）MyBatis延迟加载,一级缓存，二级缓存

    延迟加载配置: 什么时候用延迟加载?比如现在有班级和学生表,一对多关系,你可能只需要班级的信息,而不需要该班级学生的信息,这时候可以进行配置,让查询时先查询到班级的信息,在之后需要学生信息时候,再进行 ...

  10. Mac安装Mysql-python遇到的坑，被这俩报错反复摩擦：'my_config.h' file not found 和 IndexError: string index out of range

    最后Stackoverflow上面的大神解决了问题: Link brew install mysql brew unlink mysql brew install mysql-connector-c ...