在HTML页面开发中，文字下划线是常见样式，但很多时候我们需要去除默认或手动添加的下划线，比如超链接的默认下划线、通过样式设置的下划线等，下面介绍几种常用的去除方法。
一、使用行内样式去除下划线
行内样式是直接写在HTML元素的style属性中的样式，适合单个元素的样式调整。要去除下划线，只需要设置text-decoration属性为none即可。
比如去除超链接的默认下划线，代码如下：
<a href="https://ipipp.com" style="text-decoration: none;">这是一个没有下划线的链接</a>
如果是普通文本被添加了下划线，同样可以用行内样式去除：
<span style="text-decoration: none;">没有下划线的普通文本</span>
二、使用内部样式表去除下划线
如果需要对多个同类型元素统一去除下划线，使用内部样式表会更高效。内部样式表写在<head>标签的<style>标签中。
比如去除页面所有超链接的下划线：
<head>
<style>
/* 去除所有a标签的下划线 */
a {
text-decoration: none;
}
/* 鼠标悬停时也不显示下划线 */
a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://ipipp.com">首页</a>
<a href="https://ipipp.com/about">关于我们</a>
</body>
三、使用外部样式表去除下划线
当项目规模较大，多个页面需要统一去除下划线时，使用外部样式表是最佳选择。首先创建独立的CSS文件，比如style.css：
/* style.css内容 */
.no-underline {
text-decoration: none;
}
/* 去除所有class为link的元素下划线 */
.link {
text-decoration: none;
}
然后在HTML页面中引入该CSS文件：
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="no-underline">这段文字没有下划线</p>
<a class="link" href="https://ipipp.com">外部样式控制的链接</a>
</body>
四、注意事项
text-decoration属性是控制文本装饰的核心属性，除了none值，还可以设置underline（下划线）、line-through（删除线）等，设置none即可清除所有文本装饰。- 超链接的默认下划线是浏览器自带的样式，部分浏览器还会在链接被访问、悬停、激活时显示不同样式，需要针对性设置对应伪类的
text-decoration属性。 - 如果样式没有生效，需要检查是否存在其他更高优先级的样式覆盖了当前设置，可以通过浏览器开发者工具查看元素的最终生效样式。
五、常见问题解答
1. 为什么设置了text-decoration:none还是显示下划线？
通常是因为有其他样式优先级更高，比如行内样式覆盖了内部样式表的设置，或者父元素的text-decoration属性继承到了子元素，此时可以检查样式优先级，或者给目标元素添加更具体的选择器。
2. 能不能只去除部分文字的下划线？
可以，只需要给需要去除下划线的文字包裹对应的标签，然后对该标签设置text-decoration: none即可，比如：
<p>这段文字<span style="text-decoration: none;">没有下划线</span>，其他部分有下划线</p>
HTMLtext_decorationCSS下划线去除修改时间：2026-07-24 08:54:27