CSS基础详解-3颜色和背景

《CSS基础详解-3颜色和背景》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第3章：CSS第3节颜色和背景内容回顾1.三种选择器：标签/类/ID选择器{属性：属性值；……}2.CSS样式表的引用方式：内部样式表、外部样式表、行内样式表3.设置字体、段落属性字体（font-family）、字号（font-size）、字体倾斜（font-style）、字体加粗（font-weight）调整字符/单词间距（letter-spacing/word-spacing）行高（line-height）添加文字修饰（text-decoration）文本对齐方式（text-align）、段落缩进（text-indent）本节内容

2、设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置颜色color:关键字

3、RGB值例：color:redcolor:#FF0000color:#F00常用颜色的关键字设置颜色实例Demo3-3-1poem.html设置颜色实例（续）动手做：将字体设为粉红色（#FF0080）Demo3-3-2color.html本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置页面背景颜色background-colo

4、r:关键字

5、RGB值

6、transparent例：background-color:purple;background-color:#6600CC实例代码动手做：将背景设为浅绿色（#A9E9D9）Demo3-3-3bgColor.html思考：将标题的背景设为深绿色？本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式添加背景图片background-image:url

7、none例：background-image:url(“bg.jpg”);实例代码动手做添加背

8、景图片Demo3-3-4bgImage.html思考：能否再为标题设置另外的背景图片？绝对路径和相对路径background-image:url(“bg.jpg”);绝对路径：D:/Apache2.2/htdocs/css/3-3/bg.jpg相对路径：相对于当前目录.表示当前目录bg.jpg=./bg.jpg..表示上一级目录../images/bg2.jpg注意：应尽量使用相对路径CSS中图片等的相对路径是相对于该CSS文件而言本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位

9、置设置背景图片的附着方式设置背景图片的平铺方式background-repeat:repeat

10、repeat-x

11、repeat-y

12、no-repeat说明：repeat:在水平和垂直方向平铺(默认值)repeat-x:只在水平方向平铺repeat-y:只在垂直方向平铺no-repeat:不平铺实例代码动手做背景图片不平铺Demo3-3-6bgRepeat.html本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置背景图片的位置background-pos

13、ition:关键字

14、长度

15、百分比关键字background-position:leftcenter;•水平方向：left,right,center•垂直方向：top,center,bottom长度background-position:35px20px;•控制图片离容器左边和上边的距离•可以使用px或em等进行定位百分比background-position:20%10%;如果不设置，背景图片默认显示在左上角实例代码动手做：背景图片居中显示Demo3-3-7bgPositon.html思考：如果同时设置了图片平铺，会怎样呢

16、？背景图片的选择选择没有明显边界效果的图片使用小的图片切片图片的拉伸问题下载速度Demo3-3-8.html本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置背景附着方式background-attachment:scroll

17、fixed设置背景图片是否随着滚动条的移动而移动。scroll:背景图片随滚动条移动，是浏览器的默认设置fixed:背景图片固定不动实例代码观察和分析：例3-3-8bgAttachment.html和例3-3-9bgAttach

18、ment2.html的区别background综合设置可以将所有的background属性(如背景颜色背景图片附着方式背景位置，图片的平铺方式)写为css中单独的一行。例：background:#FFF