# 复合属性也称为 "shortcut" property (快捷属性),它作用是为了简化代码,提高页面运行的效率。

# 下面的内容会介绍 2 个比较常用的复合属性 "font" 和 "background" 。

==========================================================

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