项目三任务2美化“鲜花配送网站”.pdfVIP

项目三 CSS 层叠样式表 课 仝素 教学班级 8 任课教师 时 梅 授课课题 任务 2 美化“鲜花配送网站” 教学目标 ： 1． 掌握创建、应用和管理 CSS 样式表的方法。 2． 灵活应用 CSS 样式表美化网页。 教学重点： 1． 创建复合样式表 2．创建外部样式表文件 教学难点 1 ．复合样式表的创建 教 机房+ 电子教室 学环境 教 教学内容 学过程 1、CSS 层叠样式表的作用？ 上 2、CSS 层叠样式表的的定义形式？ 节回顾 3、定义的类样式和 ID 样式该如何引用？ 4、重新定义标签 body，设置上、边距为 0，左右边距自动？ 1 新 任务 2 美化“鲜花配送网站”首页 课讲授 一、“鲜花配送网站”首页美化后的效果，如图3-3 所示。 本页面主要是对鲜花配送网站进一步美化，美化导航、和右侧 的四个虚线表格。 二、复合标记 1、选择符组 可以把相同属性和值的选择符组合起来书写，用将选择符分开， 这样可以减少样式重复定义：h1,h2,h3,h4,h5,h6 { color ： green } (这 个组里包括所有的标题元素，每个标题元素的文字都为绿色)。p,tabl e{ font-size ：9pt } (段落和表格里的文字尺寸为 9 号字) 效果完全等效于： p { font-size ：9pt } 2 table { font-size ：9pt } 例如，设置“鲜花配送网站”首页左侧的四个表格的边框线为虚线1、 像素、粉色。 #tab1 td,#tab2 td,#tab3 td,#tab4 td{ border:dashed 1px #F6F;} 2、包含选择符 可以单独对某种元素包含关系定义的样式表，元素 1 里包含 2， 这种方式只对在元素 1 里的元素 2 定义，对单独的元素 1 或元素 2 无 定义。 例一：重定义所有表格标记中的链接样式。 table a{ font-size ：12px } 在表格内的链接改变了样式，文字大小为 12 象素，而表格外的 链接的文字仍为默认大小。 例二：重定义指定 ID （#tab1）表格中的单元格进行重新定义。 #tab1 td { 3 font-family: 隶书; font-size: 30px; color: #FF0; } 例三：重定义指定 ID （#tab2）表格中的列表项目进行重新定义。 ##tab2 li { margin-bottom: 10px;