HTML 文字修飾
- WBOY原創
- 2024-09-04 16:40:57417瀏覽
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>
輸出：
說明：如您所見，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>
輸出：
說明：如您所見，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>
輸出：
說明：如您所見，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>
輸出：
說明：如您所見，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 文字修飾的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML URL 編碼下一篇：HTML URL 編碼