链接或超链接是从一个Web资源页面连接到另一个Web资源页面。
链接有四种不同的状态- link, visited, active 和 hover。链接或超链接的这四个状态可以使用锚元素的伪类通过CSS属性设置不同的样式,具体取决于它们所处的状态。
这是与HTML <a>标记关联的CSS伪类,可用于为超链接的不同状态定义不同的样式。
a:link —为没有鼠标指针的普通或未访问链接设置样式。
a:visited-设置用户访问过但没有鼠标指针的链接的样式。
a:hover —当用户将鼠标指针放在链接上时,设置链接的样式。
a:active-为正在单击的链接设置样式。
您可以指定你想CSS属性,例如:color,font-family,background等,以这些的选择重新定义链接的风格,就像你用普通的文本那样。
a:link { /* 未被访问的链接 */ color: #FF0000; text-decoration: none; } a:visited { /* 被访问过的链接 */ color: #00FF00; } a:hover { /* 鼠标移到链接上 */ color: #FF00FF; text-decoration: underline; } a:active { /* 正在点击的链接 */ color: #0000FF; }测试看看
为多个链接状态设置样式的顺序很重要,因为最后定义的优先级高于先前的CSS代码。
注:伪类的顺序应该通常为::link,:visited,:hover,:active,:focus
在所有主流的Web浏览器中,如果未专门设置样式,则网页上的链接带有下划线,并使用浏览器的默认链接颜色。
例如,基于Gecko的Web浏览器(如Firefox)的默认链接颜色为- 蓝色表示未访问,紫色表示已访问,红色表示正在点击的链接。
以下是演示如何设置链接颜色的示例。
a:link { /* 未被访问的链接 */ color: #FF0000; } a:visited { /*被访问过的链接 */ color: #00FF00; } a:hover { /* 鼠标移到链接上 */ color: #FF00FF; } a:active { /* 正在点击的链接 */ color: #0000FF; }测试看看
text-decoration CSS属性一般用来从链接中删除默认的下划线。下面的示例演示,如何删除或设置text-decoration超链接的不同状态的属性。
a:link { /* 未被访问的链接 */ color: #FF0000; text-decoration: none; } a:visited { /* 被访问过的链接 */ color: #00FF00; text-decoration: none; } a:hover { /* 鼠标移到链接上 */ color: #FF00FF; text-decoration: underline; } a:active { /* 正在点击的链接 */ color: #0000FF; text-decoration: underline; }测试看看