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:link 和 a:visited 之后,a:active 必须位于 a:hover 之后!