如何使用CSS設計版式

在這篇文章中，我將介紹使用CSS來設計文字的方法，並使用以下屬性：

  • text-transform
  • text-decoration
  • text-align
  • vertical-align
  • line-height
  • text-indent
  • text-align-last
  • word-spacing
  • letter-spacing
  • text-shadow
  • white-space
  • tab-size
  • writing-mode
  • hyphens
  • text-orientation
  • direction
  • line-break
  • word-break
  • overflow-wrap

text-transform

此屬性可轉換元素的大小寫。

有四個有效值：

  • capitalize – 將每個單字的第一個字母轉為大寫
  • uppercase – 將所有文字轉為大寫
  • lowercase – 將所有文字轉為小寫
  • none – 禁用文字轉換，用於避免繼承此屬性

範例：

p {
 text-transform: uppercase;
}

text-decoration

此屬性用於對文字添加裝飾，包括：

  • underline – 添加底線
  • overline – 添加上劃線
  • line-through – 添加刪除線
  • blink – 添加閃爍效果
  • none – 無裝飾

範例：

p {
 text-decoration: underline;
}

您也可以設定裝飾的樣式和顏色。

範例：

p {
 text-decoration: underline dashed yellow;
}

有效的樣式值為 solid、double、dotted、dashed、wavy。

您可以將所有屬性寫在一行，或使用以下特定屬性：

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

範例：

p {
 text-decoration-line: underline;
 text-decoration-color: yellow;
 text-decoration-style: dashed;
}

text-align

默認情況下，text-align 的值爲 start，表示文本從包含它的箱子的 “start” 開始，原點是 (0, 0)。這表示在從左到右的語言中，它在左上角，在從右到左的語言中，它在右上角。

可能的值有： start、end、left、right、center、justify（在每行末尾保持一致的間距）：

p {
 text-align: right;
}

vertical-align

決定內聯元素的垂直對齊方式。

這個屬性有幾個值。首先，可以指定一個長度或百分比值。這些值用於將文本與父元素的基線對齊位置上下對齊（使用負值時）。

然後，我們有以下關鍵字：

  • baseline（默認值）–將基線與父元素的基線對齊
  • sub –使元素下標，模擬 sub HTML 元素的效果
  • super –使元素上標，模擬 sup HTML 元素的效果
  • top –將元素的頂部與行的頂部對齊
  • text-top –將元素的頂部與父元素字體的頂部對齊
  • middle –將元素的中間與父元素行的中間對齊
  • bottom –將元素底部與行的底部對齊
  • text-bottom –將元素底部與父元素字體的底部對齊

line-height

此屬性允許您更改行的高度。每行文本都有一定的字體高度，然後在行之間垂直添加額外的間距。這就是行高：

p {
 line-height: 0.9rem;
}

text-indent

將段落的第一行縮進一定長度或段落寬度的百分比：

p {
 text-indent: -10px;
}

text-align-last

默認情況下，段落的最後一行遵循 text-align 的值進行對齊。使用此屬性更改此行爲：

p {
 text-align-last: right;
}

word-spacing

修改每個單詞之間的間距。

可以使用 normal 關鍵字來重置繼承的值，也可以使用長度值：

p {
 word-spacing: 2px;
}

span {
 word-spacing: -0.2em;
}

letter-spacing

修改每個字母之間的間距。

可以使用 normal 關鍵字來重置繼承的值，也可以使用長度值：

p {
 letter-spacing: 0.2px;
}

span {
 letter-spacing: -0.2em;
}

text-shadow

對文本應用陰影。默認情況下，文本沒有陰影。

此屬性接受一個可選的顏色，以及一組值來設置：

  • 陰影與文本的 X 偏移量
  • 陰影與文本的 Y 偏移量
  • 模糊半徑

如果未指定顏色，則陰影將使用文本顏色。

範例：

p {
 text-shadow: 0.2px 2px;
}

span {
 text-shadow: yellow 0.2px 2px 3px;
}

white-space

設置CSS如何處理元素內的空格、換行符和制表符。

折疊空格的有效值爲：

  • normal – 折疊空格。當文本到達容器末尾時，添加新行
  • nowrap – 折疊空格。當文本到達容器末尾時，不換行，並且忽略添加到文本中的任何換行符
  • pre-line – 折疊空格。當文本到達容器末尾時，添加新行

保留空格的有效值爲：

  • pre – 保留空格。當文本到達容器末尾時，不換行，但保留添加到文本中的換行符
  • pre-wrap – 保留空格。當文本到達容器末尾時，添加新行

tab-size

設置制表符字符的寬度。默認值爲 8，您可以設置一個整數值以設置字符佔用的字符空間，或者使用長度值：

p {
 tab-size: 2;
}

span {
 tab-size: 4px;
}

writing-mode

定義文本是水平還是垂直排列，以及區塊在其上進行的方向。

可以使用以下值：

  • horizontal-tb（默認值）
  • vertical-rl – 將內容垂直排列。換行符位於前一行的左側
  • vertical-lr – 將內容垂直排列。換行符位於前一行的右側

hyphens

確定是否在達到新行時自動添加破折號。

有效值爲：

  • none（默認值）
  • manual – 只有在已經有可見破折號或隱藏破折號（特殊字符）時才添加破折號
  • auto – 當文字可能有破折號時添加破折號

text-orientation

當 writing-mode 爲垂直模式時，確定文本的方向。

有效值爲：

  • mixed – 默認值，如果語言是垂直的（例如日語），則保留該方向，同時旋轉用西方語言書寫的文本
  • upright – 將所有文本設置爲垂直方向
  • sideways – 將所有文本設置爲水平方向

direction

設置文本的方向。有效值爲 ltr 和 rtl：

p {
 direction: rtl;
}

word-break

此屬性指定如何在單詞內斷行。

  • normal（默認值） – 文本只在單詞之間斷行，不在單詞內斷行
  • break-all – 瀏覽器可以在單詞內斷詞（但不添加破折號）
  • keep-all – 禁止自動換行。主要用於CJK（中日韓）文本。

談到CJK文本，屬性 line-break 用於確定文本的換行方式。我不是這些語言的專家，所以我不涉及這方面的討論。

overflow-wrap

如果單詞太長，無法放入一行中，則可以溢出容器。

此屬性也稱爲 word-wrap，雖然它是非標准的（但仍可作爲別名使用）

這是默認行爲（overflow-wrap: normal;）。

我們可以使用以下方式：

p {
 overflow-wrap: break-word;
}

在恰好適合行長度時斷詞，或者：

p {
 overflow-wrap: anywhere;
}

如果瀏覽器認爲在前面的某個位置有軟換行的機會，則不添加破折號。在任何情況下，都不添加破折號。

此屬性與 word-break 非常相似。對於西方語言，我們可能選擇使用 overflow-wrap，而對於非西方語言，則使用 word-break 有特殊處理。

tag: CSS, typography, text styling