利用css设置四种不同样式超链接的方法

html-css09

利用css设置四种不同样式超链接的方法,第1张

html超链接样式包括:正在连接、访问过、鼠标盘旋,各个文本字体样式设置如下

<style type="text/css">

<!-- 超链接文本字体设置-->

A {

FONT-SIZE: 16pxFONT-FAMILY: 宋体

}

<!-- 超链接正在连接的文本字体设置-->

A:link {

COLOR: #0055bbTEXT-DECORATION: none

}

<!-- 超链接访问过的文本字体设置-->

A:visited {

COLOR: #0077bbTEXT-DECORATION: none

}

<!-- 超链接鼠标盘旋的文本字体设置-->

A:hover {

COLOR: #ff0000TEXT-DECORATION: none

}

</style>

CSS设置多种的超级链接样式,只需要对网页中不同的元素链接进行单独定义就可以。例子:<table class="a1"><tr><td><a href="链接网址">链接文字</a></td></tr></table><table class="a2"><tr><td><a href="链接网址">链接文字</a></td></tr></table>在CSS中单独定义上面的 class=a1 和 class=a2的链接样式,相应css代码为:.a1 a:link{color:#000text-decoration:none } //链接文字颜色 为#000,黑色,text-decoration:none无下划线.a1 a:visite{color:blue} //访问后的链接文字颜色 为#000,蓝色.a1 a:hover{color:red} //鼠标停留到文字上的颜色 red,红色.a1 a:active{color:red} //点下鼠标时文字颜色同理a2可以做区别与a1的链接设置.a2 a:link{color:#ccctext-decoration:underline} //链接文字颜色 为#cctext-decoration:none有下划线.a2 a:visite{color:#7B5744} //访问后的链接文字颜色 为#7B5744,深红色.a2 a:hover{color:#00C400} //鼠标停留到文字上的颜色 red,绿色.a2 a:active{color:#E9F47B} //点下鼠标时文字颜色#E9F47B,黄色