也許你是一個初學者，也許你是一個有一點經驗的菜鳥，也許你是一個經驗豐富的高手。曾幾何時，你找工作的時候是不是經常會發現要求里許許多多的“精通”字樣。精通這個精通那個；我想每個人對精通的理解都不一樣。精通的字面意思是：透徹理解並能熟練掌握！在CSS里，能達到這個境界的，我想沒有三五年經驗很難吧。希望下面這些CSS屬性能讓你向精通更靠近一些。
一.CSS Pseudo-Classes 偽類
1.Selector : hover { sRules }
設置對象在其鼠標懸停時的樣式表屬性。
在CSS1中此偽類僅可用於a對象。且對於無href屬性（特性）的a對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。
2.Selector : active { sRules }
設置對象在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式表屬性。
在CSS1中此偽類僅可用於a對象。且對於無href屬性（特性）的a對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。並且:active狀態可以和:link以及:visited狀態同時
發生。
3.Selector : focus { sRules }
設置對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式表屬性。
如果您使用過谷歌的產品，你可能會發現，每一個動作都會有比較明顯的響應。比如鼠標移入移除，點擊，獲得焦點時都有不同的顯示樣式；這些都可以使用以上三個CSS偽類來實現。可能大家
平時在鏈接（<A>標簽）上使用偽類比較多，其實很多標簽都可以使用哦，你不妨試試。
4.Selector : first-letter { sRules }
設置對象內的第一個字符的樣式表屬性。
此偽對象僅作用於塊對象。內聯對象要使用該偽對象，必須先設定對象的height或width屬性，或者設定position屬性為absolute，或者設定display屬性為block。
當你想加強每一段中的第一個字符時，這個CSS屬性特別有用。
5.Selector : first-line { sRules }
設置對象內的第一行的樣式表屬性。
此偽對象僅作用於塊對象。內聯對象要使用該偽對象，必須先設定對象的height或width屬性，或者設定position屬性為absolute，或者設定display屬性為block。
這個和first-letter類似的用法，不同的是，這個指定的第一行。
6.Selector1 Selector2 : first-child { sRules }
設置對象（Selector1）的第一個子對象（Selector2）的樣式表屬性。
我覺得這個CSS屬性最有用的地方就在於，一個標簽內擁有很多相同的子標簽，我們想給第一個子標簽設定不同樣式時，特別有用。
比如下面這個標簽：<div><span>標簽一</span><span>標簽二</span><span>標簽三</span><span>標簽四</span></div>
7.Selector : lang { sRules }
設置對象使用特殊語言的內容樣式表屬性。
這個可以對不同的語言定義特殊的規則，我測試了一下，似乎只有q(<q lang="en">Hello...</q>)這個標簽有效果。
8.Selector : before { sRules }
用來和content屬性一起使用，設置在對象前（依據對象樹的邏輯結構）發生的內容。
9.Selector : after { sRules }
用來和content屬性一起使用，設置在對象后（依據對象樹的邏輯結構）發生的內容。
before和after兩個偽類的用處還是蠻大的；比如我們可以在每個鏈接后面顯示一個圖標，在所有的郵箱前面顯示文字說明；更多的用處就需要大家自己去挖掘了。
二.規則
1.@font-face { font-family : name ; src : url( url ) ; sRules }
name : 字體名稱
url : 使用絕對或相對地址指定OpenType字體
sRules : 樣式表定義
設置嵌入HTML文檔的字體。
嵌入HTML文檔的字體是指將OpenType字體（壓縮的TrueType字體）文件映射到客戶端系統，用來提供HTML文檔使用該字體，或取代客戶端系統已有的同名字體。
當你想使用一個很漂亮但是非系統字體時，這個屬性非常有用；它可以將字體下載到用戶的電腦上。
2.@media sMedia { sRules }
sMedia : 指定設備名稱。
sRules : 樣式表定義
指定樣式表規則用於指定的設備類型。請參閱link對象的media屬性（特性）。
當你的網頁要為多種設備定制顯示樣式時特別有用。
三.其他屬性
1.clip : auto | rect ( number number number number )
auto : 對象無剪切
rect ( number number number number ) : 依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值，其中任一數值都可用auto替換，即此邊不剪切
檢索或設置對象的可視區域。區域外的部分是透明的。
必須將position的值設為absolute，此屬性方可使用。
當我們要對某一區域進行裁剪時，特別有用；比如我們想只顯示圖片或文字的一部分。
2.text-indent : length
length : 百分比數字|由浮點數字和單位標識符組成的長度值，允許為負值。請參閱長度單位
檢索或設置對象中的文本的縮進。
在被另一個對象（如）斷開的對象內不能應用本屬性。
當你想在每一段進行縮進顯示時，這個屬性特別有用；從今天開始不要再使用空格了哦。
3.letter-spacing : normal | length
normal : 默認間隔
length : 由浮點數字和單位標識符組成的長度值，允許為負值。請參閱長度單位
檢索或設置對象中的文字之間的間隔。
該屬性將指定的間隔添加到每個文字之后，但最后一個字將被排除在外。
有的時候我們想要文字之間的間隔大一些，尤其是在閱讀文章時，這樣可以保護讀者的眼睛，讓讀者不至於很快的出現眼疲勞。
4.text-transform : none | capitalize | uppercase | lowercase
none : 無轉換發生
capitalize : 將每個單詞的第一個字母轉換成大寫，其余無轉換發生
uppercase : 轉換成大寫
lowercase : 轉換成小寫
檢索或設置對象中的文本的大小寫。
這個屬性可以幫我們快速的設置字母的大小寫，似乎還是蠻有用的。
以上CSS並沒有在所有瀏覽器的所有版本中經過測試，如果你要使用在正式的項目中，我建議你可以先對你需要兼容的瀏覽器和版本進行有效測試。
如果這篇文章有幫到你，請你推薦一下吧，多給我一些動力；如果有寫的不對或有更好的建議和補充，也請你留下寶貴的文字。
點擊這里下載我對這些樣式進行測試的文件。