2.6.2-CSS样式（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 CSS样式 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握CSS的基本概念、语法和作用。 · 学会使用CSS选择器为网页元素应用样式。 · 了解CSS的层叠性和继承性。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. CSS的基本概念、语法和作用。 2. 使用CSS选择器为网页元素应用样式。 3. CSS的层叠性和继承性。 教学难点 1. 如何正确使用CSS选择器。 2. CSS层叠性和继承性的理解。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 讲授法：讲解CSS的基本概念、语法和作用。 2. 实例演示法：通过实例操作，展示CSS选择器的使用方法。 3. 任务驱动法：布置具体任务，引导学生自主完成。 4. 小组合作法：鼓励学生相互合作，共同解决问题。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 介绍CSS的重要性和应用场景。 2. 引入本节课的主题：CSS样式。 2分钟 讲授新课 练习指导 CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML和XML等文档样式的语言。它可以控制网页元素的布局、颜色、字体和其他视觉特征，使得网页设计更加美观、一致和易于维护。以下是CSS的基本概念、语法和作用的简要概述： ### 基本概念 1. **样式规则**：CSS的核心是样式规则，它由选择器和声明块组成。 2. **选择器**：选择器用于指定哪些HTML元素应该应用特定的样式。常见的选择器包括元素选择器、类选择器、ID选择器和属性选择器。 3. **声明块**：声明块包含一个或多个属性和值的配对，这些属性和值定义了元素的样式。 4. **继承**：CSS允许某些样式属性从父元素继承到其子元素，这减少了重复代码的需要。 5. **层叠**：当多个样式规则应用于同一个元素时，它们会按照特定的顺序层叠，后面的规则会覆盖前面的规则（如果它们具有更高的优先级）。 6. **盒模型**：CSS定义了元素的盒模型，包括内容区域、内边距、边框和外边距。 ### 语法 CSS规则的语法如下： ```css 选择器 { 属性: 值; } ``` 例如，为所有`<p>`元素设置文本颜色和字体大小： ```css p { color: red; font-size: 16px; } ``` ### 作用 1. **提升网站外观**：CSS允许开发者轻松地为网站提供统一的外观和感觉。 2. **增强可访问性**：通过使用CSS，开发者可以提高网站的可访问性，确保内容对于所有用户都是可用的，包括那些依赖辅助技术的用户。 3. **提高网站性能**：CSS可以减少HTML文件的大小，通过外部样式表减少HTTP请求的数量，从而提高网站的加载速度。 4. **便于网站维护**：使用CSS可以使网站的更新和维护变得更加容易，因为样式和内容是分开的。 5. **响应式设计**：CSS媒体查询允许开发者根据不同的屏幕尺寸和设备特性应用不同的样式，从而实现响应式设计。 掌握CSS的基本概念、语法和作用是进行网页设计和开发的基础。通过CSS，你可以控制网页的布局、颜色、字体和其他视觉特征，创建出既美观又实用的网站。 ### 使用CSS选择器为网页元素应用样式 CSS选择器用于选择需要应用样式的HTML元素。以下是一些常用的CSS选择器类型： 1. **元素选择器**：根据HTML元素的标签名选择元素。 ```css p { color: red; } ``` 这个选择器会选择所有的`<p>`元素，并将它们的文本颜色设置为红色。 2. **类选择器**：根据HTML元素的`class`属性选择元素。 ```css .my-class { color: blue; } ``` 这个选择器会选择所有具有`my-class`类的元素，并将它们的文本颜色设置为蓝色。 3. **ID选择器**：根据HTML元素的`id`属性选择元素。 ```css #my-id { color: green; } ``` 这个选择器会选择具有`my-