html设置文本装饰的核心方法是使用css的text-decoration属性，具体值包括1.underline添加下划线；2.overline添加上划线；3.line-through添加删除线；4.none移除装饰，常用于去除链接默认下划线；使用方式可直接嵌入html元素、写在内部样式表或外部css文件中，且支持高级控制如颜色、样式、粗细及位置调整，例如结合text-decoration-color、text-decoration-style、text-decoration-thickness和text-underline-offset等属性实现精细化设计，同时注意text-decoration-skip-ink用于优化下划线与字母下降部分的显示效果。
HTML设置文本装饰，简单来说，就是用CSS来给文字加点“花样”，比如加个下划线、删除线什么的。核心就是text-decoration这个CSS属性。
解决方案
text-decoration属性主要有以下几个值：
立即学习“前端免费学习笔记（深入）”；
-
underline: 给文本添加下划线。这个是最常见的，比如链接默认就有下划线。 -
overline: 给文本添加上划线。用的比较少。 -
line-through: 给文本添加删除线。可以用来表示已完成的任务或者打折商品的原价。 -
none: 移除文本装饰。比如，去掉链接的默认下划线。
具体用法：
你可以直接在HTML元素的style属性里设置，也可以在CSS样式表里设置。
- 行内样式:
<p style="text-decoration: underline;">这是一段带有下划线的文字。</p> <a href="#" style="text-decoration: none;">这是一个没有下划线的链接。</a>
- 内部样式表 (在
<head>里):
<head>
<style>
p.underline {
text-decoration: underline;
}
a.no-underline {
text-decoration: none;
}
</style>
</head>
<body>
<p class="underline">这是一段带有下划线的文字。</p>
<a href="#" class="no-underline">这是一个没有下划线的链接。</a>
</body>- 外部样式表 (推荐):
创建一个CSS文件 (例如style.css)，然后：
/* style.css */
p.underline {
text-decoration: underline;
}
a.no-underline {
text-decoration: none;
}在HTML文件中引入CSS文件：
<head> <link rel="stylesheet" href="style.css"> </head> <body> <p class="underline">这是一段带有下划线的文字。</p> <a href="#" class="no-underline">这是一个没有下划线的链接。</a> </body>
更高级的用法：
text-decoration 还可以结合其他属性一起使用，比如 text-decoration-color，text-decoration-style，text-decoration-thickness 来更精细地控制文本装饰的样式。 举个例子，我想让下划线变成红色，虚线，并且更粗一点：
.fancy-underline {
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: dashed;
text-decoration-thickness: 3px;
}<p class="fancy-underline">这是一段带有红色虚线下划线的文字。</p>
如何去除链接的默认下划线？
链接默认带有下划线，有时候我们觉得不好看，想去掉。 最简单的方法就是：
a {
text-decoration: none;
}但是，直接这样写会影响到所有链接，所以通常会给链接添加一个class，然后针对这个class来设置：
a.no-underline {
text-decoration: none;
}<a href="#" class="no-underline">这是一个没有下划线的链接。</a>
或者，如果只想去掉特定区域的链接下划线，可以使用CSS选择器：
.my-section a { /*只影响.my-section里的链接*/
text-decoration: none;
}text-decoration-skip-ink有什么用？
text-decoration-skip-ink 这个属性控制下划线是否会“跳过”文字的下降部分（比如g, j, p, q, y的下半部分）。 默认情况下，下划线会穿过这些字母，看起来可能不太美观。 text-decoration-skip-ink: auto; 会让浏览器自动判断是否跳过，通常效果会更好。 text-decoration-skip-ink: none; 则强制下划线不跳过。
.skip-ink {
text-decoration: underline;
text-decoration-skip-ink: auto; /* 或者 none */
}<p class="skip-ink">这是一段带有下划线的文字，看看下划线是否跳过了字母的下降部分。</p>
text-underline-offset如何调整下划线的位置？
有时候，默认的下划线位置可能离文字太近，看起来不舒服。 text-underline-offset 可以调整下划线与文字的距离。 可以使用长度单位（比如px, em）或者百分比来设置。
.offset-underline {
text-decoration: underline;
text-underline-offset: 0.3em; /* 或者 3px, 5% */
}<p class="offset-underline">这是一段带有下划线的文字，下划线的位置被调整了。</p>
注意：text-underline-offset 可能不是所有浏览器都支持，使用时需要注意兼容性。
