css_06 | CSS——CSS 給文本加樣式：② 文本屬性

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

---

前言： 做爲上一篇《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;
}
複製代碼

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;
}
複製代碼

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 怎樣給文本加樣式。但須要注意的是，與文本相關的屬性還有不少不少，實際工做中要實現一個效果，也能夠有不少不一樣的方法。那怎樣以不變應萬變呢？咱們在接下來的兩篇文章中將獲得一些靈感。

祝好，qdywxs ♥ you！