3.9-CSS的继承性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 CSS的继承性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 使学生了解CSS的继承性概念。 · 让学生掌握CSS继承性的特点和应用场景。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. CSS继承性的定义和特点。 2. CSS继承性的应用场景和注意事项。 教学难点 1. 如何理解和运用CSS的继承性。 2. 如何解决CSS继承性带来的样式冲突问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过教师的讲解，传授CSS继承性的基本知识。 · 案例分析法：通过分析案例，让学生理解CSS继承性的应用方法和技巧。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的CSS基本概念和选择器。 2. 展示一个简单的网页，引导学生观察并思考CSS继承性在网页设计中的应用。 2分钟 讲授新课 练习指导 CSS继承性是指子元素可以继承父元素的某些样式属性值的机制。这种机制使得开发者可以更方便地对整个文档进行样式设置，减少了重复代码的使用，并且使得样式的维护更加容易。 ### CSS继承性的定义和特点 - **定义**：CSS继承性是指子元素可以继承父元素的某些样式属性值的机制。 - **特点**： - **传递性**：继承性从父元素传递到子元素，直至最深层次的子元素。 - **层叠性**：继承的样式在层叠顺序中处于中间位置，比同级选择器设置的样式优先级低，但比默认样式优先级高。 ### CSS继承性的应用场景 - **文本样式**：如字体、颜色、行高等，可以通过继承父元素的样式来保持一致性。 - **通用样式**：对于网页上的一些共性信息，如网页的文字颜色、字体、文字大小等内容，继承性可以大大简化代码。 ### 注意事项 - **可继承的属性**：如 `font-family`、`font-size`、`color`、`line-height`、`text-align`、`list-style` 等。 - **不可继承的属性**：如 `margin`、`padding`、`border`、`background`、`width`、`height` 等。 - **继承的优先级**：继承的样式在层叠顺序中处于中间位置，可以通过显式设置样式或使用 `inherit` 关键字来覆盖或强制继承。 通过以上分析，我们可以看到CSS继承性是一种强大的样式管理机制，但在使用时也需要注意其特性和限制，以确保样式的正确应用和维护。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 根据给定的HTML结构，编写相应的CSS代码，利用继承性设置元素的样式。 2. 设计一个简单的网页，要求运用CSS继承性来简化样式设置。 12分钟 布置作业 1. 完成课后习题练习，并提交代码和效果图。 2. 选择一个自己感兴趣的主题，设计一个运用CSS继承性的网页作品。 1分钟 总结回顾 1. CSS继承性的定义和特点。 2. CSS继承性的应用场景和注意事项。 3. 解决CSS继承性带来的样式冲突问题的方法。 通过本节课的学习，学生应该能够熟练掌握CSS继承性的应用，并在实际网页设计中灵活运用所学知识。这将有助于提高学生的网页设计效率和质量。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$