css複合屬性的寫法

==========================================================
1. 背景－background
==========================================================

單個屬性的寫法

.sample1 {
background-color: #CCCCCC;   /*背景顏色*/
background-image: url(sample.gif);   /*背景圖片*/
background-repeat: no-repeat;   /*平鋪(?)*/
background-attachment: fixed;   /*隨文本滾動(?),很少用到*/
background-position: center center;   /*背景圖片位置*/
}

複合屬性的寫法

書寫格式
background : background-color background-image background-repeat background-attachment background-position;

預設值
background: transparent none repeat scroll 0% 0%;

預設值(中文意思)
background: 透明 / 無背景圖片 / 平鋪 / 背景圖片隨文本滾動(不理解的一定要自己動手試一下) / 位於元素左上方

按照以上的方法，將 .sample1 改成 .sample2，可以得到相同的樣式。
.sample2 {
background: #CCCCCC url(sample.gif) no-repeat fixed center center;
}

background的書寫順序是比較容易理解的。

1. 首先要有背景顏色 background-color ，在背景圖片（如果有設定）未載入之前，先顯示的是背景顏色。預設為 transparent（透明，即應用父元素或 BODY 的背景設定），可以省略，不過在應用一些JS事件時最好將它寫上，以示規範；

2. 接下來就是背景圖片 background-image 。如果沒有此項，那麼後面的項就沒有任何意義了；

3. 是否平鋪 background-repeat 要寫在 background-position 之前，很容易理解，如果此項設定了 repeat （鋪滿整個元素），那麼 position 設定就基本失去作用了；

4. fixed 一般用在 body 上，其他地方不大見到；

5. background-position：有2個值，垂直位置和水平位置。按代碼寫法是沒有順序的：比如說背景圖片位於元素的右下角，可以寫成 bottom right ，也可以寫成 right bottom ；如果按百分比寫法是有順序的：比如 20% 30% ，第1個百分比表示水平位置，第2個百分比表示垂直位置。有意思的是這裡的垂直置中是 center 而不是 middle 。你可以設定一個 center 表示圖片的置中，相當於 center center 或者 50% 50% 。

==========================================================
2. 字型－font
==========================================================

單個屬性的寫法，這裡只列出最常用的3個字型屬性。

.sample3 {
font-weight: bold;
font-size: 12px;
font-family: Verdana;
}

複合屬性的寫法

書寫格式(僅css1)
font : font-style font-variant font-weight font-size line-height font-family;

預設值
font: normal normal normal medium normal "Times New Roman" ;

所以上面的.sample3可以寫成這樣
.sample4 {
font: bold 12px Verdana;
}

大家可能會對這個寫法感到陌生，因為font這個複合屬性很少看到，源於它比較嚴苛的書寫要求。

1. font屬性內必須有 font-size 和 font-family 這2項值。如果少了一項，即便將其他字型屬性都寫上也沒用。
如果是這樣 font: bold 12px;  或者 font: bold Verdana; 在絕大部分的瀏覽器裡都會表現異常。

2. 書寫順序必須嚴格按照上面提到的順序。
如果寫成 font: 12px bold Verdana; 或者 font: Verdana 12px bold，瀏覽器就不會正確解釋。

3. 這裡的12px是表示字型大小，並非行高。
如果要將這兩項同時表現，必須這樣寫：font: bold 12px/2.0em Verdana; ，12px表示字型大小，2.0em(就是12*2.0px)表示行高。

==========================================================
最後要注意的一點：

如果只有一項值，最好不要應用複合屬性。以免帶來不必要的麻煩。

比如 .sample6 {font-weight: bold} ，如果寫成 .sample6 {font: bold} 就沒任何作用了。

再舉個列子，比如 .sampl5 {background-color: #CCCCCC; } ，如果寫成 .sampl5 {background: #CCCCCC; } ，瀏覽器雖然能正確解釋，但這不是規範的寫法。