2016年2月18日 星期四

CSS簡寫 CSS Shorthand



以下是簡寫的範例:

margin: 10px 9px 8px 7px;
padding: 10px 9px 8px 7px;
順序是:margin-top | margin-right | margin-bottom | margin-left。
padding的順序也跟margin相同。

font: italic small-caps bold 12px/20px Verdana;
順序是:font-style | font-variant | font-weight | font-size | line-height | font-family
font-size和font-family需同時存在才能寫簡寫。

background: #fff url(bg.gif) no-repeat fixed left top;
順序是:background-color | background-image | background-repeat | background-attachment | background-position。
background比較特殊的地方是沒有規定特定的特性質,可以只設定其中一個,而忽略其他的特性。但是如果沒有設,就會變成預設值,所以要設定background的時候要注意,可能因為預設值而不小心覆蓋掉其他的設定。

border: 1px solid #000;
順序是:border-width | border-style | border-color。
這樣的書寫就把四個邊都統一成一種寫法,如果上、右、下、左需要不同的樣式的話就再另外書寫成border-top | border-right | border-bottom | border-left。

list-style: disc url(bg.gif) outside;
list和background一樣,不一定要把全部屬性書寫出來,這邊的url也跟background一樣都是不加引號的,如果有需要用到背景圖的時候要注意。

outline: 1px dotted #fff;
outline的簡寫是跟border一樣的,但是因為並非所有瀏覽器都有支援,所以使用並不多,最常使用的情況是在沒有reset的頁面,設定outline: 0;,這是為了消掉Firefox的連結點了周圍會出現的虛線框。

color: #000;
顏色的簡寫很簡單,將原本6碼的顏色代碼兩兩一組,如果三組裡面的代碼都兩兩彼此相同,便可縮寫成3碼的簡寫。如#336699可以寫成#369,#ddeeff可以寫成#def,但是如果其中一組沒有兩兩彼此相同,那就得維持6碼的寫法。 如#334599只能維持6碼的寫法,這是沒辦法簡寫的,所以顏色的縮寫只有6碼和3碼這兩種而已。

margin: 0;
CSS的單位值有pt、px、em、cm、ex…很多種,但是當數值是0的時候,這些單位值就應該要省略,因為單位對0來說是沒有意義的。

熱門文章