css-link

Xiaomo

分类: HTML & CSS 1574 9

CSS 链接

在写这篇文章之前,只是知道有链接的不同状态下的样式这东西的存在,并未去认真了解过的链接的不同状态可以有不同的样式。

能够设置链接样式的 CSS 属性有很多种(例如 color, font-size, background 等等)。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态:
– :link – :visited – :hover – :active

语法与说明:

:link 伪类向未访问的链接添加特殊的样式。

Selector : link { sRules }

设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性(特性)的a对象,此伪类不发生作用。


:visited 伪类向已访问的链接添加特殊的样式。

Selector : visited { sRules }

设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性(特性)的a对象,此伪类不发生作用。


:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

Selector : hover { sRules }

设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。


:active 伪类向激活的元素添加特殊的样式。(:active 在鼠标点击与释放之间发生的事件)

Selector : active { sRules }

设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。

定义和用法:

:link 伪类向未访问的链接添加特殊的样式。
这个伪类应用于尚未访问过的链接;也就是说,链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited 状态是互斥的。

a:link { font-size:14px; text-decoration:underline; color:#000000; } 



:visited 伪类向已访问的链接添加特殊的样式。

a:visited { font-size: 14px;text-decoration:underline; color:#ff0000; } 



:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。

a:hover { font-size:14pt; text-decoration:underline; color:#00bfff; } 
a:hover span{ color:red; } 



:active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。
这个伪类应用于处于激活状态的元素。最常见的例子就是在 HTML 文档中点击一个超链接:在鼠标按钮按下期间,这个链接是激活的。还有其他一些方式来激活元素,另外从理论上讲其他元素也可以被激活,不过 CSS 对此没有定义。

a:active { font-size:14px; text-decoration:underline; color:#ee82ee; }



注:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:linka:visited 之后,a:active 必须位于 a:hover 之后!

  • 2人 Love
  • 1人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
css、link

作者简介:Xiaomo

学无止境,生命不息,折腾不止!

共 9 条评论关于 “css-link”

Loading...