码迷,mamicode.com
首页 > Web开发 > 详细

css中background复合属性详解

时间:2018-08-07 16:47:13      阅读:791      评论:0      收藏:0      [点我收藏+]

标签:最好   orange   ==   ORC   new   意思   这不   图片   注意   

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

css中background复合属性详解

标签:最好   orange   ==   ORC   new   意思   这不   图片   注意   

原文地址:https://www.cnblogs.com/sui776265233/p/9437762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!