從零基礎到輕鬆就業 | CSS——CSS 給文本加樣式：② 文本屬性（ Ⅰ ）

原創：itsOli  @前端一萬小時

本文首發於公衆號「前端一萬小時」

本文版權歸做者全部，未經受權，請勿轉載！
複製代碼

---

前言： 做爲上一篇《從零基礎到輕鬆就業 | CSS——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: 值 ① 值 ② 值 ③ 值 ④;
}
複製代碼

這裏的「值」比較特別，它須要 4 個獨立的值來定義：

• 值 ①，指定陰影的基礎「顏色」；

• 值 ②，指定陰影與原始文本的水平偏移「距離」，這個值必須指定。距離的長度能夠使用大多數的 CSS 單位，但實際工做中用 px 最爲合適。正長度值向右偏移，負長度值向左偏移。

• 值 ③，指定陰影與原始文本的垂直偏移「距離」，這個值也必須指定。正長度值向下偏移，負長度值向上偏移。

• 值 ④，指定陰影的「模糊半徑」。更高的值意味着陰影分散得更普遍。這個值非必須指定，若是不指定此值，則默認爲 0，即沒有模糊。

💡例如：

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

下一篇咱們繼續講解「文本屬性」其餘知識點。

祝好，qdywxs ♥ you！