a链接四种伪类状态切换实现人机交互
常见的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链接四种伪类状态切换实现人机交互的更多相关文章
- 【CSS学习笔记】a标签的四种伪类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- a:link a:visited a:hover a:active四种伪类选择器的区别
a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...
- <a>链接的四个伪类顺序
<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...
- a标签的四个伪类
A标签的css样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :v ...
- 理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序
理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序 在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都 ...
- a 标签的四个伪类
link 有链接属性时visited 链接地址已被访问过active 被用户激活(在鼠标点击与释放之间发生的事件)hover 其鼠标悬停 <!DOCTYPE ...
- python装饰器、继承、元类、mixin,四种給类动态添加类属性和方法的方式(一)
介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的方式 有时候需要給类添加额外的东西,有些东西很频繁,每个类都需要,如果不想反复的复制粘贴到每个类,可以动态添加. # coding=u ...
- CSS链接四种状态注意顺序、UI伪类选择器的顺序
css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式不起作用的bug.例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了. 正确的顺序: a:link ...
- (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
随机推荐
- 《爬虫学习》(四)(使用lxml,bs4库以及正则表达式解析数据)
1.XPath: XPath(XML Path Language)是一门在XML和HTML文档中查找信息的语言,可用来在XML和HTML文档中对元素和属性进行遍历. 工具:扩展商店里搜索:XPath ...
- Knative 简介
原文地址:https://yq.aliyun.com/articles/658800
- TCP客户端服务器编程模型
1.客户端调用序列 客户端编程序列如下: 调用socket函数创建套接字 调用connect连接服务器端 调用I/O函数(read/write)与服务器端通讯 调用close关闭套接字 2.服务器端调 ...
- 在qemu-kvm配置桥接网络
为了宿主机和虚拟机可以很好的通信,当然是选择桥接网络啦!!! 话不多说 ===========================配置桥接网络========================== 虚拟机虽 ...
- GP工作室——系统设计
团队作业第二次--系统设计 问题 答案 这个作业属于哪个课程 软件工程 这个作业要求在哪里 作业要求 团队名称 GP工作室 这个作业的目标 对项目软件进行更为详细的系统性设计 按照本游戏的设计要求,我 ...
- 优雅写Java之四(类与对象)
一.类相关用法 二.Bean 三.泛型与注解 四.序列化
- Git 初级使用 windows & Ubuntu
目的:有一段代码要进行几个人同时维护,但是传来传去不方便,所以希望在github上实现,前提是每台机器都有git 在github 上新建一个项目 然后会看到,大体上就按这执行就可以 在Windows系 ...
- SVN: 在Ecplise管理SVN资源库
Window->Show View->SVN
- Vue使用better-scroll左右菜单联动
说明 最近想做一个vue商城小项目,练习一下vue的语法,刚刚好碰到了需要左右菜单实现联动,因此就接触了 better-scroll. github地址 中文文档. 代码 页面结构以及数据 //页面结 ...
- ubuntu19配置静态IP并开启SSH远程登陆
前言 从ubuntu从17.10开始,已经不再在/etc/network/interfaces里配置IP,即使配置了也不会生效,而是改成netplan方式 ,配置写在/etc/netplan/文件夹 ...