美文网首页
简单的链接样式

简单的链接样式

作者: December1224 | 来源:发表于2019-03-30 16:43 被阅读0次

对链接应用样式最容易的方式是使用锚类型选择器。例如,以下规则使所有锚显示为红色:

a {color : red;}

但是,锚可以作为内部引用,也可以作为外部链接,所以使用类型选择器不总是理想的。为了避免这个问题,CSS提供了两个特殊的选择器,称为链接伪类选择器。:link伪类选择器用来寻找没有被访问过的链接, :visited伪类选择器用来寻找被访问过的链接。所以,在下面的示例中,所有没有被访问过的链接将是蓝色的,所有被访问过的链接将是绿色的:

a:link {color : blue}
a:visited  {color : green}

可以用来对链接应用样式的另外两个选择器是 :hover和 :active动态伪类选择器。
:hover动态伪类选择器用来寻找鼠标悬停处的元素,:active动态伪类选择器用来寻找被激活的元素。对于链接来说,激活发生在链接被单击时。所以,在下面的示例中,当鼠标悬停在链接上或单击链接时,链接将变成红色:

a:hover, a:active {color: red;}

为了尽可能提高页面的可访问性,在定义鼠标悬停状态时,最好在链接上添加 :focus伪类。在通过键盘移动到链接上时,这让链接显示的样式与鼠标悬停时相同。

a:hover, a:focus {color: red;}

其他元素也可以使用 :hover、 :active或 :focus伪类选择器。

相关文章

  • 简单的链接样式

    对链接应用样式最容易的方式是使用锚类型选择器。例如,以下规则使所有锚显示为红色: 但是,锚可以作为内部引用,也可以...

  • 对链接应用样式

    简单的链接样式 对链接应用样式最容易的方式是:使用锚类型选择器,例如 a {color:red;} 链接伪类选择...

  • 精通CSS高级Web标准解决方案读书笔记-05对链接应用样式

    1.简单的链接样式 :link没有访问过的链接,:visited访问过的链接 :hover悬停,:active被激...

  • 链接样式

    给链接定义样式: 有四个伪类可以让你根据访问者与该链接的交 互方式,将链接设置成4种不同的状态。 正常链接 a:l...

  • css 学习第二天

    CSS链接 链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取...

  • html中修改超链接a标签的样式

    修改a标签的默认样式 正常的超链接写法,未加任何自定义css样式: 超链接 点击链接之前的样式: 点击链接之后的样...

  • 伪类(一):链接、文本、文本框

    一、链接 :link:对未访问的链接添加样式:visited:对已访问的链接添加样式:active:当点击链接时添...

  • 超链接样式

    超链接伪类 a:link a:visited a:hover a:active :hover可以用于任何元素鼠标经...

  • 超链接样式

    学点不同的超链接 此时鼠标停留在一个超链接时会出现白色背景。效果看下图

  • CSS 链接样式

    超链接是网页的基本元素之一,几乎每个网页我们都可以看到超链接。在之前讲 HTML 的时候就讲过,超链接会自带一些默...

网友评论

      本文标题:简单的链接样式

      本文链接:https://www.haomeiwen.com/subject/abcsbqtx.html