一、CSS的縮寫

（一）padding和margin

順序：順時針

1. 上 右 下 左 padding: 10px 20px 30px 40px

2. 上 右左 下 padding: 10px 20px 30px

3. 上下 右左 padding: 10px 20px

4. 上右下左 padding: 10px

（二）font

順序：

font: 
    font-style（規定規定字體樣式）
    font-variant(規定是否以小型大寫字母的字體顯示文本)
    font-weight(規定字體粗細)
    font-size（規定字體大小）/ line-height（規定行高）
    font-family（規定字體族）

如font: italic small-caps 700 12px/1.5 "微軟雅黑"

注意：

1. 使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性
2. 簡寫時，font-size和line-height直接一樣要用斜杠，不能分開寫；
3. 如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用缺省值

   font屬性詳解

（三）background

在CSS2.1里，background屬性的簡寫方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position。從CSS3開始，又增加了3個新的屬性值，加起來一共8個。
順序：

background:
    background-color（規定背景顏色）
    background-image（規定背景圖片）
    background-repeat（設置重復背景圖像）
    background-attachment（規定背景圖像是否固定或者隨著頁面的其余部分滾動）
    background-position（規定背景圖像的位置）/ background-size（規定背景圖片的尺寸）
    background-origin（背景圖片的定位區域）
    background-clip（背景的繪制區域）;

如background: #229 url(maomao.png) no-repeat 15px center/20px content-box

background 屬性詳解

（四）animation動畫

順序：

animation:
    animation-name（規定需要綁定到選擇器的 keyframe 名稱）
    animation-duration（規定完成動畫所花費的時間，以秒或毫秒計）
    animation-timing-function（規定動畫的速度曲線）
    animation-delay（規定在動畫開始之前的延遲）
    animation-iteration-count（規定動畫應該播放的次數）
    animation-direction（規定是否應該輪流反向播放動畫）

如animation: maomao 10s ease-in-out 3s 2 alternate

animation 動畫屬性詳解

（五）transition

順序：

transition:
    transition-property（規定設置過渡效果的 CSS 屬性的名稱）
    transition-duration（規定完成過渡效果需要多少秒或毫秒）
    transition-timing-function（規定速度效果的速度曲線）
    transition-delay（定義過渡效果何時開始）

如transition: width 10s ease-in-out 3s

transition 過渡屬性詳解

二、去掉小數點前的“0”

如font-size:0.8em寫為font-size:.8em
好處是精簡代碼

三、id應按需使用，不能濫用

id在javascript中是唯一的，而使用class類選擇器卻可以重復使用，另外id的優先級優先與class，所以id應該按需使用，而不能濫用。

四、連字符CSS選擇器命名規范

1. 長名稱或詞組可以使用“-”中橫線來為選擇器命名
2. 為了區分JavaScript變量命名（JS變量命名是用“”）所以不建議使用“”下劃線來命名CSS選擇器

五、16進制顏色代碼縮寫

如color：#ffffff寫為color：#fff
好處是精簡代碼

喜歡的小伙伴們就打賞下（嘿嘿）

上期回顧：CSS回顧復習二（CSS書寫規范、順序和命名規則——CSS書寫順序與命名規則）

下期內容：CSS新手學習一（語法、注釋、選擇器）