CSS - 文字裝飾

上一頁
下一頁

text-decoration 屬性用於向內聯內容新增“裝飾”，例如文字下劃線、上劃線、刪除線和中劃線。

它是一個簡寫屬性，對應以下屬性：

  • text-decoration-line：設定裝飾線的型別（下劃線、刪除線或上劃線）。

  • text-decoration-color：設定文字裝飾的顏色。

  • text-decoration-style：設定文字裝飾的樣式（點狀、虛線、實線、波浪線、雙線等）。

  • text-decoration-thickness：設定文字裝飾的粗細。

文字裝飾線

text-decoration-line 屬性用於向文字新增裝飾線，例如下劃線。

可能的值

  • none − 不應向內聯文字新增任何裝飾。

  • underline − 在內聯文字下方繪製下劃線。

  • overline − 在內聯文字上方繪製上劃線。

  • line-through − 應在內聯文字中間繪製一條線。

  • blink − 內聯文字應閃爍，類似於 Netscape 引入的 BLINK 元素。

應用於

所有 HTML 元素。

DOM 語法

object.style.textDecorationLine = "underline";

CSS text-decoration - 使用 text-decoration-line 屬性

<html>
<head>
</head>
<body>
   <h2>Text Decoration Line</h2>
      <p style="text-decoration-line: overline;">Overline text decoration.</p>
      <p style="text-decoration-line: line-through;">Line-through text decoration.</p>
      <p style="text-decoration-line: underline;">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-color 屬性

text-decoration-color 屬性用於向文字裝飾線新增顏色。要使用此屬性，需要指定 text-decoration-line。

可能的值

  • 關鍵字：作為關鍵字的顏色名稱。例如 = red。

  • 十六進位制：十六進位制值。例如 = #00ffff。

  • rgb rgb 值。例如 = rgb(255,200,100)。

應用於

所有 HTML 元素。

DOM 語法

object.style.textDecorationColor = "#00ffff";

示例

讓我們來看一個例子

<html>
<head>
</head>
<body>
   <h2>Text Decoration Color</h2>
      <p style="text-decoration-line: overline; text-decoration-color: red">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-color: green">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-color: blue">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-style 屬性

text-decoration-style 屬性用於向文字裝飾線新增樣式。要使用此屬性，需要指定 text-decoration-line。

可能的值

  • solid

  • dotted

  • dashed

  • double

  • ridge

  • inset

  • outset

應用於

所有 HTML 元素。

DOM 語法

object.style.textDecorationStyle = "dotted";

示例

讓我們來看一個例子

<html>
<head>
</head>
<body>
   <h2>Text Decoration Style</h2>
      <p style="text-decoration-line: overline; text-decoration-style: dashed">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-style: solid">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-style: dotted">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-thickness 屬性

text-decoration-thickness 屬性用於向文字裝飾線新增粗細。要使用此屬性，需要指定 text-decoration-line。

可能的值

  • 長度：任何長度值（以 px、pt、in、cm 等表示）。

  • auto：瀏覽器選擇合適的寬度。

  • 百分比：將粗細指定為當前字型中 1em 的百分比。

應用於

所有 HTML 元素。

DOM 語法

object.style.textDecorationThickness = "5px";

示例

讓我們來看一個例子

<html>
<head>
</head>
<body>
   <h2>Text Decoration Thickness</h2>
      <p style="text-decoration-line: overline; text-decoration-thickness: 2px">Overline text decoration.</p>
      <p style="text-decoration-line: line-through; text-decoration-thickness: 1pt">Line-through text decoration.</p>
      <p style="text-decoration-line: underline; text-decoration-thickness: 0.25in">Underline text decoration.</p>
</body>
</html>

CSS text-decoration - 使用 text-decoration-offset 屬性

text-underline-offset 屬性用於設定文字裝飾線與其原始位置的偏移距離。

text-underline-offset 屬性不是簡寫 text-decoration 的一部分。此屬性僅影響下劃線，而不影響 text-decoration-line 的其他值，例如刪除線或上劃線。

可能的值

  • auto：瀏覽器選擇合適的偏移量。

  • 長度：任何長度值（以 px、pt、in、cm 等表示）。

  • 百分比：將偏移量指定為當前字型中 1em 的百分比。

應用於

所有 HTML 元素。

DOM 語法

object.style.textUnderlineOffset = "2pt";

示例

讓我們來看一個例子

<html>
<head>
<style>
   p {
      padding: 10px;
   }
</style>
</head>
<body>
   <h2>Text Underline Offset</h2>
      <p style="text-decoration-line: underline; text-decoration-style: wavy; text-underline-offset: 1em;">Offset for underline.</p>
      <p style="text-decoration-line: overline; text-decoration-style: dotted; text-underline-offset: 1in;">No offset for overline.</p>   
</body>
</html>

CSS text-decoration - 使用 text-underline-position 屬性

text-underline-position 屬性用於設定文字裝飾線（僅限下劃線）與其原始位置的位置。

text-underline-offset 屬性不是簡寫 text-decoration 的一部分。此屬性僅影響下劃線，而不影響 text-decoration-line 的其他值，例如刪除線或上劃線。

可能的值

  • auto：瀏覽器選擇合適的位置，位於或低於文字基線。

  • under：將線條放在基線下方。

  • left：將線條放在左側（對於垂直書寫模式）；以及下方（對於水平書寫模式）。

  • right：將線條放在右側（對於垂直書寫模式）；以及下方（對於水平書寫模式）。

  • under left：將線條放在基線左側下方。

  • right under：將線條放在基線右側下方。

應用於

所有 HTML 元素。

DOM 語法

object.style.textUnderlinePosition = "under";

示例

讓我們來看一個例子

<html>
<head>
</head>
<body>
   <h2>Text Underline Position</h2>
      <p style="text-decoration-line: underline; text-underline-position: under;">Position of line under the baseline.</p>
</body>
</html>
列印頁面
上一頁
下一頁
廣告