常见的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. Identity 4 -1创建一个登录中心

    准备知识 官网地址:https://identityserver4.readthedocs.io/ 通过nuget安装 Identity Server4

  2. 玩转Django2.0---Django笔记建站基础十一(二)((音乐网站开发))

    11.5 歌曲排行榜 歌曲排行榜是通过首页的导航链接进入的,按照歌曲的播放次数进行降序显示.从排行榜页面的设计图可以看到,网页实现三个功能:网页顶部搜索.歌曲分类筛选和歌曲信息列表,其说明如下: 1. ...

  3. 每天翻译一点点： WPF Application Framework (WAF)

    ps:http://waf.codeplex.com/wikipage?title=Model-View-ViewModel%20Pattern&referringTitle=Document ...

  4. BERT模型总结

    BERT模型总结 前言 ​ BERT是在Google论文<BERT: Pre-training of Deep Bidirectional Transformers for Language U ...

  5. Spring事务梳理

    Spring事务传播行为 概述 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为 事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数 ...

  6. Fibonacci Nim（斐波那契尼姆）游戏

    游戏描述: Fibonacci Nim是Nim游戏的变种,其规则为两名玩家从一堆硬币中交替移除硬币,第一步中,不允许玩家拿走所有硬币,也不允许不取,并且在每次后续移动中,移除的硬币数量最多可以是上一次 ...

  7. linux之samba使用

    工作中,很多时候,我导出文件,或者上传文件的时候经常失败,报samba fail,但我并不知道samba是干什么用的,也老是听同事说什么samba没有挂载,但我基本上不知道什么是samba,更不要说什 ...

  8. 在vue中使用jquery

    首先默认你已经有了一个vue程序,如果你想在vue中使用jquery,那么请继续阅读. 当然,加入你没有一个vue程序,这里也给出创建一个vue程序的命令.当然,你肯定装了vue-cli,不然你不会点 ...

  9. Redis异常 | DENIED Redis is running in protected mode because protected mode is enabled

    背景 今天重新搭了个redis环境,用简单的代码去测试下是否正常, @RunWith(SpringRunner.class) @SpringBootTest public class Springbo ...

  10. docker学习笔记1认识docker

    简介 Docker是一个开源的应用容器,开发者可以打包其应用以及依赖到一个可移植的容器当中.当然容器与容器之间不存在任何接口,完全独立.最大程度的解决了我的软件只能不能在你的电脑上运行的尴尬局面.开发 ...