css复合属性的写法

# 复合属性也称为 "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; } ，浏览器虽然能正确解释，但这不是规范的写法。