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 文字修飾