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

第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）本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置颜色例：color:redcolor:#FF0000color:#F00常用颜色的关键字color:关键字|RGB值设置颜色实例Demo3-3-1poem.html设置颜色实例（续）动手做：将字体设为粉红色（#FF0080）Demo3-3-2color.html本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置页面背景颜色例：background-color:purple;background-color:#6600CCbackground-color:关键字|RGB值|transparent实例代码动手做：将背景设为浅绿色（#A9E9D9）Demo3-3-3bgColor.html思考：将标题的背景设为深绿色？本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式添加背景图片例：background-image:url(“bg.jpg”);background-image:url|none实例代码动手做添加背景图片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文件而言本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置背景图片的平铺方式说明：repeat:在水平和垂直方向平铺(默认值)repeat-x:只在水平方向平铺repeat-y:只在垂直方向平铺no-repeat:不平铺background-repeat:repeat|repeat-x|repeat-y|no-repeat实例代码动手做背景图片不平铺Demo3-3-6bgRepeat.html本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置背景图片的位置关键字•水平方向：left,right,center•垂直方向：top,center,bottom长度•控制图片离容器左边和上边的距离•可以使用px或em等进行定位百分比如果不设置，背景图片默认显示在左上角background-position:关键字|长度|百分比background-position:leftcenter;background-position:35px20px;background-position:20%10%;实例代码动手做：背景图片居中显示Demo3-3-7bgPositon.html思考：如果同时设置了图片平铺，会怎样呢？背景图片的选择选择没有明显边界效果的图片使用小的图片切片图片的拉伸问题下载速度Demo3-3-8.html本节内容设置颜色设置背景颜色设置背景图片插入背景图片设置背景图片的平铺方式背景图片的位置设置背景图片的附着方式设置背景附着方式设置背景图片是否随着滚动条的移动而移动。scroll:背景图片随滚动条移动，是浏览器的默认设置fixed:背景图片固定不动background-attachment:scroll|fixed实例代码观察和分析：例3-3-8bgAttachment.html和例3-3-9bgAttachment2.html的区别background综合设置可以将所有的background属性(如背景颜色背景图片附着方式背景位置，图片的平铺方式)写为css中单独的一行。例：background:#FFFurl(bg.jpg)scrollcentercenterno-repeat;思考：如果既设置了背景颜色又设置了背景图片会怎样呢？本节回顾设置颜色——color设置背景颜色——background-color插入背景图片——background-image:url()设置重复背景图片——background-repeat设置背景图片位置——background-position插入背景附件——background-attachment作业做exersize.html，实现表格隔行换色（或换背景图片）,并设置表格标题的背景图片为bg.jpg