CSS - 文本

你好，未來的網頁開發者！今天，我們將進入CSS文本屬性的奇妙世界。作為你們親切鄰居的電腦老師，我非常興奮能夠帶領你們走這段旅程。記住，就像學騎自行車一樣，掌握CSS需要練習，但我保證這會很有趣！

CSS 文本 - 文本顏色

讓我們從一些彩色的事情開始吧！在CSS中，我們可以使用color屬性輕鬆地改變文本的顏色。這就像有一支神奇的畫筆為你的文字上色！

p {
color: blue;
}

這一行簡單的代碼會將所有段落文本變為藍色。但是，還有更多！你可以使用顏色名稱、十六進制代碼或RGB值：

h1 {
color: #FF5733; /* 濃烈橙色的十六進制代碼 */
}

span {
color: rgb(50, 205, 50); /* 酸橙綠的RGB值 */
}

CSS 文本 - 文本對齊

接下來，讓我們來討論文本對齊。這就像在書架上排列書籍一樣 - 你可以把它們放在左邊、右邊，或者漂亮地居中。

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

justify值特別有興趣。它會將文本均勻地分布在行上，就像報紙排列他們的列一樣。

CSS 文本 - 垂直對齊

垂直對齊有點複雜，但別擔心！這個屬性最常用於行內或表格單元格元素。

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

這個屬性可以接受像top、middle、bottom、sub、super，甚至還有特定的長度值！

CSS 文本 - 方向

在我們的全球村莊中，我們經常需要處理從右到左閱讀的語言。這就是direction屬性派上用場的地方：

.arabic-text {
direction: rtl; /* 從右到左 */
}

.english-text {
direction: ltr; /* 從左到右 */
}

CSS 文本 - 文本裝飾

想要為你的文本添加一些花巧嗎？文本裝飾就是你的好朋友！這就像為你的文字添加珠寶一樣。

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

專業提示：使用text-decoration: none;來移除鏈接的默認下劃線！

CSS 文本 - 文本裝飾跳過

這個屬性決定了在應用文本裝飾時應該跳過文本的哪些部分。

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

這將會下劃線文本，但會跳過空格，創造出一種更精緻的樣式。

CSS 文本 - 文本裝飾跳過墨水

這個很有趣！它決定了文本裝飾應該畫在"墨水"（即文本本身）之上還是之下。

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

使用auto，瀏覽器會智能地跳過像'g'或'y'這樣字母的下降部分。

CSS 文本 - 文本轉換

想要大聲喊出全部大寫，或者輕聲低語小寫？文本轉換是你的不二選擇！

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

capitalize值特別厲害 - 它會將每個單詞的首字母轉換為大寫。

CSS 文本 - 文本強調

文本強調允許你為文本添加強調標記。這就像在文本上方或下方添加小點或圓圈。

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

這會在每個字符上方和右方添加填充的圓圈。

CSS 文本 - 文本縮進

記得上次你的老師讓你縮進每段的第一行嗎？CSS可以自動做到這點！

p {
text-indent: 50px;
}

這會將每個段落的 第一行縮進50像素。

CSS 文本 - 字母間距

字母間距讓你可以調整字符之間的空間。這就像給你的字母一點個人空間！

h1 {
letter-spacing: 5px;
}

這會在標題的每個字母之間添加5像素的空間。

CSS 文本 - 詞間距

與字母間距類似，但適用於整個單詞：

p {
word-spacing: 10px;
}

這會在每個單詞之間添加10像素的額外空間。

CSS 文本 - 白空間

white-space屬性決定了元素內部的白空間如何被處理。

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrap防止文本折行到下一行，pre保留HTML中寫入的白空間，而pre-wrap保留白空間但允許折行。

CSS 文本 - 白空間塌陷

這個屬性實際上是我們剛才討論的white-space屬性的一部分。它決定了白空間如何塌陷。

CSS 文本 - 文本陰影

想要為你的文本添加一點深度嗎？文本陰影來幫助你了！

h1 {
text-shadow: 2px 2px 5px red;
}

這會在標題上添加一個紅色陰影，位置是向右2像素，向下2像素，並有5像素的模糊。

CSS 文本 - 行折行

line-break屬性指定如何在單詞內折行。

p {
line-break: strict;
}

這會實施更严格的折行規則。

CSS 文本 - 詞折行

與line-break類似，但適用於行尾的詞：

p {
word-break: break-all;
}

這允許在任何字符處折行。

CSS 文本 - 相關屬性

這裡是我們討論過的所有屬性的快速參考表：

屬性	描述
color	設置文本顏色
text-align	指定文本的水平對齊方式
vertical-align	設置行內或表格單元格框的垂直對齊
direction	指定文本方向/書寫方向
text-decoration	指定添加到文本的裝飾
text-decoration-skip	指定文本裝飾應跳過元素內容的哪些部分
text-decoration-skip-ink	指定當文本裝飾經過字形的上升和下降部分時如何繪製
text-transform	控制文本的大小寫
text-emphasis	對文本應用強調標記
text-indent	指定文本塊中第一行的縮進
letter-spacing	增加或減少文本字符之間的間距
word-spacing	增加或減少單詞之間的白空間
white-space	指定元素內部的白空間如何被處理
text-shadow	為文本添加陰影
line-break	指定如何在單詞內折行
word-break	指定行尾的詞的折行規則

就是这样！你现在拥有了以无数方式样式化文本的知识。记住，掌握CSS的关键是练习。所以，去实验，创造美丽、可读的网页。快乐编码！

Credits: Image by storyset