您的位置:首页 > div css问集 > 【 返回上一页

教您用css怎么取消(去掉)下划线样式

CSS取消下划线分css去掉超链接的下划线css取消u下划线样式综合取消去掉下划线篇

去掉取消下划线
css取消下划线

html有下划线标签(u),有时使用了但需求去掉其下划线效果。

html a锚文本标签默认是带下划线的,可以取消去掉,鼠标悬停时又显示。

取消下划线CSS单词:text-decoration值为none
即:text-decoration:none(取消字体下划线样式css)

一、取消u下划线样式

1、取消全站u下划线

u{text-decoration:none}

2、取消指定盒子对象u下划线标签下划线

.no_u u{text-decoration:none}

解释:取消对象class=no_u内u标签下划线样式。

3、完整实例代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>取消指定u下划线样式 thinkcss</title>
<style>
.no_u u{text-decoration:none}
</style>
</head>
<body>
<p><u>下划线标签</u>,默认使用</p>
<p class="no_u">去掉<u>指定u字体下划线</u></p>
</body>
</html>

4、效果截图

去掉下划线
去掉指定对象内字体下划线

二、取消a超链接下划线样式

知道默认情况下超链接a字体默认是带下划线的,通常会取消默认超链接下划线。

1、取消全站a下划线样式

a{text-decoration:none}

2、去除指定对象内a下划线
与去除u类似,只需对a父级class或id设置取消下划线样式即可。

.no_a a{text-decoration:none}

解释:去除class=no_a内超链接a字体下划线样式,未在此对象内的a不享影响。

三、超链接取消下划线,鼠标悬停显示下划线

这种情况是常用的使用css取消a下划线样式又设置鼠标悬停在a超链接上时显示下划线。

1、全站a css下划线取消与显示

a{text-decoration:none}
a:hover{text-decoration:underline}

2、指定对象默认超链接下划线不显示,鼠标悬停显示下划线
代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接下划线显示与隐藏实例 thinkcss</title>
<style>
.clj a{text-decoration:none}
.clj a:hover{ text-decoration:underline}
</style>
</head>
<body>
<p><a href="#">thinkcss</a>,未在class=clj内不受影响</p>
<p class="clj">css学习上<a href="#">thinkcss</a>网站</p>
</body>
</html>

效果截图:

a超链接字体的下划线取消与显示
a超链接字体的下划线取消与显示

thinkcss总结:css布局中一个css样式属性可以灵活使用,可以布局很多自己想要的样式,常用的样式就那几个,可以组合成千变万化的布局形成漂亮网页,就像这里取消下划线(去掉下划线)一样,不同地方使用不同效果不同。

相关标签: 下划线 超链接 u
如需转载,请注明文章出处和来源网址:www.thinkcss.com/wenti/1435.shtml

日期:2017-09-27 11:32:42 来源:css学习与资料网 作者:thinkcss原创

热门点击