09-CSS3中經常使用的樣式【基本文本和字體樣式】

摘要：爲了使你的網頁看上去更美觀，在這裏你將會看到一些CSS3中經常使用到的樣式。很是適合初學者！大鵬一日同風起，扶搖直上九萬里！一塊兒學習，一塊兒進步！

---

一、字體大小的單位

px（像素）：這是一個絕對單位；
em：1em至關於當前父元素中的大寫字母M的寬度；
rem：效果跟em差很少，1rem等於HTML 中根元素的字體大小，而非父元素，支持新版本的瀏覽器，若用舊版本（IE8及其如下版本）的仍是建議用前兩種；

二、字體樣式

font-style：normal(普通文本)/italic（斜體）；
font-weight：nomal(普通字體)/bold（加粗）；
text-transform：容許你設置轉換的字體；

• none（防止任何轉型）
• uppercase（將全部文本轉爲大寫）
• lowercase（將全部文本轉爲小寫）
• capitalize（全部單詞首字母大寫）
• full-width（全部字形轉爲全角）

text-decoration：設置/取消字體上的文本裝飾

• none（取消已存在的任何文本裝飾）
• underline（文本下劃線）
• overline（文本上劃線）
• line-through（刪除線）

注：按照line、style、color容許設置多個值。

三、文字陰影

text-shdow：4px 4px 5px red;

• 屬性1：陰影與原始文本的水平偏移；
• 屬性2：陰影與原始文本的垂直偏移；
• 屬性3：模糊半徑，值越高意味着陰影越普遍；
• 屬性4：陰影的基礎顏色；

注：正偏移向右移動；負偏移向左移動。

試一試多種陰影

text-shadow:-1px -px 1px #aaa,
  0px 4px 1px rgba(0,0,0,0.5),
  4px 4px 5px rgba(0,0,0,0.7),
  0px 0px 7px rgba(0,0,0,0.4);

效果圖以下：

四、文本佈局

text-align：控制文本如何和它所在的盒子對齊

• left：左對齊；
• right：右對齊；
• center：居中文字；
• justify：使文本展開，使全部文本行的寬度相同，這個屬性要謹慎使用。

line-height：設置文本每行之間的高，能夠設置無單位的值，line-height: 1.5;表示文本行高設置爲字體高度的1.5倍。
letter-spacing:設置字母與字母之間的間距；
word-spacing：設置單詞與單詞之間的間距；

p::first-line{
    letter-spacing: 2px;
    word-spacing: 4px;
}

以下圖，首句是設置了樣式的，末句是沒有設置樣式的。

五、再來看一些比較重要的屬性

Font樣式
font-variant:在小型大寫字母和普通文本之間切換。
font-kerning：開啓/關閉間距選項；
font-feature-settings：開啓/關閉不一樣的OpenType字體特性；
font-variant-alternates：控制給定的自定義字體的替代字形的使用；
font-variant-caps：控制大寫字母替代字形的使用；
...
文本佈局樣式
text-indent：指定文本內容的第一行前面應留出多少的空間；
text-overflow：定義如何向用戶表示存在被隱藏的溢出內容；
white-space：定義如何處理元素內部的空白與換行；
word-break：指定是否能在單詞內部換行；
...

六、Font簡寫

按照如下順序：font-style，,font-variant,font-weight,font-stretch,font-size,line-height,font-family。
其中，font-style，font-family必須指定；font-size和line-height之間必須放一個正斜槓。
一個完整例子以下：

font: italic normal bold normal 3em/1.5 Helvetica,Arial,san-serif;

以上均是參考最權威的MDN Web Docs，總結出來的比較重要的知識點，與君共勉。不妥之處，評論區歡迎您！