background(css複合寫法)

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

單個屬性的寫法

.sample1 {
/*背景顏色*/
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; } ，瀏覽器雖然能正確解釋，但這不是規範的寫法。