《Web前端开发》教学讲义 Web前端设计基础 项目六-2.docxVIP

教学课题 项目6 CSS 3中的选择器—6.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3常用选择器； 2.掌握CSS 3新增选择器。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过上节课的学习，已经掌握了CSS 3的基本语法和引用方法。 本节课学习CSS 3的常用选择器、新增选择器和伪类选择器。 教学重点 1.CSS 3常用选择器； 2.CSS 3新增选择器。 教学难点 1.全局选择器、组合选择器的用法； 2.属性选择器、结构伪类选择器和UI元素状态伪类选择器的用法。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过查看网页源代码中各元素CSS样式设置，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、CSS 3常用选择器 单元格 列 行 单元格 列 行 单元格 列 行 1.标签选择器 标签选择器也叫元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。基本形式如图所示。 【例6-3】标签选择器实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title标签选择器实例/title 6 style 7 body{font-family: 微软雅黑;font-size: 16px;} 8 div{width: 100px;height: 50px;background: red;} 9 /style 10 /head 11 body 12 div 13 标签选择器 14 /div 15 pdiv{width: 100px;height: 50px;background: red;}/p 16 /body 17 /html 在浏览器中预览效果如图所示。 2.类选择器 类选择器用来为一系列类名相同的标签定义相同的显示样式，基本形式如图所示。 【例6-4】类选择器实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title类选择器实例/title 6 style 7 body{font-family: 微软雅黑;font-size: 16px;} 8 .box{width: 100px;height: 50px;background: green;} 9 /style 10 /head 11 body 12 div class=box 13 类选择器 14 /div 15 p.box{width: 100px;height: 50px;background: green;}/p 16 /body 17 /html 在浏览器中预览效果如图所示。 3.ID选择器 由于ID选择器定义的是某一特定的HTML元素，所以在同一个页面中不允许出现两个相同的id。基本形式如图所示。 【例6-5】ID选择器实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 titleID选择器实例/title 6 style 7 body{font-family: 微软雅黑;font-size: 16px;} 8 #box{width: 100px;height: 50px;background: blue;color:white;} 9 /style 10 /head 11 body 12 div id=box 13 ID选择器 14 /div 15 p#box{width: 100px;height: 50px;background: blue;color:white;}/p 16 /body 17 /html 在浏览器中预览效果如图所示。 4.全局选择器 如果一个页面中的所有HTML标签都使用一种样式，可以使用全局选择器。基本形式如下： *{属性:值;} “*”表示设置的样式对所有元素都起作用。 5.伪类选择器 伪类选择器定义的样式通常用在a标签上，表示链接的四种不同的状态：未访问链接（link）、已访问链接（visited）、激活链接（activ