css链接样式代码 css超链接样式顺序详解

发布时间:2019-11-08编辑:脚本学堂
分享几个css链接样式代码,css设置超链接样式的方法与例子,css定义超链接四个状态的正确顺序,css链接样式定义的具体方法等,供大家学习参考。

一、css链接样式代码

复制代码 代码示例:
a:link {
color: #000; text-decoration: none //链接
}
a:visited {
color: #000; text-decoration: none //已访问过
}
a:active {
color: green; text-decoration: none //活动
}
a:hover {
color: red; text-decoration: underline //鼠标经过
}

二、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 当鼠标左键按下时,被激活(就是鼠标按下去那一瞬间)的链接样式。

正常顺序:
 

a:link{color:#333 ;text-decoration:none ; }
a:visited { color:#333 ;text-decoration:none ;}
a:hover { color:#FF6600 ;text-decoration:underline ;}
a:active {text-decoration:none ; color:#FF6600 ;text-decoration:none ; }

一般会这样写:
 

a {color:#252525; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

三、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;
 
例子:
 

复制代码 代码示例:
a:link { color:#dd3409;text-decoration:none; font-size:13px; }/* 超链接的样式 */
a:visited { color:#9f301d;text-decoration:none; }
a:visited:hover { color:#9f301d;text-decoration:underline; }
a:hover { color:#dd3409;text-decoration:underline; }
a:active { color:#ff3300;text-decoration:underline; }

四、css链接样式定义 

CSS :hover 伪类
CSS 参考手册
定义和用法
:hover 伪类鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。
对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。

理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接,它们会在支持 CSS 的浏览器中以不同的方式显示出来:
 

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */
 

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

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

注释:Pseudo-class(伪类)的名称对大小写不敏感。

注释:伪类可与 CSS 类配合使用:
 

a.red:visited {color: #FF0000;}
<a class="red" type="text/css"  href="css_syntax.asp">CSS Syntax</a>
 

如果以上例子中的链接已访问过,那么它会显示为红色。

实例
规定链接的颜色:
 

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {
   color: #00FF00
   text-decoration:none;   /*定义无下划线*/
}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

注意:浏览器支持,所有主流浏览器都支持 :hover 伪类。