当前位置 :| 主页>CSS样式>

css标准的链接样式

来源：cssplay 作者：cssplay 时间：2008-04-06 点击：

a:link { color: #CC3399; text-decoration: none}
a:visited { color: #FF3399; text-decoration: none}
a:hover { color: #800080; text-decoration: underline}
a:active { color: #800080; text-decoration: underline}

a.red:link { color: #FF0000; text-decoration: none}
a.red:visited { color: #FF0000; text-decoration: none}
a.red:hover { color: #606060; text-decoration: underline}
a.red:active { color: #606060; text-decoration: underline}

a.ameth:link { color: #400040; text-decoration: none}
a.ameth:visited { color: #400040; text-decoration: none}
a.ameth:hover { color: #FF3399; text-decoration: underline}
a.ameth:active { color: #FF3399; text-decoration: underline}

div.other a:link { color: #004000; text-decoration: none}
div.other a:visited { color: #004000; text-decoration: none}
div.other a:hover { color: #008000; text-decoration: underline}
div.other a:active { color: #008000; text-decoration: underline}

实例运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> a:link, a:active, a:visited{ color:#000000; line-height:20px; } a:hover{ color:#990000; } .test1,.test{ width:500px; padding:5px; margin-bottom:5px; border:1px solid; #08396b; } .test a:link, .test a:active, .test a:visited{ color:#6600FF; font-size:12px; line-height:20px; } .test a:hover{ color:#33CC00; } </style> </head> <body> <div class="test1"><a href="http://www.cssplay.org.cn/" _fcksavedurl="http://www.cssplay.org.cn/">我的网页用内嵌css定义了a.hover,a.visted,a.link 项目，这样的话网页中的所有链接都是同一种样式，我如何定义css能让同一个网页的链接有多种样式</a></div> <div class="test"> <a href="http://www.cssplay.org.cn/" _fcksavedurl="http://www.cssplay.org.cn/">我的网页用内嵌css定义了a.hover,a.visted,a.link 项目，这样的话网页中的所有链接都是同一种样式，我如何定义css能让同一个网页的链接有多种样式</a> </div> </body> </html>
提示：您可以先修改部分代码再运行

<html> <style> .red a:link,a:visited{color:#666;} .red a:hover{color:#f90;} .green a:link,a:visited{color:#333;} .green a:hover{color:#090;} </style> <body> <div class="red"><a href="#" _fcksavedurl="#">这个是红色</a></div> <div class="green"><a href="#" _fcksavedurl="#">这个是绿色</a></div> </body> </html>
提示：您可以先修改部分代码再运行

Tag：CSS样式 链接样式 css标准

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：两个不错的CSS链接样式例子
下一篇：列表链接文字同时设置背景色背景图片的方法

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例