HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(下).doc

HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(下) 背景属性 背景属性 属性 描述 background-color 背景颜色 background-image 背景图像 属性值:url(前背景图像的路径) background-repeat 背景图像是否重复 属性值为:repeat no-repeat repeat-x repeat-y background-position 背景图像的位置 属性值为 left right top bottom 或 px或百分比; 两个值：第一个值为 [top,center,bottom] 中三选一，而第二个值由 [left,center,right] 中三选一。 两个百分比：第一个百分比为 x-轴的百分比，第二个为 y-轴的百分比。 两个数：第一个数为 x-轴的位置，第二个数目为 y-轴的位置 background 复合属性 1. background-color 背景颜色 代码： !DOCTYPE html html head meta charset=UTF-8 title背景属性/title style type=text/css body{ font-size: 12px; font-family: 微软雅黑; background-color: #9E3F3F; } p{ background-color: #f0f0f0; line-height: 24px; } /style /head body h3唯美伤感/h3 p 人人都忙于自己的欢喜与悲伤，有时候习惯寂寞就好了。孤独的话说太多不被倾听更难过，给我个暂停键吧我真的累了。下面是小编为大家带来的一些感伤的qq个性签名短语。 /p p 得不到的终归是风，强留千百次终究会走。人人都忙于自己的欢喜与悲伤，有时候习惯寂寞就好了。孤独的话说太多不被倾听更难过，给我个暂停键吧我真的累了。 /p /body /html 页面效果 2. background-image、background-repeat、background-position经常配合使用 代码： !DOCTYPE html html head meta charset=UTF-8 title背景属性/title style type=text/css body{ font-size: 12px; font-family: 微软雅黑; } div{ background-color: #BECEEB; background-image: url(img/a.png); width: 500px; height: 150px; line-height: 24px; font-weight: bold; color: #fff; } /style /head body div 七星瓢虫是鞘翅目瓢虫科的捕食性昆虫，它的身体像半个圆球，头黑黑的翅膀是橘色的。触角很短，不太明显，他的脚在大大的翅膀底下，他的口器既有咀嚼食物的能力，因为它的翅膀有 /div /body /html 页面效果 还是上面的代码如果再给div添加background-repeat属性之后的效果 div{ background-color: #BECEEB; background-image: url(img/a.png); background-repeat: no-repeat; width: 500px; height: 150px; line-height: 24px; font-weight: bold; color: #fff; } div{ background-color: #BECEEB; background-image: url(img/a.png); background-repeat: repeat-x; width: 500px; height: 150px; line-height: 24px; font-weight: bold; color: #fff; } div{ background-color: #BECEEB; background-image: url(img/a.png); background-repeat: repeat-y; width: 500px; height: 150px; line-heigh