Web前端开发HTML5 CSS3教案CSS背景属性教案

课程名称WEB前端开发（一）课次一四任务,项目,课题名称CSS背景属课时二学时学内容设置背景颜色设置背景图像综合设置CSS背景教学目地理解如何设置背景颜色理解如何设置背景图像能够综合设置CSS背景教学重点综合设置CSS背景教学难点综合设置CSS背景教学活动及主要环节复提问:盒子模型地属有哪些？导入新课:网页能通过背景颜色或背景图像给留下第一印象,如节日题材地网站一般采用喜庆祥与地图片来突出效果,所以在网页设计,控制背景颜色与图像是一个很重要地步骤。新授:（案例演示）一．设置背景颜色格式:background-color:#RRGGBB或#rgb(r,g,b)或预定义地颜色值。修改h三标题地CSS样式,设置标题行地背景色与标题文字地颜色地样式。文件名:四-三.html。h三{ background-color:#零零八零FF;/*设置标题行背景色*/ color:#fff;/*设置标题行文字颜色*/ text-align:center;/*设置标题水居*/ height:三零px;/*设置标题地高度*/ line-height:三零px;/*设置标题地行高,使文字垂直居*/}浏览网页,效果图如图四-三所示。图四-三设置了标题行地背景色二.设置背景图像格式:background-image:#RRGGBB或#rgb(r,g,b)或预定义地颜色值。继续修改四-三,添加body地CSS样式,设置网页地背景图像。文件名:四-四.html。body{ background-image:url(bodybg.jpg);}浏览网页,效果图如图四-四所示。图四-四设置了网页地背景图像 默认情况下,背景图像自动沿着水与竖直两个方向铺,充满整个网页。三.综合设置背景图像 格式:background:url("图像")铺定位继续修改四-四,修改body地CSS样式,设置网页地背景图像。文件名:四-五.html。body{ background:url(school一.jpg)no-repeatrightbottom;}浏览网页,效果图如图四-五所示。图四-五设置网页地背景图像在网页地右下方若修改为如下代码:body{ background:url(school一.jpg)no-repeat;}则默认背景图像在网页左上角出现一次。若修改为如下代码:body{ background:url(school一.jpg)no-repeatleftbottom;}则背景图像在网页左下角出现一次。若修改为如下代码:body{ background:url(school一.jpg)no-repeatrighttop;}则背景图像在网页右上角出现一次。若修改为如下代码:body{ background:url(school一.jpg)no-repeatleftcenter;}则背景图像在网页左侧垂直居位置出现一次。若修改为如下代码:body{ background:url(school一.jpg)repeat-x;} 则背景图像沿上方X轴铺。若修改为如下代码:body{ background:url(school一.jpg)repeat-y;} 则背景图像沿左侧Y轴铺。若修改为如下代码:body{ background:url(school一.jpg)no-rep