□演示性 □验证性 □设计性 √综合性
能力目标： 授课日期 授课地点 1. 具备运用CSS层叠和继承规则的能力 2. 具备使用CSS修改网页元素外观的能力 知识目标： 1. 掌握CSS基本语法规则 教学目标 2. 掌握CSS规则的应用方式 3. 理解CSS层叠和继承特性 4. 掌握CSS美化网页元素的方法 素质目标： 1. 培养学生知识掌握和技能运用能力 2. 培养学生团结合作、互帮互助的能力 1. 任务描述 2. 任务展示与实现 （1）CSS基本语法规则 教学内容 （2）利用CSS语法规则美化网页元素 （3）利用CSS层叠和继承特性优化CSS代码 （3）学生动手操作 3. 教师讲解本任务涉及的知识点 1
1. CSS基本语法规则 教学重点 2. 利用CSS语法规则美化网页元素 1. CSS层叠和继承特性 教学难点 2. 利用CSS语法规则美化网页元素 1. 装有Sublime或者Hbuilder的电脑 教学准备 2. 教学课件PPT
3. 教材：《Web前端技术项目式教程》 作业设计 1．使用CSS规则美化旅游公司首页页面元素 教学过程 教学 环节 课前组织 课程 说明 教学内容与过程 （教学内容、教学方法、组织形式、教学手段） 做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。 【课前说明】 分别介绍CSS规则基本语法、CSS选择器的种类及语法，CSS规则的使用方式，以及如何运用CSS规则修改网页元素的样式。 【目的】 使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习知识的要求和目标。 2
课程 内容 描述 一、 二、 CSS规则基本语法 CSS选择器种类 CSS选择器分为基本选择器和高级选择器。 （1）基本选择器 基本选择器分为标签选择器、类选择器和ID选择器。 ①标签选择器：是指以网页中已有的HTML标签名作为名称的选择器，该样式定义后文档中所有此类标签都会自动应用该样式。 ②类选择器：在进行HTML结构设计时，可根据需要为多个HTML标签使用class自定义名称，类名以“.”号开头。 ③ID选择器：id选择器可以为标有特定id的HTML元素指定特定的样式。 （2）高级选择器 高级选择器分为子选择器、后代选择器、属性选择器、通用选择器、伪类和伪元素选择器、分组选择器。 ①子选择器。 语法：选择器1>选择器2>….>选择器n{ }。 ②后代选择器。 语法：选择器1 选择器2 …. 选择器n{ }。 ③属性选择器。 属性选择器可以根据元素的属性及属性值来选择元素。 ④通用选择器。 语法：*{ }。 3
⑤伪类和伪元素选择器。 ⑥分组选择器。 语法：选择器1,选择器2,…..选择器n{ }，多个选择器之间用逗号分隔。 三、 CSS规则的应用方式 在HTML文档中使用CSS的方法分为外部样式、内部样式和行内样式。 （1）外部样式 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，开发者可以通过改变一个文件来改变整个站点的外观。每个页面均使用标签链接到样式表。 （2）内部样式 当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用
CSS样式表继承特性的演示代码
总结 评价 通过学习，学生能够掌握CSS规则的基本语法、以及如何使用CSS规则美化网页元素。 本节课主要运用案例教学法，通过对CSS选择器的深入理解，掌握使用CSS规则美化网页元素的方法，深入探讨CSS规则的使用方法，通过实例的方法加强对CSS规则应用的理解，达到能够独立熟练运用CSS规则来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式 ，促进学生的自主、创新学习的方式 。 6
因篇幅问题不能全部显示，请点此查看更多更全内容