3.8.3-CSS后代选择器（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 CSS后代选择器 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 使学生了解CSS后代选择器的概念。 · 让学生掌握如何使用CSS后代选择器为元素的子元素和后代元素设置样式。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. CSS后代选择器的定义和使用场景。 2. 后代选择器的语法结构和注意事项。 教学难点 1. 如何准确地为元素的子元素和后代元素选择合适的后代选择器。 2. 后代选择器与其他选择器的组合使用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过教师的讲解，传授CSS后代选择器的基本知识。 · 案例分析法：通过分析案例，让学生理解CSS后代选择器的应用方法和技巧。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的CSS基本选择器和HTML文档结构。 2. 展示一个简单的网页，引导学生观察并思考如何为元素的子元素和后代元素设置样式。 2分钟 讲授新课 练习指导 CSS后代选择器（Descendant Selector）是一种根据元素之间的层级关系来选择元素的方法。这种选择器可以让我们轻松地为元素的子元素和后代元素设置样式。 使用场景： 1. 当需要为元素的子元素和后代元素设置相同的样式时，如为一个列表（`<ul>`）的所有列表项（`<li>`）元素设置相同的字体大小、颜色等样式。 2. 当需要为特定类型的元素设置不同的样式时，如为一个导航栏（`<nav>`）中的所有链接（`<a>`）元素设置不同的颜色、背景等样式。 语法结构： 后代选择器的语法非常简单，使用空格分隔两个选择器，表示第一个选择器的后代元素。例如： ```css ul li { color: red; } nav a { background-color: blue; } ``` 注意事项： 1. 后代选择器对大小写不敏感，但建议使用小写形式，以保持代码的一致性。 2. 后代选择器可以与其他选择器组合使用，如类选择器、ID选择器等。但是，通常情况下，我们不建议将后代选择器与ID选择器混合使用，因为ID选择器具有更高的优先级，可能导致样式冲突。 3. 在实际应用中，尽量避免过度使用后代选择器，以免导致CSS代码过于复杂和难以维护。 通过掌握CSS后代选择器的定义和使用场景，学生可以在实际网页设计中灵活运用这种选择器，提高编写效率和代码质量。在实际应用中，学生需要根据设计需求和场景，选择合适的选择器来设置元素的样式。这将有助于提高学生的网页设计能力和审美素养。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 根据给定的HTML结构，编写相应的CSS代码，使用后代选择器为元素的子元素和后代元素设置样式。 2. 设计一个简单的网页，要求使用后代选择器来设置元素的样式。 12分钟 布置作业 1. 完成课后习题练习，并提交代码和效果图。 2. 选择一个自己感兴趣的主题，设计一个包含后代选择器的网页作品。 1分钟 总结回顾 1. CSS后代选择器的概念和定义。 2. 后代选择器的语法结构和注意事项。 3. 后代选择器的使用场景和设计原则。 通过本节课的学习，学生应该能够熟练掌握CSS后代选择器的使用方法，并在实际网页设计中灵活运用所学知识。这将有助于提高学生的网页设计效率和质量。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$