第3章 CSS3入门_教学设计
以下为《第3章 CSS3入门_教学设计》的无排版文字预览，完整内容请下载
课题名称
第3章 CSS3入门
计划课时
8课时
内容分析
随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。本章将对CSS3的发展史、浏览器的支持情况以及相关文本样式属性进行详细讲解。
教学目标
了解CSS3的发展历史以及主流浏览器的支持情况。
掌握CSS基础选择器，能够运用CSS选择器定义标记样式。
熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。
理解CSS优先级，能够区分复合选择器权重的大小。
重点及措施
教学重点：CSS核心基础、文本样式属性、CSS层叠性与继承性、CSS优先级。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点： CSS层叠性与继承性、CSS优先级。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式
教学采用教师课堂讲授为主，使用教学PPT讲解。
教
学
过
程
第一课时
（讲解CSS概述、CSS3发展历史、CSS3浏览器支持情况）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第二章“HTML5页面元素及属性”的相关知识。
通过上一章的学习，我们知道：HTML5文档的基本格式中，有一个重要的标记——标记。请简要描述什么HTML5中的“声明”及其用法？
答案：
标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或XHTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：
只有在开头处使用声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在网页设计中，运用CSS3技术能够让原有的网站变得趣味盎然，很多站点都为自己的页面添加了各种炫酷的CSS3效果。但是CSS3技术是怎样发展起来的？哪些浏览器能够很好的兼容CSS3呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
CSS基础选择器主要包括四种，具体如下：
20世纪90年代初，HTML语言的诞生，各种形式的样式表也随之出现。1994年哈坤·利提出了CSS的最初建议，CSS发展至今出现了4个版本，对它们的具体介绍如下：
（1）CSS1
1996年12月W3C发布了第一个有关样式的标准CSS1。这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
（2）CSS2
1985年5月，CSS2正式推出，这个版本开始使用样式表结构，该版本也是目前正在使用的版本。
（3）CSS2.1
2004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。
（4）CSS3
早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但是各主流浏览器已开.经始支持其中的绝大部分特性。
CSS3给我们带来了众多全新的设计体验，但是并不是所有的浏览器都完全支持它。其中，谷歌（Chrome）和Safari浏览器对从CSS3的支持较好。
知识点讲解
讲解“CSS概述”
（1）、教师展示PPT对“CSS概念及作用”进行讲解，并打开网页进行效果展示。
（2）、教师讲解CSS在HTML5中的书写位置，并使用代码进行演示。
（3）、教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。
（4）、教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。
（5）、学生练习，教师巡视，对疑难问题进行解答。
讲解“CSS3发展历史”
（1）、教师展示PPT对“CSS3发展历史”进行说明，并对比各个版本间的区别与联系。
（2）、教师展示PPT对“CSS3发展历史”进行讲解并通过代码进行演示。
（3）、学生自主提问，教师对疑难问题进行解答。
讲解“CSS3浏览器支持情况”
（1）、教师和学生互动：浏览器是网页运行的平台，目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，但是并不是所有的浏览器都完全支持CSS3。
（2）、教师分别对各个浏览器对CSS3的支持情况进行分析，并总结出谷歌（Chrome）浏览器对CSS3的支持最好。
（3）、教师指出由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，各主流浏览器都定义了自己的私有属性。
内核类型
相关浏览器
私有前缀
Trident
IE8/ IE9/ IE10
-ms
Webkit
谷歌（Chrome）/Safari
-webkit
Gecko
火狐（Firefox）
-moz
Blink
Opera
-o
（4）、教师对各个浏览器的私有属性进行讲解，并通过代码进行演示。
（5）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结
小结
重点：CSS3浏览器支持情况。
易错点：注意区分各个浏览器在CSS3中的私有前缀。
答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
巩固练习
巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地了解“CSS概述、CSS3发展历史、CSS3浏览器支持情况”等知识点。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
第二课时
（讲解CSS样式规则、引入CSS样式表、CSS基础选择器）
复习上节课内容
浏览网页的时候，我们可以看见很多炫丽的CSS3效果，CSS3给我们带来了众多全新的视觉感受和用户体验，但是并不是所有的浏览器都完全支持它，所以使用CSS3时需要添加私有前缀。那么，常见的浏览器内核类型和私有前缀都有哪些呢？
答案：
内核类型
相关浏览器
私有前缀
Trident
IE8/ IE9/ IE10
-ms
Webkit
谷歌（Chrome）/Safari
-webkit
Gecko
火狐（Firefox）
-moz
Blink
Opera
-o
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
如果把一个网页看成一个人的话， HTML5就相当于人的骨架，是结构； CSS相当于人的衣服，是表现。那么如何使用CSS去修饰页面呢？其实，给网页应用样式首先需要使用CSS中的选择器。那么，CSS基础选择器主要有哪些？又有哪些不同呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
CSS基础选择器主要包括四种，具体如下：
标记选择器。标记选择器是指用HTML标记名称作为选择器。用标记选择器定义的样式对页面中该类型的所有标记都有效。
类选择器。类选择器使用“.”进行标识，后面紧跟类名。其最大的优势是可以为元素对象定义单独或相同的样式。
id选择器。id选择器使用“#”进行标识，后面紧跟id名。元素的id值是唯一的，只能对应于文档中某一个具体的元素。
通配符选择器。通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
知识点讲解
讲解“CSS样式规则”
（1）、教师展示PPT对“CSS样式规则”的具体格式进行讲解，并使用代码进行演示。
（2）、教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。
（3）、教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。
（4）、学生练习，教师巡视，对疑难问题进行解答。
讲解“引入CSS样式表”
（1）、教师展示PPT对“HTML文档中引入CSS样式表”进行说明，并指出“引入CSS样式表”的三种方式。
（2）、教师分别对“行内式”、“内嵌式”及“链入式”引入CSS样式表进行讲解并通过代码进行演示。
（3）、教师指出“行内式”、“内嵌式”及“链入式”的基础语法格式及其优缺点。
（4）、学生练习，教师巡视，对疑难问题进行解答。
讲解“CSS基础选择器”
（1）、教师展示PPT对“CSS选择器”的概念及用法进行讲解。
（2）、教师分别对“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”的基本语法格式进行详细讲解并通过代码进行演示。
（3）、教师对比“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”的使用方法及应用效果，并指出其优缺点。
（4）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结
小结
重点：CSS样式规则、引入CSS样式表、CSS基础选择器。
易错点：注意区分标记选择器、类选择器、id选择器及通配符选择器。
答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
巩固练习
巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握“CSS样式规则、引入CSS样式表、CSS基础选择器”等知识点。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
布置作业
完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
预习3.3节【文本样式属性】。
第三、四课时
（讲解CSS字体样式属性、CSS文本外观属性）
说明：
将3.3节作为两个课时进行讲解。
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、通过上节课的学习，我们知道引入CSS样式的方法有很多，例如：行内式、内嵌式以及链入式。那么，现在请同学们回顾下：什么是“内嵌式CSS”，以及其使用方法？
答案：
内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义。标记一般位于标记中标记之后，也可以把它放在HTML文档的任何地方。
同时，必须设置type的属性值为“text/css”，这样浏览器才知道标记包含的是CSS代码，因为标记还可以包含其他代码，如JavaScript代码。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
浏览网页时，我们可以看到字号大小不同，字体颜色各异以及不同形态的字体效果。那么，CSS字体样式中的哪些属性可以设置网页中的字体效果呢？请分别列举。
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
CSS字体样式属性主要包括：
font-size:字号大小；
font-family:字体；
font-weight:字体粗细；
font-variant:变体；
font-style:字体风格；
font:综合设置字体样式；
知识点讲解
讲解“CSS字体样式属性”
（1）、教师和学生互动：浏览网页的时候，我们经常看到一些特殊的字体效果，比如：控制字体的字号、将字体进行加粗，或者设置字体倾斜等。为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。
（2）、教师展示PPT对“网页中常见的字体效果”进行展示及说明。
（3）、教师分别对“font-size、font-family、font-weight、font-variant、font-style及font综合设置属性”进行讲解，并进行代码演示。
（4）、教师分别对使用CSS设置字体样式时需要注意的问题进行说明。
（5）、学生练习，教师巡视，对疑难问题进行解答。
讲解“CSS文本外观属性”
（1）、教师和学生互动：使用CSS不仅可以设置一些特殊的字体效果，还可以设置一些段落文本的外观显示效果，比如：设置文本颜色、字间距、行间距、文本装饰效果等。使用HTML只能进行简单的控制，但是效果并不理想，为此CSS提供了一系列的文本外观样式属性。
（2）、教师展示PPT对“网页中常见的文本外观效果”进行展示及说明。
（3）、教师分别对“color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space”等文本外观属性进行讲解，并进行代码演示。
（4）、教师分别对使用CSS设置文本外观时需要注意的问题进行说明。
（5）、学生练习，教师巡视，对疑难问题进行解答。
阶段小结
小结
重点：CSS字体样式属性、CSS文本外观属性。
答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
巩固练习
巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握如何使用CSS对网页中的字体样式及文本外观进行设置。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
布置作业
完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
预习3.4节【CSS高级属性】。
预习3.5节【阶段案例—制作服装推广软文】。
第五课时
（讲解CSS层叠性与继承性、CSS优先级）
复习上节课内容
在讲解本节内容前，抛出以下2个问题让学生回答，以复习上节课内容。
1、在上一节中，我们学习了如何使用CSS属性设置网页中的字体及文本。请同学们回顾下：如何使用“text-align”属性设置文本的对齐方式呢？
答案：
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐。
center：居中对齐。
例如设置二级标题居中对齐，可使用如下CSS代码：
h2{ text-align:center;}
2、请举例说明：如何使用“text-indent”属性设置文本效果？
答案：
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
例如设置段落文本首行缩进2个字符，可使用如下CSS代码：
p{text-indent:2em;}
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在CSS中，很多属性都具有继承性，能够大大地减少代码的冗余。但是，还有一些属性是不具有继承性的。那么，请大家讨论并举例说明哪些CSS属性不具有继承性呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
并不是所有的CSS属性都可以继承，例如：
边框属性
外边距属性
内边距属性
背景属性
定位属性
布局属性
元素宽高属性
知识点讲解
讲解“CSS层叠性与继承性”
（1）、教师展示PPT对“CSS层叠性与继承性”的概念进行讲解。
（2）、教师展示PPT分别对层叠性、继承性进行代码演示并举例说明。
（3）、教师对使用CSS继承性时需要注意的几个问题进行说明，并总结出不具有继承性的CSS属性。
（4）、学生练习，教师巡视，对疑难问题进行解答。
讲解“CSS优先级”
（1）、教师带领学生对通过不同的选择器对同一元素定义不同的CSS样式，指出不同的选择器有不同的优先级问题。示例：
HTML结构代码：
帮帮我，我到底显示什么颜色？
CSS样式代码：
p{ color:red;} /*标记样式*/
.blue{ color:green;} /*class样式*/
#header{ color:blue;} /*id样式*/
在上面的例子中，使用不同的选择器对同一个元素设置文本颜色，这时浏览器会根据选择器的优先级规则解析CSS样式。
（2）、教师展示PPT对“CSS优先级”进行讲解，指出CSS优先级的计算原则。
（3）教师对CSS选择器中的权重进行讲解，并进行代码演示。
（4）教师对计算CSS优先级时，需要注意一些特殊情况进行总结并演示。
（5）、学生提问，教师对疑难问题进行解答。
阶段小结
小结
重点：CSS层叠性与继承性、CSS优先级。
易错点：注意区分不同CSS属性的继承性。
答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
巩固练习
巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握“CSS层叠性与继承性、CSS优先级”等知识点。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
第六课时
（讲解阶段案例—制作服装推广软文）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
上节课节中，我们学习了CSS层叠性与继承性、CSS优先级的相关知识。那么，请同学们回顾并回答：如何理解CSS的层叠性？请举例说明。
答案：
所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义标记字号大小为12像素，链入式定义标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加，这称为CSS的层叠性。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
本课时内容学习
分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
在CSS中，通过文本样式属性可以设置字体的颜色、间距、对齐方式等属性。那么，请举例说明：如何使用“text-indent”属性设置文本效果？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
例如设置段落文本首行缩进2个字符，可使用如下CSS代码：
p{text-indent:2em;}
案例讲解
案例描述
本章前几个节重点介绍了CSS3的浏览器支持情况、CSS样式规则、选择器、CSS文本相关样式及高级特性。为了使读者更好地认识CSS，本节将通过案例的形式分步骤制作一款服装推广 内容过长，仅展示头部和尾部部分文字预览，全文请查看图片预览。 、继承性以及优先级”等知识点。
通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。
布置作业
完成“补充案例”，通过平台提交给教师，教师下节课进行点评。
复习本课时的所有知识点和案例，加强巩固。
第七、八课时
（上机测试）
教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。
上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出
错的操作步骤。通过上机测试可以考察同学对“CSS样式规则”、“CSS基础选择器”、“CSS复合选择器”、“CSS字体样式属性”、“CSS文本外观属性”使用的熟练程度，以及对“CSS层叠性与继承性”、“CSS优先级”等知识点的掌握程度。
（作品点评）
教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。
布置作业
完成课后“动手实践”，并扫描二维码查看答案。
预习4.1节【属性选择器】。
预习4.2节【关系选择器】。
预习4.3节【结构化伪类选择器】。
教
学
后
记
[文章尾部最后500字内容到此结束,中间部分内容请查看底下的图片预览]请点击下方选择您需要的文档下载。
- word域代码EQ域详解
- XX自考报名系统使用帮助help
- 增值税发票综合服务平台基础驱动及应用客户端安装手册1102 (1)
- 社保认证方法（重要不能删除）
- XX师范大学VPN系统使用方法
- 智游Java大数据一周实训方案
- 第二章数据类型 问答题
- 身份证阅读器使用指南 (1)
- 第十三课人的本质与利己利他教案
- 创意总监经验总结：广告，其实很简单
- uniapp使用总结
- VB考试试题及答案
- Web前端开发职业技能等级标准
- Kano分析技术在产品开发中的应用
- 德国哲学家马丁XXXXX海XX尔背景资料
- 3.《HTML5网页制作技术》课程设计考核试题
- 百度云盘强制下载文件速度慢的解决办法
- 写生课构图讲解
以上为《第3章 CSS3入门_教学设计》的无排版文字预览，完整内容请下载
第3章 CSS3入门_教学设计由用户“wjhwu88”分享发布，转载请注明出处