HTML 文本装饰-html教程-PHP中文网

HTML 中的文本装饰如何工作？

HTML 文本修饰示例

示例 #1 – 无

示例 #2 – 下划线

示例 #3 – 上划线

示例 #4 – 直通

示例#5

结论

首页

web前端

html教程

HTML 文本装饰

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:40 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 中的文本装饰，用于以不同方式装饰文本。 text-decoration 是用于文本装饰的属性。 text-decoration 属性采用下划线、上划线、穿行线、下划线上划线值来以不同的方式装饰文本。

实时示例：文本装饰上划线、下划线、穿线值用于生成验证码，同时确认登录用户是人类还是机器人。因为如果机器人无法完美识别文本顶部的线条。

类型：

文本装饰：无；
文字装饰：上划线；
文本修饰：换行；
文字修饰：下划线；

HTML 中的文本装饰如何工作？

文本装饰属性基于无、上划线、穿线和下划线

1。无

语法：

text-decoration: none;

登录后复制

说明：它不会给文本带来任何装饰。就像普通文本一样。

2。上划线

语法：

text-decoration: overline;

登录后复制

说明：它会在文本顶部给出一条 1px 大小的线。

3。直通

语法：

text-decoration: line-through;

登录后复制

说明：它将给出从文本中间开始的1px大小的线条。

4。下划线

语法：

text-decoration: underline;

登录后复制

说明：它会在文本底部给出一条 1px 大小的线。

5。眨眼

语法：

text-decoration: blink;

登录后复制

说明：它会让文字以不同颜色闪烁，透明度从0%到100%。

注意： 最新浏览器的闪烁功能已被弃用。现在根本不用了。

Text-decoration属性还可以用颜色制作除默认样式之外的上划线、穿线、下划线等不同样式的点线、波浪线、实线、凹槽等。您可以看到以下语法。

语法：

text-decoration: underline dotted red;

登录后复制

HTML 文本修饰示例

以下是 HTML 文本装饰的示例：

示例 #1 – 无

代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:none</h1>
<p class="none">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in the development of back end features in Spring MVC with Hibernate. Developed importing models and logic in the Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

登录后复制

输出：

HTML 文本装饰

说明：如您所见，text-decoration: none 不能为段落文本提供任何线条装饰。

示例 #2 – 下划线

代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:underline</h1>
<p class="underline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

登录后复制

输出：

HTML 文本装饰

说明：如您所见，text-decoration: underline 给出了文本下方的线条。

示例 #3 – 上划线

文本修饰：上划线示例：

代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:overline</h1>
<p class="overline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

登录后复制

输出：

HTML 文本装饰

说明：如您所见，text-decoration: overline 在文本上方给出线条。

示例 #4 – 直通

文本装饰：穿线示例：

代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:line-through</h1>
<p class="through">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

登录后复制

输出：

HTML 文本装饰

说明：如您所见，text-decoration: line-through 从文本中间给出线条。

示例#5

带有实线、双线、波浪线、下划线、下划线、上划线的文本装饰示例：

代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.p1 {
text-decoration:solid overline brown;
font-size:18px;
}
.p2 {
text-decoration:double line-through blue;
font-size:18px;
}
.p3 {
text-decoration:wavy underline red;
font-size:18px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:solid overline brown</h1>
<p class="p1">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:double line-through blue</h1>
<p class="p2">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:wavy underline red</h1>
<p class="p3">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

登录后复制

输出：

HTML 文本装饰