css去掉下划线
Posted dainiao01
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css去掉下划线相关的知识，希望对你有一定的参考价值。
下面我们做一个这样的链接：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。
实现方法很简单，在源代码的<head>和<head>之间加上如下的CSS语法控制：
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-－>
</style>
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线
A:visited{TEXT-DECORATION:none;COLOR:#009999}
A:link{text-decoration:none}
A:hover{TEXT-DECORATION:COLOR:#FF0000;FONT-WEIGHT:bold;FONT-STYLE:italic}
A.1:link{text-decoration:none}
A.1:visited{TEXT-DECORATION:none;COLOR:#000000}
A.1:hover{TEXT-DECORATION:none;COLOR:#FFffff;FONT-WEIGHT:bold;FONT-STYLE:italic}
//上面这句TEXT-DECORATION:没有赋值
</style>
<a class="1" href=".....">adfadfas</a>
class引用自定义类时，要直接用类名，就是.后面的部分，尽管我不知道用纯数字直接去定义会不会有bug，不过，用含有字母的字串去定义应该是个好的习惯。
定义的顺序是link,visited,active,hover,为了页面的美观，一般只用link和hover就可以了
在访问一个页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？
我们在<HEAD>...</HEAD>之间插入下面的代码。
<style>B {font-weight: 700; }
P {padding: 5px 0px;
margin: 0px;
font-family: 宋体,黑体,宋体;
}
A {text-decoration: none}
TD { font-family: 宋体,黑体,宋体; }
</style>
<script language="javascript">
var contents = true;
</script>
更简单的方法是：
<style>
<!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!>
</style>
下面我们在看一看效果，试着将鼠标移动到下面的超级链接上去，是不是超级链接不会产生下划线了。
3、有些网页的链接，原先没有下划线，你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了。如何实现这种效果呢？
可用层叠样式表（CSS）来实现的，在Dreamweaver3中编辑层叠样式表不用编写代码，具体操作方法如下：
1）在快速启动栏中点击层叠样式表按钮（就是把鼠标放上去显示“show css styles”的那个按钮），在弹出的CSS Styles面板上双击（none）；
2）此时，可看到弹出的Edit Style Sheet 面板，在该面板上按New按钮；
3）再在弹出的New Style 面板上点取Redefine html Tag（重新定义HTML标记）再在Tag中选择“a”（超级链接标记）标记后按OK按钮；
4）这时可看到弹出的Style dehinition for a 的对话框，在此对话框中可以设置超级链接的许多属性，你可以按你的意愿设置，但我们这里主要是要去掉那讨厌的下划线，所以我们在decoration 属性中选择“none”，这样就把下划线去掉了；然后我们再选择颜色为：#339966。按ＯＫ按钮返回到Edit Style Sheet 面板；
5）在Edit Style Sheet 面板上再按New按钮；
6）在弹出的New Style 面板上点取Use CSS Selector ，再在该面板上的selector选择框中选择“a:hover”（定义当鼠标在超级链接上时链接的属性），按ＯＫ按钮；
7）在弹出的Style dehinition for a:hover 的对话框中，我们在decoration 属性中选择“underline”，这样就把下划线又加上了；然后我们再选择颜色为：#FF3300。按ＯＫ按钮返回到Edit Style Sheet 面板；
8）在Edit Style Sheet 面板上再按Don按钮，至此所有设置结束，你在Dreamweaver3的源代码检视窗中将看到在<head>与</head>之间如下所示的代码：
<style type="text/css">
<!--
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-->
</style>
有了这段代码，你在该网页上的所有文字链接在浏览器中显示时没有下划线，当你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了。若你想在 其它网页中也具有这种效果，你可以用上述方法设置或更简单点，直接把这段代码复制，粘贴到<head>与</head>之间即 可。注意：若不是在a 中定义除去下划线而是在a: link中定义除去下划线，在实际使用时不能除去下划线，我是在IE4.0环境下测试的。
以上是关于css去掉下划线的主要内容，如果未能解决你的问题，请参考以下文章