常见的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. 「 从0到1学习微服务SpringCloud 」07 RabbitMq的基本使用

    系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」01 一起来学呀! 「 从0到1学习微服务SpringCloud 」02 Eureka服务注册与发现 「 从0到1学习微服务S ...

  2. (转) exp1-3://一次有趣的XSS漏洞挖掘分析（3）最终篇

      这真是最后一次了.真的再不逗这个程序员了.和预期一样,勤奋的程序员今天又更新程序了.因为前面写的payload都有一个致命的弱点,就是document.write()会完全破坏DOM结构.而且再“ ...

  3. 这个时候 快下班了 我来翻译一段： Pro ASP.NET MVC 3 Framework

    Binding to a Derived Type绑定派生类型Although we have focused on interfaces (since that is most relevant i ...

  4. Spring Cloud服务注册中心交付至kubernetes

    前言 服务发现原则: 各个微服务在启动时,会将自己的网络地址等信息注册到服务发现组件中,服务发现组件会存储这些信息 服务消费者可以从服务发现组件中查询到服务提供者的网络地址,并使用该地址来远程调用服务 ...

  5. 使用RKE快速部署k8s集群

    一.环境准备 1.1环境信息 IP地址 角色 部署软件 10.10.100.5 K8s Master Etcd.Control 10.10.100.17 K8s Worker1 Worker 10.1 ...

  6. Linux学习笔记-配置阿里云yum源

    进入目录:cd /etc/yum.repos.d 备份:mkdir repobak mv *.repo repobak/ 下载CentOS-Base.repo 到路径/etc/yum.repos.d/ ...

  7. Node.js实战--资源压缩与zlib模块

    Blog:<NodeJS模块研究 - zlib> Github:https://github.com/dongyuanxin/blog nodejs 的 zlib 模块提供了资源压缩功能. ...

  8. python 函数3（模块）

    1.将函数存储在模块中 1.1.导入整个模块 要将函数导入,得先创建模块,模块 是扩展名为.py的文件,包含要导入到程序中的代码. 首先定义编写一个.py的文件,命名为pizza.py,代码如下: d ...

  9. Java 继承_Chris

    题目: 编写一个应用程序,创建一个矩形类,类中具有长.宽两个成员变量和求周长的方法.再创建一个矩形类的子类——正方形类,类中定义求面积方法.重写求周长的方法.在主类中,输入一个正方形边长,创建正方形对 ...

  10. POJ_3627_贪心

    题目描述: 给你N个数和一个总和,要求求出最少个数的数相加大于等于这个总和. 思路: 很简单的贪心,先排序,从大到小加一次,比较一次,直到符合条件. 我用了优先队列,运行时间好像多了一倍= = #in ...