《（中职）Web前端设计基础 项目六-1电子教案.docx》由会员分享，可在线阅读，更多相关《（中职）Web前端设计基础 项目六-1电子教案.docx（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）Web前端设计基础 项目六-1电子教案教学课题项目6 CSS 3中的选择器6.1项目描述、6.2知识准备授课班级授课时间教学目标知识目标1.掌握CSS 3的基本语法；2.掌握CSS 3的引用方法。能力目标1.培养学生自主学习、分析问题和解决问题的能力；2.培养学生熟练运用所学知识的能力。德育目标1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质；2.培养学生的团队合作精神。学情分析通过前面知识的学习，已经掌握了代码编辑工具的使用、HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器以及网页中的表单创建方法。CSS 3是对页面布局、字体、颜色、背
2、景和其他图文效果的实现提供更加精确控制的一种技术。本节课学习CSS 3的基本语法和引用方法。教学重点1.CSS 3的基本语法；2.CSS 3的引用方法。教学难点1.CSS 3的基本语法；2.CSS 3的引用方法。教学方法项目教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过查看网页源代码中各元素CSS样式设置，导入本节课的内容。教师提出问题，学生可分组讨论，协作探究。技能学习单元格列行单元格列行单元格列行一、CSS 3基本语法CSS 3样式表是由若干条规则组成的，这些规则可以应用到 的元素或文档，来定义它们显示的外观。每一条样式规则由三部分
3、组成：选择器（selector）、属性（properties）和属性值（value），格式如下：选择器 样式属性: 属性值;选择器，可以采用多种形式，可以为文档中的HTML标签，如、等，也可以是class、id标签。样式属性，是选择器指定的标签所包含的属性。属性值，如果定义选择器的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。格式如下：选择器 样式属性1:取值1; 样式属性2:取值2; 二、CSS 3引用方法1.行内样式使用行内样式的具体方法是直接在HTML 5标签中使用style属性，该属性的内容是CSS的属性和值。格式如下：段落文字2.内嵌样式内嵌样式是将CSS样式代码添加到
4、与之间，并且用和标签进行声明。格式如下：pcolor: red;font-size: 12px;3.链接样式链接样式是CSS中使用频率最高，也是最实用的方法，它能很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML 5代码和CSS 3代码的完全分离，使前期制作和后期维护都非常方便。链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过链接标签链接到页面中，而且该链接语句必须放在页面的标签中，格式如下：其中rel指链接到样式表，其值为stylesheet；type表示样式类型为CSS样式表；href指定CSS样式表所在的位置。【例6-
5、1】CSS引用方法实例，代码如下所示。1 2 3 4 5 在HTML5中使用CSS的方法6 7 8 p9 color: red;10 font-size: 14px;11 12 13 14 15 16 这是使用行内样式的文字样式17 18 这是使用内嵌样式的段落文字样式19 这是使用链接样式的文字样式20 21 第6行链接的外部css文件是位于css文件夹下的style.css文件，代码如图所示。在Chrome浏览器中预览，效果如图所示。4.优先级问题如果一个页面采用了多种CSS使用方式，例如上例中使用行内样式、内嵌样式和链接样式。当这几种样式同时作用于一个标记时，就会出现优先级问题，究竟哪种
6、样式会有效果。【例6-2】CSS 3优先级实例，代码如下所示。1 2 3 4 5 CSS3优先级实例6 7 8 p9 color: red;10 font-size: 12px;11 12 13 14 15 16 样式优先级测试：17 行内样式优先级大于内嵌样式18 19 20 样式优先级测试：21 内嵌样式优先级大于链接样式22 23 24 第6行链接的外部css文件是位于css文件夹下的style1.css文件，代码如下。1 p2 font-size: 20px;3 color:green;4 在Chrome浏览器中预览，效果如图所示。教师操作演示，学生观看、实训。必要时要求一个具有典型特
7、质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。教师操作演示，学生观看、实训。必要时要求一个具有典型特质的学生与老师互动，共同完成操作任务，借此查看教学效果。知识归纳本节课学习了HTML5引入CSS的方法、CSS3的基本语法，掌握了行内样式、内嵌样式、链接样式以及样式的优先级及各类选择器的应用方法。知识点说明CSS基本语法选择器样式属性1:取值1;样式属性2:取值2;CSS引用方法行内式：直接在HTML 5标签中使用style属性 内嵌式：与之间，并且用和标签进行声明。链接样式
8、：在 之间，用标签链接外部的css文件CSS优先级行内样式内嵌样式链接样式教师讲授，学生归纳总结，并作适当的笔记。课后作业一、选择题1.CSS样式表由选择器、属性和属性值组成，下列_是CSS的正确格式。A h1color:red; B h1color:red;C h1(color:red;) D h1/color:red;/2.如果将多种样式写在同一个选择器中，应该用_符号分隔。A 惊叹号（！） B 冒号（：） C 分号（；） D 逗号（，）3.当一个HTML文件同时应用了三种声明方式并有重复样式时，优先级是_。A 行内样式内嵌样式链接样式B 内嵌样式行内样式链接样式C 内嵌样式链接样式行内样式D 链接样式内嵌样式行内样式二、上机实训上机完成例6-1和例6-2的实例操作。学生上机完成任务并提交，进行分组互评。教学反思感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用