第3章 初识CSS3电子教案.docxVIP

北京市昌平区建材城西路金燕龙办公楼一层电话：400-618-4000

黑马程序员

《HTML5+CSS3网页设计与制作（第2版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月日

课题名称

第3章初识CSS3

计划课时

6课时

教学引入

随着网页制作技术的不断发展，HTML5属性样式的简单应用已经无法满足网页设计的需求。但使用CSS能够在不改变原有HTML结构的情况下，实现更加丰富的样式效果。例如更多样的字体、更绚丽的图形和动画等，这极大地满足了网页设计的需求。本章主要讲解CSS3的基础知识。

教学目标

使学生了解结构与表现分离的含义，能够阐述结构与表现分离的作用

使学生了解CSS3的优势，能够阐述CSS3的优势

使学生熟悉CSS3样式规则，能够按照CSS样式规则正确编写CSS样式代码

使学生掌握CSS样式的引入方式，能够在网页中引入CSS样式

使学生掌握CSS基础选择器的用法，能够使用CSS基础选择器设置不同的网页样式

使学生掌握CSS文本样式属性的用法，能够在网页中设置字体样式属性和文本外观属性

使学生掌握CSS复合选择器的用法，能够使用CSS复合选择器设置不同的网页样式

使学生熟悉CSS层叠性和继承性，能够运用CSS的层叠性和继承性优化代码结构

使学生熟悉CSS优先级规则，能够区分复合选择器权重的大小

教学重点

引入CSS样式

CSS基础选择器

字体样式属性

文本外观属性

CSS复合选择器

教学难点

CSS复合选择器

CSS层叠性和继承性

CSS优先级

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

第一、二课时

（结构与表现分离、CSS3的优势、CSS样式规则、引入CSS样式表、CSS基础选择器、字体样式属性、文本外观属性）

复习巩固

教师通过提问等方式了解学生的学习情况，对吸收不好的知识点进行再次巩固讲解。

通过直接导入的方式讲解新课

使用HTML标签属性设置网页样式具有很大的局限性，因为所有的属性都是写在标签中，既不能统一为同一种的标签设置样式，也不利于后期批量修改样式。为了更方便地维护网页代码，我们需要使用CSS实现结构与表现的分离。接下来，本节课将从结构与表现分离入手，带大家认识CSS。

新课讲解

知识点1-结构与表现分离

教师通过展示PPT的方式讲解结构与表现分离。

讲解结构与表现分离的好处。

展示CSS嵌入HTML的效果。

知识点2-CSS3的优势

教师通过展示PPT的方式讲解CSS3的优势。

节约成本。

提高性能。

知识点3-CSS样式规则

教师通过展示PPT的方式讲解CSS样式规则。

讲解设置CSS样式的具体语法规则。

讲解CSS代码结构的特点。

CSS样式中的选择器严格区分大小写，而声明不区分大小。

若有多个声明，则必须用英文状态下的分号“;”隔开，最后一个声明后的分号可以省略。

如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

在编写CSS代码时，为了增强代码的可读性，可使用注释语句进行介绍说明。

在CSS代码中空格是不被解析的，大括号及分号前后的空格可有可无。

知识点4-引入CSS样式表

教师通过展示PPT以及代码的方式讲解引入CSS样式表。

讲解行内式、内部式、外部式和导入式的语法规则。

针对四种引入方式，分别通过代码的形式演示其用法。

知识点5-CSS基础选择器

教师通过展示PPT以及代码演示CSS基础选择器。

讲解标签选择器、类选择器、id选择器、通配符选择器的语法规则。

针对四种基础选择器，分别以代码的形式演示其用法

知识点6-字体样式属性

教师通过展示PPT以及代码演示的方式讲解字体样式属性。

（1）介绍CSS字体样式属性的作用。

（2）讲解font-size属性、font-family属性、font-weight属性、font-variant属性、font-style属性、font属性、@font-face的作用、属性值及含义。

（3）通过代码的方式演示设置不同属性的效果。

知识点7-文本外观属性

教师通过展示PPT以及代码演示的方式讲解文本外观属性。

（1）介绍CSS字体文本外观属性的作用。

（2）讲解color属性、letter-spacing属性、word-spacing属性、line-height属性、text-transform属性、text-decoration属性、text-align属性、text-indent属性、white-space属性、text-shadow属性、text-overflow属性、word-