一、CSS代碼縮寫
CSS代碼縮寫的作用：便捷代碼輸入，減少CSS文件大小，使代碼更易讀。
盒模型代碼簡寫：主要包括內邊距（補白）、邊框、外邊距（邊界）三類。
從方向的屬性有：上、下、左、右。
從描述可以分為：顏色、大小和樣式。而內邊距和外邊距只有大小。
- 縮寫最后一個單詞，如：
div{
border-top-color：Red;
border-top-width：2px;
border-top-style： dotted;
}
可縮寫為：
div{ border-top：Red 2px dotted; }
這個沒有先后順序，只需壓縮成一句代碼即可。
- 方向屬性的壓縮，如：
div{
padding-top：1px;
padding-right：2px;
padding-bottom：3px;
padding-left：4px;
}
可縮寫為：
div {
padding：1px 2px 3px 4px;
}
以上4個屬性值的順序是固定的，按順時鍾的順序排列：頂部 一》 右側 一》 底部 一》 左側。如果僅定義部分屬性，則壓縮時應保留未定義屬性的預定義位置，並賦值為auto。
如果左右兩值相同，上下值不同，可以縮寫為：
div {
padding：1px 2px 3px;
}
如果左右方向值相同，上下方向值也相同，可以縮寫為：
div {
padding：1px 2px;
}
如果四個方向值都相同，可以縮寫為：
div { padding：1px; }
-
-
-
- 縮寫中間一個詞
-
-
如果前后綴相同，中間不同，也可以如下進行壓縮，如：
div {
broder-top-width：thim;
broder-right-width：thick;
broder-bottom-width：medium;
border-left-width：inherit;
}
可縮寫為：div { broder-width：thim thick medium inherit; }
列表和背景縮寫：遵循盒模型縮寫規律，可以復合屬性替代多個單項屬性，如：
#newsList {
list-style-type：circle;
list-style-image：url(star.gif);
list-style-position：inside;
}
可縮寫為：
#newsList {
list-style：circle url(star.gif) inside;
}
這三個值沒順序，當定義了多個單項屬性時，同樣可以壓縮。如：
#newsBg {
background-color：#FF99FF;
background-image：url(bg.gif);
background-position：left top;
background-repeat：repeat;
background-attachment：inherit;
}
可縮寫為：
#newsBg {
background：#FF99FF url(bg.gif) left top repeat inherit;
}
這些屬性值沒先后順序，也不管單項屬性有幾個可以用復合屬性壓縮來代替。
-
-
- 顏色值縮寫
-
如果每兩位的值相同，可以縮寫一半，如：
.bg {
background：#223344;
}
可以縮寫為：
.bg { background：#234; }
非法縮寫，如：
.bg {
background：#223456
}
不能縮寫為：
.bg {
background：#23456;
}
字體縮寫：字體屬性比較多，縮寫規則也有點特殊，如：
p {
font-style：italic;
font-variant：small-caps;
font-weight：bold;
font-size：1em;
line-height：1.6em;
font-family："Lucida Grande"，宋體，sans-serif;
}
可縮寫為：
p {
font：italic small-caps bold 1em/1.6em "Lucida Grande"，宋體，sans-serif;
}
注意事項：
如果僅定義部分屬性，同樣也可以縮寫，但要保證定義 font-size 和 font-family 兩個屬性值，且位置按順序排在值列表的最后。
另外， font-size 和 line-height 應用斜杠連接在一起。