第一种:
<style type="text/css">
a:link {
text-decoration: none;
}
</style>
第二种:
<style type="text/css">
a.类名称:link{
color: #FF0000;
}
</style>
第三种(有时候无效,不知何故?):
<style type="text/css">
.类名称 a:link{
color: #FF0000;
}
</style>
【转】在软件界面中常用到的超链接样式
-http://www.it365cn.com/bbs/topic.asp?topicid=1528
这几天做一个项目忙得没有时间来看兄弟姐妹们了,在做东西时发现有些问题在页面中可能会常用到样式,在这里总结几条供大家参考,很简单但却很有用:
1.在软件界面中常常希望点击超链接时不要出现默认状态的虚线边框:
<style type="text/css">
a{blr:expression(this.onFocus=this.blur());}
</style>
这在图片链接时尤其有用;
2.在页面中常用到希望改变超链接的背景样式:
在<head></head>之间定义:
<style type="text/css">
.a1{border:1px solid #ffcc00}/*定义onmouseover时的背景边框样式*/
.a2{border:1px solid #ffffff}/*定义onmouseout时的背景边框样式*/
</style>
<script language="javascript">
function changestyle(the,a){
the.className=a;
}
</script>
在正文中:
<table width="200" border="0" cellspacing="0" cellpadding="3">
<tr align="center">
<td class="a2" id="l1"><a href="#" οnfοcus=this.blur() onMouseOver="changestyle(l1,''''a1'''')" onMouseOut="changestyle(l1,''''a2'''')">样式一</a></td>
<td class="a2" id="l2"><a href="#" onMouseOver="changestyle(l2,''''a1'''')" onMouseOut="changestyle(l2,''''a2'''')">样式二</a></td>
</tr>
</table>
注意:红色字体部分一定要注意,在预先定义背景样式,这里是边框样式,所以比较特殊要先定义,不然页面会出现抖动现象!
至于超链接下划线的问题,我想大家应该很熟悉了,就不多说了,最后再把行超链接背景色的变化写一下吧,其实和在2中提到的差不多,只是有一些小的地方要值得注意一下:
在<head></head>之间定义:
<style type=text/css>
.td1{background-color:#e1fffe;cursor:hand}
</style>
<script language="javascript">
function changestyle(the,a){
the.className=a;
}
</script>
在下文定义如下:
<table>
<tr align="center" id="l3" onMouseOver="changestyle(l3,''''td1'''')" onMouseOut="changestyle(l3,document.bgcolor)">
<td>样式三</td>
<td>样式三</td>
</tr>
<tr align="center" id="l4" onMouseOver="changestyle(l4,''''td1'''')" onMouseOut="changestyle(l4,document.bgcolor)">
<td>样式四</td>
<td>样式四</td>
</tr>
</table>
请注意2与最后一处之间的关系与区别!好了,写了这么多,该休息一下了,希望对大家有所帮助!
///
<html>
<head>
<title>改变超链接的样式</title>
<style type="text/css">
.a1{border:1px solid #ffcc00}/*定义onmouseover时的背景边框样式*/
.a2{border:1px solid #ffffff}/*定义onmouseout时的背景边框样式*/
.td1{background-color:#e1fffe;cursor:hand}
a{blr:expression(this.onFocus=this.blur());}
a:visited{text-decoration:none;color:#000000}
a:active{text-decoration:none;color:#000000}
a:link{text-decoration:none;color:#000000}
a:hover{text-decoration:none;color:#000000}
</style>
<script language="JavaScript">
function changestyle(the,a){
the.className=a;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="3">
<tr align="center">
<td class="a2" id="l1"><a href="#" οnfοcus=this.blur() onMouseOver="changestyle(l1,'a1')" onMouseOut="changestyle(l1,'a2')">样式一</a></td>
<td class="a2" id="l2"><a href="#" onMouseOver="changestyle(l2,'a1')" onMouseOut="changestyle(l2,'a2')">样式二</a></td>
</tr>
<tr align="center" id="l3" onMouseOver="changestyle(l3,'td1')" onMouseOut="changestyle(l3,document.bgcolor)">
<td>样式三</td>
<td>样式三</td>
</tr>
<tr align="center" id="l4" onMouseOver="changestyle(l4,'td1')" onMouseOut="changestyle(l4,document.bgcolor)">
<td>样式四</td>
<td>样式四</td>
</tr>
</table>
</body>
</html>
a:link {text-decoration:none;color:blue;}
a:hover {text-decoration:underline;color:red;}
a:visited {text-decoration:none;color:green;}
</style>
a:hover 指鼠标在链接上;
a:visited 指已经访问过的链接。
a:hover {text-decoration:none;border-bottom:1px dashed red;}
</style>
a:hover {text-decoration:underline;font-weight:bold;color:red;background:blue;font-style:italic;}
</style>
a:link,a:hover,a:active,a:visited{text-decoration:none;}
</style>