background 组合写法_css中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; } ，浏览器虽然能正确解释，但这不是规范的写法。