CSS——CSS 給文字加樣式：② 文字屬性

前端一萬小時發表於2019-04-18
CSS
本文推薦 PC 端閱讀~

本文同步更新於：
- 「公眾號：前端一萬小時」
- 「知乎：Oli's 前端一萬小時」
- 「語雀：前端一萬小時」

本文版權歸 “前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

前言： 作為上一篇《CSS 給文字加樣式——① 字型屬性》的兄弟文章，我們繼續逐一學習“文字屬性”怎樣給文字加樣式的。
對於“文字屬性”的學習，我們可以簡單分為：

對文字本身進行“小整形”：

  • 轉換一下文字的大小寫
  • 給這個文字加一些諸如“下劃線”、“上劃線”和“穿過文字的線”的裝飾
  • 給文字加些“陰影”

大整形：把文字放在最和諧、最養眼的位置——文字佈局。
這個就類似於我們用的 office 的 word 裡：首行縮排、左對齊、右對齊、居中、行高、行間距等等。

  • 首行縮排
  • 文字水平對齊（左對齊、右對齊、居中等）
  • 行高
  • 字母和字間距
  • 處理空白符
  • 其他

1 對文字本身進行“小整形”

1.1 轉換一下文字的大小寫

text-transform 屬性用於設定要轉換的字型。

p {
    text-transform: 值;
}

none        防止任何轉型。
uppercase   將所有文字轉為大寫。
lowercase   將所有文字轉為小寫。
capitalize  轉換所有單詞讓其首字母大寫。
full-width  將所有字形轉換成固定寬度的正方形，類似於等寬字型，允許對齊。主要用於：拉丁字元以及亞洲語言字形（如中文，日文，韓文）。
複製程式碼

1.2 給這個文字加一些諸如“下劃線”、“上劃線”和“穿過文字的線”的裝飾

text-decoration 屬性用於加一些諸如“下劃線”、“上劃線”和“穿過文字的線”的裝飾。

p {
    text-decoration: 值;
}



none          取消已經存在的任何文字裝飾。
underline     文字下劃線。
overline      文字上劃線。
line-through  穿過文字的線。 

注意：text-decoration 是一個縮寫形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 構成。
所以，我們在實際工作中可以使用這些屬性值的組合來實現一些效果。
複製程式碼

1.3 給文字加些“陰影”

text-shadow 屬性用於給文字加些“陰影”。

p {
    text-shadow: 值1 值2 值3 值4;
}
複製程式碼

這裡的“值”比較特別，它需要 4 個獨立的值來定義：

  • 值1，指定陰影的基礎“顏色”；
  • 值2，指定陰影與原始文字的水平偏移“距離”，這個值必須指定。距離的長度可以使用大多數的 CSS 單位，但實際工作中用 px 最為合適。正長度值向右偏移，負長度值向左偏移。
  • 值3，指定陰影與原始文字的垂直偏移“距離”，這個值也必須指定。正長度值向下偏移，負長度值向上偏移。
  • 值4，指定陰影的“模糊半徑” 。更高的值意味著陰影分散得更廣泛。這個值非必須指定，如果不指定此值，則預設為0，即沒有模糊。

?例如：

p {
    text-shadow: green 5px 5px 4px;
}
複製程式碼

CSS——CSS 給文字加樣式：② 文字屬性

2 大整形：把文字放在最和諧、最養眼的位置——文字佈局。

2.1 首行縮排

text-indent 屬性用於指定文字內容的第一行前面應該留出多少的水平空間。

2.2 文字水平對齊（左對齊、右對齊、居中等）

text-align 屬性用於控制文字如何和它所在的內容盒子水平對齊。

p {
    text-align: 值;
}

left       左對齊文字。
right      右對齊文字。
center     居中文字。

justify    使文字展開，改變單詞之間的距離，使所有文字行的寬度相同。
實際工作中使用時需要注意，特別是當應用於其中有很多長單詞的段落時。
如果我們要使用這個，我們應該考慮一起使用別的東西，比如 hyphens 來打破一些更長的詞語。
複製程式碼

?text-align-last 屬性用於定義一段文字內容的最後一行在被強制換行之前的對齊規則。

2.3 行高

line-height 屬性用於設定文字每行之間的高。

當行與行之間拉開空間，正文文字的閱讀體驗會更好。

“高”可以接受大多數單位，但實際工作中我們常常設定一個無單位的值作為乘數。用無單位的值乘以 font-size 來獲得 line-height 。推薦的行高大約是 1.5–2 ，即字型高度的 1.5-2 倍。

p {
    line-height: 1.5;
}
複製程式碼

下兩篇文章我們還會著重介紹屬性 line-height 和 vertical-align 之於“'行內盒子'格式化”的重點、難點問題。

2.4 字母和字間距

word-spacing 屬性用於修改“字”與“字”之間的間隔長度；

letter-spacing 屬性用於修改“字母、字元”與“字母、字元”之間間隔的長度。

“字”是指：任何非空白符字元組成的串，並由某種空白符包圍。例如：How are you 是 3 個字，9個字母。

p {
    word-spacing: 2em;
}

p {
    letter-spacing: 2em;
}
複製程式碼

CSS——CSS 給文字加樣式：② 文字屬性

2.5 處理空白符

white-space 屬性用於處理“字之間”和“文字之間”的空白符顯示方式。

在之前的關於 HTML 的文章中我們瞭解到，由於 HTML 對空白符有預設的處理方式——它會把所有空白符合併為一個空格，並且忽略元素中的換行。所以當時如果想對文字換行，我們需要用到標籤 <br> 。而在 CSS 中我們有以下方法：

p {
    white-space: 值;
}

normal     和預設的一樣，合併所有的空白符，並忽略換行符。
pre        瀏覽器不會合並空白符，也不會忽略換行符。
nowrap     不換行。
pre-wrap   瀏覽器不僅會保留空白符並保留換行符，還允許自動換行。
pre-line   瀏覽器會保留換行符，並允許自動換行，但是會合並空白符，這是與 pre-wrap 值的不同之處。
複製程式碼

2.6 其他

?對於文字屬性，我們可以學習、探索的還有很多。例如接下來的文章，我們在介紹“盒模型”時，還會接觸到 text-overflow 、white-space 與 overflow 的綜合運用（為了使文字在有限的盒子裡更優雅的展現——比如當文字過長時，我們可以使其顯示為 … ）。

3 上一篇的遺留問題—— font

複習上一篇：《CSS——CSS 給文字加樣式：① 字型屬性》

上一篇很多的“字型屬性”和這一篇學習的 line-height ，都可以通過 font 把它們設定在一個宣告裡。
順序為：

font-style → font-variant → font-weight → font-stretch → font-size → line-height → font-family

⚠️ 如果我們想用 font 來簡寫，那麼 font-size 和 font-family 是一定要指定的，其他的可有可沒有。
⚠️ font-size 和 line-height 屬性之間必須放一個正斜槓。

p {
    font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
}
複製程式碼

後記： 通過兩篇兄弟文章，我們大致掌握了 CSS 怎樣給文字加樣式。但需要注意的是，與文字相關的屬性還有很多很多，實際工作中要實現一個效果，也可以有很多不同的方法。那怎樣以不變應萬變呢？我們在接下來的兩篇文章中將得到一些靈感。

加油！

相關文章