版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第课CSS3第课CSS3基础知识和选择器的使用的基基本本PAGE142121CSS21CSS3基础知识和选择器的使用第课PAGE13212CSS3基础知识和选择器的使用第212CSS3基础知识和选择器的使用第课PAGE1
课题CSS3基础知识和选择器的使用课时2课时（90min）教学目标知识技能目标：（1）了解CSS3的发展历程（2）掌握CSS3的语法规则，以及在HTML5页面中添加CSS3样式的方法（3）学习CSS3选择器的使用方法（4）掌握CSS3样式的继承性与层叠性思政育人目标：（1）培养学生举一反三，以及通过发散式思维去解决问题的能力（2）帮助学生在模仿中提高创新能力和创新意识教学重难点教学重点：CSS3的语法规则、CSS3的继承性和层叠性教学难点：CSS3中选择器的使用方法教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（23min）→课堂作业（12min）→交流讨论（4min）第2节课：问题导入（4min）→知识讲解（24min）→课堂练习（10min）→课堂小结（5min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课考勤
（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知
（4min）【教师】概述CSS3脚本语言，引出本节课内容随着HTML功能的不断完善，结构代码和样式代码的混合使用让HTML代码十分混乱，同时为网页的维护工作增加了难度，此时CSS应运而生，它将网页的结构层和表现层分离开来，大大简化了HTML代码【教师】提出问题，让学生思考，发言CSS3语言和HTML语言有何联系？如何使用CSS3语言？如何将CSS3语言嵌入到HTML语言中【学生】聆听、思考、发言通过介绍CSS3语言的特点，让学生主动思考如何编写CSS3语言，激发学生的求知欲，引起学生的学习兴趣知识讲解
（23min）【教师】讲解CSS3的发展历程1994年，哈坤·利提出了CSS的最初设想，并和伯特·波斯一拍即合，决定共同开发CSS。在这一年的年底，哈坤在芝加哥的一次会议上展示了CSS的设想，并于次年再次向业内展示。当时刚成立的W3C对此很感兴趣，为此组织了讨论会。1996年12月，W3C发布了CSS的第一个版本CSS1。1997年，W3C组织专门负责CSS的工作组开始讨论CSS1中没有涉及的问题。1998年5月，W3C发布了CSS2。2005年12月，W3C开始制定CSS3的标准，到目前为止该标准还没有最终定稿。虽然完整的CSS3标准还未发布，但主流浏览器已经开始支持其中的大部分特性。【学生】聆听、思考、记录【教师】介绍CSS3的语法规则CSS3的语法规则是由选择器和声明组成的，通过选择器匹配HTML文档中的不同元素，并对它们应用声明中设置的样式属性下面分别介绍各组成部分（1）选择器用于匹配应用声明的某个或某些元素。（2）声明可以有若干个，声明之间用分号隔开并放置在一对大括号中，它们命令浏览器如何渲染指定对象。声明由属性和属性值两部分组成。（3）属性是CSS3提供的样式选项，属性名一般由一个或多个单词组成，多个单词中间用连字符连接。（4）属性值是设置属性效果的参数，可以是数值、单位或关键字。【教师】提出问题，让学生讨论CSS3的语法规则跟HTML语言有何不同，跟哪种语言比较接近【学生】讨论、思考【教师】在HTML5页面中添加CSS3样式1．行内样式表行内样式也称为内联样式，是直接为HTML标签设置style属性，具体格式为：<标签名style="属性1:属性值1;属性2:属性值2;……">内容</标签名>其中，style是标签的属性，它自身又包括了多个属性，这些属性与属性值的规范与CSS3样式规则相同。行内样式只对其所在的标签起作用。2．内嵌样式表内嵌样式是将CSS3代码写在HTML5文档的头部标签中，并且用<style>标签标记，具体格式为：<head> <styletype="text/css"> {属性1:属性值1;属性2:属性值2;} </style></head>其中，type属性值为“text/css”表示<style>标签所包含的是样式代码，该属性只有这一个属性值，在HTML5中可以将其省略。3．链接样式表链接样式是将所有样式放在一个或多个扩展名为“.css”的外部样式表文件中，然后使用<link/>标签将样式表文件链接至HTML5文档中，具体格式为：<linkhref="CSS3文档位置"type="text/css"rel="stylesheet"/>其中，<link/>标签需放在<head>标签中，href属性指定CSS文档的位置，type与rel属性用于表明连接是一个CSS3样式表文件。【学生】记录、思考、总结【教师】演示参考代码为任务1.1中创建的“1-1.html”文档添加行内样式，设置标题、段落标签的字号与文本颜色。代码如下：<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>第一个HTML5文档</title> </head> <body> <h1style="font-size:40px;color:red;">第一个标题</h1> <pstyle="font-size:30px;color:green;">第一个段落</p> </body></html>上述代码的页面效果如图1-17所示图1-17添加CSS3样式后的页面效果【学生】观察运行结果，思考、记录通过讲解知识点，让学生了解CSS3的语法规则课堂实操
（12min）【教师】演示使用DW创建样式表文件，并将其链接至HTML5文档的方法（1）打开DW，单击“文件”面板上方的“站点”下拉按钮，在展开的列表中选择“projectone”选项，打开“projectone”站点。（2）右击“站点-projectone”，在展开的快捷菜单中选择“新建文件”选项，面板中自动创建一个新文档。（3）打开新建的文档，在编辑窗口中输入代码后保存文档。（4）在“文件”面板中双击html文档，其代码显示在编辑窗口中。在head标签中添加CSS3代码，将其链接至样式表文件。（5）保存文档后，在浏览器中打开文档，观看页面效果。【学生】参照教师的演示进行操作通过课堂练习，让学生巩固本节课的知识点，加深对CSS3基本语法的印象交流讨论
（4min）【教师】总结本节课的内容，对不同小组设置不同讨论点（1）概述CSS3脚本语言的发展历程（2）阐述CSS3语言的特点（3）分析CSS3语言的语法规则【学生】进行组内讨论，巩固理解理论内容通过老师设置的讨论点，让学生有自我展示的平台，提高学生的交流表达能力第二节课问题导入
（4min）【教师】打开SublimeText编辑器，提出问题，让学生思考根据前面所学的知识，已经掌握了CSS3的基础语法，如何使用CSS3游刃有余的设置网页格式？如何通过实际情况选择合适的选择器【学生】聆听、思考教师提出问题，通过问答的形式，激发学生对CSS3语言的兴趣知识讲解
（24min）【教师】介绍基本选择器1．标签选择器HTML文档是由很多标签组成的，标签选择器就是直接引用标签名的选择器。使用标签选择器可以统一设置使用某类标签设置的元素的样式。例如，以下代码使用了body标签选择器。body{font-size:20px;color:lightblue;}标签选择器是最常用的选择器，通常用它来统一设置某些元素的基本样式*{margin:0;padding:0;border:0;list-style:0;}2．类选择器类选择器以“.”为前缀，跟随一个自定义类名。类选择器可以使不同的元素拥有相同的样式，也可以使相同的元素拥有不同的样式。类选择器可以通过设置class属性实现，就是说在定义好选择器后，还需要为标签设置class属性值（class属性可以包含类列表，多个属性值之间用空格隔开）为类选择器的名称，这样才能将类选择器样式应用于标签。此外，还可以把标签与类捆绑在一起，来限定类的适用范围，这种限定方式称为指定类选择器。3．ID选择器ID选择器以“#”为前缀，跟随一个自定义的ID名。ID选择器可以通过设置id属性实现，就是在定义好ID选择器后，需要设置标签的id属性值为ID选择器的名称，以将ID选择器应用于标签。ID选择器的使用方式与类选择器基本相同，区别在于ID选择器只能应用于HTML文档中的一个元素，而类选择器可以应用于多个元素。【学生】聆听、理解、记录【教师】介绍组合选择器如果需要设置复杂的网页样式，只使用基本选择器是不够的，此时可以使用组合选择器来精确地匹配页面元素，下面介绍几种常用的组合选择器。1．包含选择器包含选择器通过空格连接两个选择器，前面选择器表示包含的祖先元素，后面选择器表示被包含的后代元素。2．子选择器子选择器通过“>”连接两个选择器，前面选择器表示要匹配的父元素，后面选择器表示被包含的子元素。3．相邻选择器相邻选择器通过“+”连接两个选择器，只有满足这个连接顺序的、同级的、相邻的元素才会成功匹配。4．兄弟选择器兄弟选择器通过“~”连接两个选择器，它在相邻选择器的基础上，通过连接顺序匹配相邻的元素之后，会将后续同级别的该类型元素一同匹配。【学生】聆听、理解、记录【教师】介绍属性选择器：nava[id]{border:2pxsolid#2f4f4f;background:white;
color:cadetblue;}nava[id="first"]{border:2pxsolid#2f4f4f;background:white;
color:cadetblue;}nava[title~="web"]{background:lightcyan;color:#2f4f4f;}nava[title^=http]{background:#ffffff;color:#2f4f4f;}nava[title$="link"]{background:lightcyan;color:#2f4f4f;}nava[title*="t"]{background:lightcyan;color:#2f4f4f;}nava[lang|="zh"]{background:#ffffff;color:darkolivegreen;}【教师】介绍伪类选择器【学生】聆听、思考【教师】多媒体展示参考案例<style> a:link{color:black;} a:visited{color:beige;}</style>……<body> <ahref="#">《HTML5+CSS3项目开发案例教程》微课视频</a></body>【学生】观察参考案例，思考、记录【教师】介绍CSS3的继承性和层叠性【学生】聆听、思考、记录通过讲解知识点，让学生了解CSS3语言中选择器的使用课堂练习
（10min）【教师】布置课堂练习【教师】演示重点操作流程table{ text-align:center;border-collapse:collapse; line-height:1.2;width:100%;}/*设置表格中的文本居中对齐，合并单元格边框，设置1.2倍行间距，宽度为页面的100%*/th,td{ font-size:15px;padding:3px5px; cursor:pointer;border:solid2px#445a46;}/*设置单元格的字号为15px，上下内边距3px，左右内边距5px，鼠标指针移至其上时变为手型指针，增加宽度为2px的边框*/（2）theadth{ font-size:20px;font-weight:bold; text-align:center;background:#a8a8a8;color:#fcfcfc;}/*设置表头的字号为20px，字体加粗显示，居中对齐，增加背景颜色，更改文本颜色*/tbodyth{ background:url(images/p1.png)8px40%no-repeat; padding-left:26px;}/*设置表格背景图片，只出现一次，左内边距为26px*/【学生】完成课堂练习【教师】公布课堂练习答案【学生】对照参考答案，修改内容利用练习法，加强学生对CSS3语言的使用课堂小结
（5min）【教师】简要总结本章的知识要点本节课学习了CSS3的发展历程、CSS3的语法规则、在HTML5页面中添加CSS3样式的方法、CSS3选择器的使用方法、CSS3样式的继承性与层叠性。。希望大家在课后多加练习，巩固所学知识【学生】总结回顾知识点总结知识点，巩固印象作业布置（2min）【教师】布置课后作业使用DW按照下列要求创建“HTML5网上
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论