超链接的那些事(一): 伪类

一、什么是CSS伪类

      CSS伪类(Pseudoclasses)用来指定一个或者与其相关的选择符的状态。它的表现形式是selector:pseudoclass{property:value;}。

二、浏览器的支持

      CSS有很多的伪类没有得到浏览器的支持,但是对于超链接的四个伪类可以安全使用。

三、超链接的伪类

  • link 适用于未被用户访问过的链接
  • visited 适用于已被用户访问过的链接
  • hover 适用于光标(鼠标指针)置于其上的连接
  • active 适用于被点击过的连接

四、伪类的顺序

      在使用超链接的伪类的时候,需要按照link->visited->hover->active的顺序来定义。

例如:

a:link {color: red;}
a:visited {color: yellow;}
a:hover {color: green;}
a:active {color: gray;}

简单记法"love hate","爱恨"。

Tip:

①. 对于已经访问的链接,浏览器会记录访问的信息,所以查看link和visited效果,有时需要清除浏览器的缓存。

②. 超链接有默认的样式下划线, 而去除下划线需要以下CSS:

a{text-decoration:none;}

未完待续...

时间: 2024-08-07 06:25:06

超链接的那些事(一): 伪类的相关文章

选择器—伪类选择器

1.链接伪类 :link    指示作为超链接并指向一个未访问的地址的锚 :visited    指示作为已访问地址超链接的所有锚 可以对链接伪类进行颜色,样式等属性的设置. 1 a:link{ 2 color:blue; 3 text-decoration:line-through; 4 } 5 a:visited{ 6 color:red; 7 } 2.动态伪类 :focus    指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素 :hover    指示鼠标

超链接标签的CSS伪类link,visited,hover,active

CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了. 1,  查看超链接a标签的默认样式 新建一个网页a.html,复制下面的内容: <html> <head> </head&

超链接伪类

伪类样式: 标签名:伪类名{声明} 如:a:hover{ color:#000000; text-decoration:underline; } 伪类名称: a:link 未单击访问时超链接样式 a:visited 单击访问后超链接样式 a:hover  鼠标悬浮其上的超链接样式 a:active  鼠标单击未释放的超链接样式 伪类顺序:a:link>a:visited>a:hover>a:active

关于超链接伪类的使用,:link,:visited,:hover

/* 伪类的基本用法*/ * { margin: 0px; padding: 0px; } /** * 默认情况的超链接 */ a:link, a:visited { text-decoration: none; font-size: 12px; color: #226; background: red; } /** * 当连接点击之后的效果,对于IE,不会自动继承a:link的效果, * 所以为了满足IE浏览器的效果,最好在a:link,a:visited */ a:visited { col

伪类与超链接

一.什么是CSS伪类       CSS伪类(Pseudoclasses)用来指定一个或者与其相关的选择符的状态.它的表现形式是selector:pseudoclass{property:value;}. 二.浏览器的支持       CSS有很多的伪类没有得到浏览器的支持,但是对于超链接的四个伪类可以安全使用. 三.超链接的伪类 link 适用于未被用户访问过的链接 visited 适用于已被用户访问过的链接 hover 适用于光标(鼠标指针)置于其上的连接 active 适用于被点击过的连接

Web标准:五、超链接伪类

Web标准:五.超链接伪类 知识点: 1.链接的四种样式 2.将链接转换为块状 3.用css制作按钮 4.首字下沉 1)链接的四种样式 超链接有四个伪类,分别是: a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接 之所以称之为伪类,也就是说他不是一个真实的类,正常的类是以点开始,后面跟一个名称,而它是a开始后面跟一个冒号,再跟个状态限定字符. text-decoration在HTML语言中对文本进行修饰,例如加下划线等.

web标准(复习)--5 超链接伪类

今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接从而构成一个网站.说到超链接,它涉及到一个新的概念:伪类,我们先看下超链接的四种样式: a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移

CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度

目录: 背景图片样式属性 雪碧图 列表导航栏 超链接的伪类样式 盒子模型. overflow. 圆角弧度 背景图片样式属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400p

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现