Articles
CSS 簡介
與文本相關的CSS屬性

與文本相關的CSS屬性

本文說明了與文本相關的 CSS 屬性。

您可以學習如何使用與編寫 text-align、text-decoration 和 text-transform 屬性。

YouTube Video

建立用於預覽的 HTML

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

排版（文本相關）

text-align 屬性 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align 是 CSS 中用於指定文本和內聯元素水平對齊方式的屬性。通常用於將段落或標題文本對齊到左、右或中間。它在網頁佈局和文本格式中起著重要作用。

text-align 的主要取值

left (左對齊) 
1p {
2    text-align: left;
3}
  • left 將文本對齊到左側（這是許多語言的默認對齊方式）。
right (右對齊) 
1p {
2    text-align: right;
3}
  • right 將文本對齊到右側。特別適用於從右到左書寫的語言，如阿拉伯語和希伯來語。
center (居中對齊) 
1p {
2    text-align: center;
3}
  • center 將文本對齊到中間。經常用於標題和標頭。
justify (兩端對齊) 
1p {
2    text-align: justify;
3}
  • justify 將行的左邊和右邊邊緣均等對齊，呈現整齊的對齊效果。用於報紙和雜誌等佈局設計。
start (起始對齊) 
1p {
2    text-align: start;
3}
  • start 根據起始位置對齊文本。對於從左到右書寫的語言，其效果與左對齊相同。
end (結束對齊) 
1p {
2    text-align: end;
3}
  • end 根據結尾位置對齊文本。對於從左到右書寫的語言，其效果與右對齊相同。

text-align 使用示例

使用居中對齊的標題
  • 居中對齊通常用於網頁和文件的標題。效果美觀，並帶來視覺上平衡的設計。
段落的左右對齊
  • 文本段落通常默認為左對齊，但右對齊或居中對齊可能用於特定設計。
均勻分布文本的兩端對齊
  • 使用 justify 時，每行文本會均勻地與左邊和右邊邊緣對齊。這對於報紙或雜誌風格的佈局非常有用。

總結

  • text-align 是用於水平對齊文本或內聯元素的 CSS 屬性。
  • 它可以處理多種佈局，例如左對齊、右對齊、居中對齊和對齊分散。
  • 根據佈局和設計目標選擇合適的對齊方式是實現可讀性和美觀設計的關鍵。

讓我們用 text-align 有效地在您的設計中運用文本對齊。

text-decoration 屬性 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration 是一個 CSS 屬性，用於對文字應用底線、上線、刪除線或自訂樣式的線條。通過使用此屬性，您可以使文字樣式更加裝飾性或視覺強調。

說明：

  • text-decoration-underline 類會為文字顯示底線。
  • text-decoration-overline 類會在文字上方繪製一條線。
  • text-decoration-line-through 類會為文字應用刪除線。
  • text-decoration-custom-underline 類是一個自訂底線顏色、樣式和粗細的範例。

text-decoration 的關鍵值

none 
1p {
2    text-decoration: none;
3}
  • 指定 none 將移除文字上的所有裝飾。例如，用於移除鏈接中的底線時。
underline 
1p {
2    text-decoration: underline;
3}
  • 指定 underline 將在文字下方繪製底線。可用於鏈接或需要強調的部分。
overline 
1p {
2    text-decoration: overline;
3}
  • 指定 overline 將在文字上方繪製一條線。可用於改變外觀或進行特別裝飾。
line-through 
1p {
2    text-decoration: line-through;
3}
  • 指定 line-through 將在文字上繪製刪除線。用於指示修正。
blink（点滅）
  • blink 是一個使文字閃爍的值，但由於大多數瀏覽器已不再支持，所以實際上不被使用。

text-decoration 的進階設置

text-decoration 允許如下的詳細設定：

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • text-decoration-color 屬性讓您可以指定底線或刪除線的顏色。預設情況下，與文字顏色一致，但您可以選擇不同顏色來添加視覺效果。
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • text-decoration-style 屬性允許您指定裝飾線的樣式。其值包括以下內容：。
    • solid（預設，實線）
    • double（雙實線）
    • dotted（點線）
    • dashed（虛線）
    • wavy（波浪線）
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • text-decoration-thickness 屬性允許您指定裝飾線的粗細。例如，您可以使用 2px 或 0.1em 等單位來調整。

摘要：

  • text-decoration 是用於為文字添加裝飾線（例如底線或刪除線）的屬性。
  • 通過 text-decoration-color、text-decoration-style 和 text-decoration-thickness 可以實現更詳細的自訂。
  • 經常用於強調鏈接或重要文字，或者作為設計元素。

使用 text-decoration，您可以為文字添加細微的強調或裝飾。

text-transform 屬性 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform 是用於轉換文字大小寫的 CSS 屬性。此屬性允許您控制 HTML 中指定文本的顯示格式，自動轉換用戶輸入或現有文本的大小寫。

說明：

  • text-transform-none 類別使文本以原始形式顯示，不作任何改變。
  • text-transform-capitalize 類別將每個單詞的首字母轉換為大寫。
  • text-transform-uppercase 類別將整段文本轉換為大寫。
  • text-transform-lowercase 類別將整段文本轉換為小寫。

text-transform 的主要值

none 
1p {
2    text-transform: none;
3}
  • 指定 none 時，文本將保持不變。
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • 指定 capitalize 將每個單詞的首字母轉換為大寫。單詞邊界由空格或標點符號識別。
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • 指定 uppercase 將整段文本轉換為大寫。
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • 指定 lowercase 將整段文本轉換為小寫。
full-width
  • 指定 full-width 將文本轉換為全角字符。這通常用作處理漢字或假名時的一種特殊樣式，但很少有瀏覽器支持。

摘要：

  • text-transform 是一個便捷的 CSS 屬性，用於更改文本的大小寫。
  • 它通常用於為標題、導航菜單和表單文本創造視覺一致性。
  • 當您希望無論用戶輸入如何，都能以特定樣式顯示文本時，此屬性非常有用。

使用此屬性，您可以輕鬆操作文本，同時保持視覺一致性。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

字體相關的CSS屬性與文字間距有關的CSS屬性