首页 >web前端 >html教程 >HTML 文本装饰

HTML 文本装饰

WBOY原创: 2024-09-04 16:40:57500浏览

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 文本装饰

说明：如您所见，第一段有实线上划线，第二段有双下划线，第三段有波浪下划线文本装饰样式。

结论

文本装饰可以通过上划线、下划线、穿线属性值以及任何颜色的不同线条样式进行样式化。

以上是HTML 文本装饰的详细内容。更多信息请关注PHP中文网其他相关文章！

html if for while double Property default

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML URL Encoding下一篇：Iframes in HTML

查看更多