css複合屬性的寫法

來源:互聯網
上載者:User
==========================================================
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; } ,瀏覽器雖然能正確解釋,但這不是規範的寫法。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.