html怎么设置文本装饰文字装饰效果添加指南-html教程-PHP中文网

html怎么设置文本装饰文字装饰效果添加指南

穿越時空

发布： 2025-06-28 19:03:01

原创

369人浏览过

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怎么设置文本装饰文字装饰效果添加指南

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>
<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 可能不是所有浏览器都支持，使用时需要注意兼容性。

以上就是html怎么设置文本装饰文字装饰效果添加指南的详细内容，更多请关注php中文网其它相关文章！

html怎么设置文本装饰 文字装饰效果添加指南

如何去除链接的默认下划线？

text-decoration-skip-ink有什么用？

text-underline-offset如何调整下划线的位置？

html怎么设置文本装饰文字装饰效果添加指南