在dreamweaver中的CSS样式中,vlink,alink,link和a:link什么区别?

html-css041

在dreamweaver中的CSS样式中,vlink,alink,link和a:link什么区别?,第1张

分类: 电脑/网络 >>互联网

解析:

一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:

① a:link:未访问链接

② a:visited:已访问链接

③ a:active:激活时(链接获得焦点时)链接的颜色

④ a:hover:鼠标移到链接上时

一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。

举例:伪类的常见状态值

<style type = “text/css”>

<!--

a:link {color: bluetext-decoration:none} 未访问:蓝色、无下划线

a:active:{color: red} 激活:红色

a:visited {color:purpletext-decoration:none} 已访问:purple、无下划线

a:hover {color: redtext-decoration:underline} 鼠标移近:红色、下划线

-->

</style>

vlink 属性表示已被访问链接的颜色,等同于 CSS 中的 a:visited 对颜色的设置。比如,

a:visited { /*匹配已访问的链接*/ 

  color: #FF0000 /*颜色设为红色*/ 

}

另外,设置多个“a:伪类”的样式时要注意设置的顺序(如果只设置“a:visited”就没有影响),否则样式会被覆盖而无法生效。正确的顺序如下。

a:link {  }  

a:visited {  } 

a:hover {  } 

a:active {  }

设置目标文字的<a>标签属性

如:要设置下面链接文字的颜色

<a href="#" id="link">我是链接文字</a>

css部分:

#link{

color:white/*设置链接字体的颜色*/}

注意:

在有时候设置链接颜色会出现无效的情况,这时候你需要检查你的选择器写的是否正确。

a有四种状态:

a:link {color:#FF0000}/* 未被访问的链接 */

a:visited {color:#00FF00}/* 已被访问的链接 */

a:hover {color:#FF00FF}/* 鼠标指针移动到链接上 */

a:active {color:#0000FF}/* 正在被点击的链接 */

   书写时一定要按照以上顺序书写,否则无法达到设计效果