一、css链接样式代码
二、css定义超链接四个状态的正确顺序l-v-h-a
css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。
CSS属性的排列顺序: L-V-H-A 。
L-V-H-A是link、visited、hover、active的简写。
它们分别表示
A:link 超链接的默认样式
A:visited 访问过的(已经看过的)链接样式
A:hover 鼠标处于鼠标悬停状态的链接样式
A:active 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。
正常顺序:
一般会这样写:
三、css设置超链接样式
css设置超链接样式是通过伪类来实现的
由于超链接有四种不同的状态,CSS用伪类来标识它们。
(1) :link:设置a对象在未被访问前的样式表属性。
(2) :visited:设置a对象在其链接地址已被访问过时的样式表属性。
(3) :hover:设置对象在其鼠标悬停时的样式表属性。
(4) :active:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
定义超链接样式:
定义超链接样式的一般格式是:
选择符:伪类名 { 样式表 }
css中关于超链接的四个属性正确顺序为:
a:link {}
a:visited {}
a:hover {}
a:active {}
伪类名字对大小写不敏感,但在定义顺序上有要求。:hover必须被置于:link和:visited之后才是有效的,:active必须被置于:hover之后才是有效的。
如果没有指定伪类,则默认为 :link。
超链接默认情况下是始总有下滑线的,如果要去掉下划线,则需要添加样式 text-decoration: none;
例子:
四、css链接样式定义
CSS :hover 伪类
CSS 参考手册
定义和用法
:hover 伪类鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。
对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。
理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:
注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!!
注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!
注释:Pseudo-class(伪类)的名称对大小写不敏感。
注释:伪类可与 CSS 类配合使用:
如果以上例子中的链接已访问过,那么它会显示为红色。
实例
规定链接的颜色:
注意:浏览器支持,所有主流浏览器都支持 :hover 伪类。