資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 CSS 中，哪個屬性用於對文字進行下劃線、上劃線和刪除線處理？
在 CSS 中，‘text-decoration’ 屬性用於對文字進行下劃線、上劃線和刪除線處理。
文字下劃線是指在文字下方繪製一條線，文字上劃線是指在文字上方繪製一條線。刪除線是指在文字上繪製一條線以表示文字被刪除。
在本教程中，我們將學習如何使用 text-decoration CSS 屬性的不同值來以不同的方式設定文字樣式。
語法
text-decoration: style decoration color thickness;
值
樣式 – 它表示裝飾線的樣式，例如實線、點線、波浪線等。
裝飾 - 它可以用 ‘underline’、‘overline’ 和 ‘line-through’ 值來裝飾文字。
顏色 – 它設定裝飾線的顏色。
粗細 – 用於設定裝飾線的粗細。
示例
在下面的示例中，我們使用了 ‘text-decoration’ CSS 屬性來裝飾文字。我們設定了 ‘solid’ 線樣式、紅色 ‘underline’ 裝飾和 5px 粗細，使用者可以在輸出中觀察到。
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: solid underline red 5px;
}
</style>
</head>
<body>
<h3> Setting the underline to the text using the 'text-decoration' property in CSS </h3>
<div class = "text">
This is a text with an underline.
</div>
</body>
</html>
示例
在下面的示例中，我們使用藍色上劃線的方式裝飾了文字。在輸出中，使用者可以觀察到文字上方的藍色線條。
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: wavy overline blue 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> overline to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with an overline.
</div>
</body>
</html>
示例
在此示例中，我們使用了 ‘text-decoration’ CSS 屬性和 ‘line-through’ 值來對文字進行刪除線處理。在輸出中，使用者可以觀察到文字上方的線條。透過這種方式，我們可以在不刪除文字的情況下顯示文字中存在錯誤。
<html>
<head>
<style>
.text {
font-size: 2rem;
text-decoration: dotted line-through green 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> strickthrough to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with a strikethrough.
</div>
</body>
</html>
示例
在此示例中，我們建立了三個不同的 div 元素，每個元素包含不同的文字。我們對每個 div 元素的文字使用了不同的裝飾樣式。在輸出中，使用者可以觀察到 ‘underline’、‘overline’ 和 ‘line-through’ 文字裝飾樣式之間的區別。
<html>
<head>
<style>
.underline {
color: grey;
text-decoration: solid underline yellow 2px;
font-size: 1.5rem;
}
.overline {
text-decoration: solid overline yellow 3px;
font-size: 1.5rem;
}
.strikethrough {
text-decoration: solid line-through yellow 2px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h3> Setting the strikethrough, underline, and overline to the text using the 'text-decoration' property in CSS </h3>
<div class = "underline"> underline </div>
<div class = "overline"> overline </div>
<div class = "strikethrough"> strike through </div>
</body>
</html>
結論
本教程教使用者如何使用 ‘text-decoration’ CSS 屬性來裝飾文字。使用者可以根據需要使用不同的值來以不同的方式裝飾文字。
237 次瀏覽
