3.10.1-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三种样式表的优先级规律。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 讲授法：通过教师的讲解，传授CSS三种样式表的基本知识。 · 案例分析法：通过分析案例，让学生理解CSS三种样式表的优先级规律。 2分钟 讲授新课 练习指导 ### CSS外部样式表、内部样式表和行内样式的定义和特点 1. **外部样式表**： - 定义：外部样式表是将CSS样式规则存储在一个单独的文件中，然后通过HTML文档的`<link>`标签引入。 - 特点： - 代码分离，使得HTML和CSS代码更加清晰、易于维护。 - 可以被多个HTML文档共享，减少代码重复。 - 可以通过修改外部样式表文件来更改整个网站的样式，提高开发效率。 2. **内部样式表**： - 定义：内部样式表是将CSS样式规则直接写在HTML文档的`<style>`标签内。 - 特点： - 适用于较小的网页，或者仅需要对少量元素进行样式设置的情况。 - 不适合大型网站，因为样式和内容混合在一起，不利于维护。 - 可以通过修改内部样式表来更改当前页面的样式。 3. **行内样式**： - 定义：行内样式是将CSS样式规则直接写在HTML元素的`style`属性中。 - 特点： - 适用于对单个元素进行特定样式设置的情况。 - 不适合大型网站，因为样式和内容混合在一起，不利于维护。 - 可以通过修改行内样式来更改特定元素的样式。 ### CSS三种样式表的优先级规律及应用场景 CSS样式表的优先级规律是根据样式来源和特殊性来确定的。优先级从高到低依次为：行内样式、内部样式表、外部样式表。 1. **行内样式**： - 应用场景：适用于对单个元素进行特定样式设置的情况，如需要快速调整某个元素的样式。 - 优先级：最高，覆盖其他样式表中的同名样式。 2. **内部样式表**： - 应用场景：适用于较小的网页，或者仅需要对少量元素进行样式设置的情况。 - 优先级：次于行内样式，高于外部样式表。 3. **外部样式表**： - 应用场景：适用于大型网站，可以通过修改外部样式表文件来更改整个网站的样式。 - 优先级：最低，可以被内部样式表和行内样式覆盖。 在实际应用中，根据需求和场景选择合适的样式表类型，以确保代码的可维护性和可读性。通常情况下，优先使用外部样式表来管理整个网站的样式，对于特定页面或元素的样式调整，可以使用内部样式表或行内样式。这样可以确保样式的优先级和来源得到合理控制，从而提高网页设计的效率和质量。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 根据给定的HTML结构，编写相应的CSS代码，利用样式表优先级设置元素的样式。 2. 设计一个简单的网页，要求运用CSS三种样式表的优先级来设置元素的样式。 12分钟 布置作业 1. 完成课后习题练习，并提交代码和效果图。 2. 选择一个自己感兴趣的主题，设计一个运用CSS三种样式表优先级的网页作品。 1分钟 总结回顾 1. CSS外部样式表、内部样式表和行内样式的定义和特点。 2. CSS三种样式表的优先级规律及应用场景。 3. 解决CSS样式冲突问题的方法。 通过本节课的学习，学生应该能够熟练掌握CSS三种样式表的优先级应用，并在实际网页设计中灵活运用所学知识。这将有助于提高学生的网页设计效率和质量。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$