CSS代碼縮寫

1、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 應用斜槓鏈接在一塊兒。