《Web前端开发》教学讲义 Web前端设计基础 项目六-1.docxVIP

教学课题 项目6 CSS 3中的选择器—6.1项目描述、6.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握CSS 3的基本语法； 2.掌握CSS 3的引用方法。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过前面知识的学习，已经掌握了代码编辑工具的使用、HTML的基本结构、图文混排的方法、网页中表格的制作方法、如何创建超链接和制作音视频播放器以及网页中的表单创建方法。 CSS 3是对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确控制的一种技术。本节课学习CSS 3的基本语法和引用方法。 教学重点 1.CSS 3的基本语法； 2.CSS 3的引用方法。 教学难点 1.CSS 3的基本语法； 2.CSS 3的引用方法。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过查看网页源代码中各元素CSS样式设置，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 单元格列行单元格列行单元格列行一、CSS 3基本语法 单元格 列 行 单元格 列 行 单元格 列 行 CSS 3样式表是由若干条规则组成的，这些规则可以应用到 的元素或文档，来定义它们显示的外观。 每一条样式规则由三部分组成：选择器（selector）、属性（properties）和属性值（value），格式如下： 选择器{ 样式属性: 属性值;} 选择器，可以采用多种形式，可以为文档中的HTML标签，如body、p等，也可以是class、id标签。 样式属性，是选择器指定的标签所包含的属性。 属性值，如果定义选择器的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。格式如下： 选择器 { 样式属性1:取值1; 样式属性2:取值2; …… } 二、CSS 3引用方法 1.行内样式 使用行内样式的具体方法是直接在HTML 5标签中使用style属性，该属性的内容是CSS的属性和值。格式如下： p style=color: red;段落文字/p 2.内嵌样式 内嵌样式是将CSS样式代码添加到head与/head之间，并且用style和/style标签进行声明。格式如下： head style type=text/css p{ color: red; font-size: 12px; } /style /head 3.链接样式 链接样式是CSS中使用频率最高，也是最实用的方法，它能很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML 5代码和CSS 3代码的完全分离，使前期制作和后期维护都非常方便。 链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过link链接标签链接到页面中，而且该链接语句必须放在页面的head标签中，格式如下： link rel=stylesheet type=text/css href=style.css 其中rel指链接到样式表，其值为stylesheet；type表示样式类型为CSS样式表；href指定CSS样式表所在的位置。 【例6-1】CSS引用方法实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title在HTML5中使用CSS的方法/title 6 link rel=stylesheet type=text/css href=css/style.css 7 style type=text/css 8 p{ 9 color: red; 10 font-size: 14px; 11 } 12 /style 13 /head 14 body 15 div style=width:240px;font-size: 18px;background: red; 16 这是使用行内样式的文字样式 17 /div 18 p这是使用内嵌样式的段落文字样式/p 19 span这是使用链接样式的文字样式/span 20 /body 21 /html 第6行链接的外部css文件是位于css文件夹下的style.css文件，代码如图所示。 在Chrome浏览器中预览，效果如图所示。 4.优先级问题 如果一个页面采用了多种CSS使用方式，例如上例中使用行内样式、内嵌样式和链接样式。当这几种样式