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

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