《HTML5CSS3 网页设计与制作》教案-3 第2章 第 1-3节 初步认识 CSS、HTML与CSS基础语法、网页基本结构

课程教案-3第2章HTML5基本标签及开发工具介绍课题名称第1-3节初步认识CSS、HTML与CSS基础语法、网页基本结构授课班级软件技术等大一上学期授课班级授课学时2授课地点多媒体教室授课形式讲授、演示参考教材《前端HTML+CSS修炼之道》教学资源电子课件、教案、文字材料知识目标了解css的基本语法；理解常用的选择器；理解三种样式表；技能目标能够熟练使用不用的选择器和样式表教学目标素质目标培养学生认真、一丝不苟的学习态度教学理解常用的选择器；理解三种样式表；重点教学重点与难点教学能够熟练使用不用的选择器和样式表难点本次所讲内容选自教材第2章第1-3节因为本次课程是学习CSS的样式表基础，需学情分析要学生在掌握了基本标签的基础上学生在网页中使用不同的选择器课前预习+课程导入随着网页设计技术的发展，人们已经渐渐不满足原有的一些HTML标记，而是希望能够为页面内容添加一些更加绚丽的属性，如鼠标标记、渐变效果等CSS技术的发展使这些成为现实本章主要介绍了CSS中的选择器和样式表，通过本章的学习，能够熟练使用选择器和样式表来制作网页课中

1、介绍CSS的概念及发展历史

2、讲解CSS的语法结构教学过程选择器｛样式属性属性值；样式属性取值；｝其中，选择器可以是多种形式的，例如要定义HTML标记中H2的样式，可以使用以下代码H2{font-family:黑体;font-size:24px;}以上代码表示，选择器字体属性为黑体，字体大小为24px

3、讲解各种元素选择器，重点讲解CLASS及ID选择器CLASS选择器的语法格式如下类名样式属性取值；样式属性取值；ID选择器的语法格式如下#ID名..样式规则与CLASS选择器不同的是，ID名前面是“#”号，ID的名称可以是任意取名，但在整个网页中必须唯一，不能重名

4、讲解三种样式表根据样式代码的位置不同，可以将样式分为三类

（1）行内样式表

（2）内部样式表

（3）外部样式表课后总结复习以下内容

1.样式表由样式规则组成，这些规则告诉浏览器如何显示文档样式表是将样式（如字体、颜色、字号等）添加到网页中的简单机制

2.样式表包括选择器和样式规则，选择器又分为HTML选择器、CLASS类选择器和ID选择器

3.根据样式代码的位置不同，可以将样式分为三类行内样式表、内嵌样式表、外部样式表采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在教学反思上机课上学生学会了如何创建站点和简单的网页页面；课后布置了有关站点的作业，并且利用上机时间完成和指导工作。