必須掌握的CSS文字樣式

介紹幾個文字樣式，感興趣的小夥伴們可以看一下。

文字大小： |xx-small|x-small|small|medium|large|x-large|xx-lager|

　　　　　: large small 相對父元素的大或者小

文字字型：

font-family:"宋體"，"微軟雅黑";//解決多個系統相容性問題  escape("微軟雅黑")font-family:"%u5FAE%u8F6F%u96C5%u9ED1"  == font-family:"微軟雅黑"

字型系列

1. 襯線字型 serif

2. 無襯線字型 sans-serif
   //一般為了相容性都要加上當中的一個，避免當前系統沒有設定的字型

襯線字型

無襯線字型

字型粗細

font-weight:  normal(400)  | bold(700) | bolder | lighter |100 ~ 900

字型風格

font-style:  normal | italic(斜體，使用斜體樣式，字型如果沒有斜體樣式就正常顯示)  |oblique(強制斜體)

字間距

letter-specing : 數字可以是負數text-decoration: none  //取消底線word-specing : 數字  字間距//letter-spacing和word-spacing這兩個屬性都用來添加他們對應的元素中的空白。letter-spacing添加字母之間的空白，而word-spacing添加每個單詞之間的空白。請大家注意，word-spacing對中文無效。（其實添加空格也可以有效）

行高

行高  ==  0.5倍行距 + 文字Top + 文字Bottom + 0.5倍行距  注意有順序，至上而下的另一個定義: 兩段文字之間 兩條基準的距離1.5em = 1.5 = 150%

文本修飾

text-decoration = none;  //刪掉修飾text-decoration=underline //底線text-decoration=line-through  //刪除線text-decoration: overline//頂線

空白處理

white-space :normal   //超過p邊界寬度就換行white-space :nowarp           // 只要沒遇到分行符號，一直往後放white-space: pre    //  html原格式顯示（計算原始碼中的空格和換行）

自動換行

word-break :normal //不打斷單詞word-break :break-all;  //打斷單詞word-break: keep-all  // 不允許換行，除了遇到空格，換行

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程