background组合写法_css中background复合属性详解
==========================================================
单个属性的写法
.sample1 {
fontweight属性bold
/*背景颜⾊*/
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; } ，浏览器虽然能正确解释，但这不是规范的写法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。