《web前端技术》(赵敏)003-0教案 第8课 CSS3基础（下）_第1页
《web前端技术》(赵敏)003-0教案 第8课 CSS3基础（下）_第2页
《web前端技术》(赵敏)003-0教案 第8课 CSS3基础（下）_第3页
《web前端技术》(赵敏)003-0教案 第8课 CSS3基础（下）_第4页
《web前端技术》(赵敏)003-0教案 第8课 CSS3基础（下）_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE1PAGE1PAGE2PAGE2

课题第8课CSS3基础（下）课时2课时（90min）教学目标知识技能目标：掌握伪类选择器、伪元素选择器和属性选择器的使用方法（2）熟悉CSS3的特性，包括继承性、层叠性和优先级素质目标：（1）学习CSS3的基础知识，激发专业思维，夯实知识基础（2）感受中国优秀传统文化，增强爱国意识，提升民族自豪感教学重难点教学重点：伪类选择器、伪元素选择器的使用方法教学难点：区分不同属性选择器的使用方法教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（25min）→课堂练习（15min）第2节课：→→传授新知（10min）→实战演练（17min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务回顾上节课的知识点，并预习新课，回顾什么是CSS3选择器？CSS3选择器有哪些类型？并查找资料，进行扩充【学生】完成课前任务通过课前任务，让学生回顾上节课知识点，使学生加深对CSS3选择器的了解考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】回顾上节课知识点，提问学生，并引入新的知识CSS3选择器除了基本选择器、复合选择器2类，还有哪些分类？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）5.3.3伪类选择器【教师】讲解伪类选择器的使用方法,并举例子说明伪类用于定义元素的特殊状态。伪类选择器以英文冒号“:”为前缀，跟随伪类名，在冒号前可以使用其他选择器限制伪类应用的范围，其基本格式为：选择器名:伪类名{属性1:属性值1;属性2:属性值2;…}1．动态伪类选择器动态伪类选择器用于设置行为类样式，就是用户与页面进行交互时页面的样式。动态伪类选择器包括两种形式。（1）锚点伪类……（详见教材）（2）行为伪类……（详见教材）【课堂拓展】同时使用“:link”“:visited”“:hover”和“:active”设置超链接的样式时，“:hover”必须定义在“:link”和“:visited”之后，否则“:hover”选择器设置的样式将无法显示；“:active”必须定义在“:hover”之后，否则“:active”选择器设置的样式将无法显示。2．结构伪类选择器结构伪类选择器可以根据文档的结构匹配元素……（详见教材）3．否定伪类选择器:not()表示否定伪类选择器，用于匹配非指定元素或选择器的每个元素。例如，匹配非p元素的每个元素使用:not(p)。4．状态伪类选择器CSS3中包含十几种状态伪类选择器，常用的有以下3种。:enabled，……（详见教材）:disabled，……（详见教材）:checked，……（详见教材）【例5-3】使用伪类选择器设置网页元素样式……（详见教材）【学生】聆听、记录、理解、观看效果5.3.4伪元素选择器【教师】讲解伪元素选择器的使用方法,并举例子说明伪元素选择器用于定义元素指定部分的样式，以双冒号为前缀，跟随伪类或伪类对象，在双冒号前可以使用其他选择器限制伪类应用的范围，其基本格式为：选择器名::伪类名{属性1:属性值1;属性2:属性值2;…}CSS3中，常用的伪元素选择器有::before选择器和::after选择器。::before选择器::after选择器【例5-4】使用伪元素选择器在指定元素前后插入指定内容……（展示表格“常见的结构伪类选择器及其说明”，辅助讲解，详见教材）【学生】聆听、记录、理解、观看效果5.3.5属性选择器【教师】演示例子，并通过例子讲解属性选择器的使用方法，展示不同选择器的不同的效果属性选择器根据标签的属性匹配元素。CSS3中共有7种属性选择器，为便于后面讲解，此处先创建一个简单的HTML5页面，本节中的所有选择器都将针对该页面进行操作。【例5-5】创建一个简单的导航示例。在<body>标签中构建导航示例的结构，在<head>标签中添加<style>标签，并使用标签选择器设置导航示例的样式……（详见教材）1．E[attr]选择器E[attr]选择器是最基本的属性选择器，用于匹配所有拥有attr属性的E元素，无论attr属性值是什么。……（详见教材）2．E[attr="value"]选择器E[attr="value"]选择器用于匹配attr属性值为“value”的E元素，它缩小了匹配范围，能够更加精确地匹配需要的元素。……（详见教材）3．E[attr~="value"]选择器E[attr~="value"]选择器用于匹配attr属性值列表中包含了“value”的E元素，不需要完全匹配。……（详见教材）4．E[attr^="value"]选择器E[attr^="value"]选择器用于匹配attr属性值以“value”开头的E元素。例如，匹配title属性值以“http”开头的a元素，……（详见教材）5．E[attr$="value"]选择器E[attr$="value"]选择器用于匹配attr属性值以“value”结尾的E元素。例如，匹配title属性值以“link”结尾的a元素，设置其背景、字体颜色。……（详见教材）6．E[attr*="value"]选择器E[attr*="value"]选择器用于匹配attr属性值中包含字符串“value”的E元素，无论“value”在属性值的什么位置。例如，匹配title属性值中含有“t”的a元素，设置其背景、字体颜色，……（详见教材）【课堂拓展】E[attr*="value"]选择器与E[attr~="value"]选择器的不同之处在于，E[attr~="value"]选择器匹配的值需要包含在值列表中并用空格隔开，而E[attr*="value"]选择器没有这个限制，“value”字符串出现在属性值的任意位置都能够匹配成功。7．E[attr|="value"]选择器E[attr|="value"]选择器用于匹配attr属性值为“value”或以“value”开头的元素。例如，匹配lang属性值为“zh”或以“zh”开头的a元素，设置其背景、字体颜色，……（详见教材）【学生】观看效果、聆听、记录、理解通过教师的讲解使学生了解伪类选择器、伪元素选择器、属性选择器的使用方法，并应用到例子中，理论与实践结合，使学生理解更加深刻，达到更好的学习效果课堂练习（15min）【教师】要求学生根据【例5-3】、【例5-4】、【例5-5】，自行制作创新项目，可融合伪类选择器，伪元素选择器，属性选择器三种选择器的使用方法，不会的可进行讨论或询问老师制作项目、讨论【教师】游走答疑通过例子动制作自己的项目，使学生巩固所学知识，掌握不同选择器的使用方法，锻炼动手操作能力和创新能力第二节课问题导入（3min）【教师】提出问题CSS3是CSS(层叠样式表)的升级版本，CSS3有哪些特性？【学生】思考、讨论、回答通过问题导入，引发学生思考和讨论，引入新课传授新知（10min）5.4CSS3的继承性和层叠性【教师】讲解CSS3的继承性和层叠性，并举例子说明CSS3样式具有两个最基本的特性，分别是继承性和层叠性。5.4.1继承性继承性是指在HTML5结构中，后代元素会继承祖先元素的CSS3样式。能够被继承的属性包括字体类型、字号、字体颜色、行距等，不能被继承的属性包括边框、边界、背景、定位、布局、尺寸等。例如，设置body元素的字号为20px，那么在网页中除了单独设置过字号样式的元素外，其他元素都将继承该属性。5.4.2层叠性层叠性是指当为一个元素设置了多个样式时，这些样式会根据各自的权重来确定呈现的优先级，然后其中一个值会层叠/覆盖掉其他值，并显示最终效果。各类选择器的权重值ID选择器：100类、伪类与属性选择器：10标签选择器：1通配选择器：0【例5-6】创建HTML5文档，参照以下代码段分别在<style>和<body>标签中输入代码，并为p元素设置两种样式，……（详见教材）【课堂拓展】CSS3中含有一个特殊的声明“!important”，写在样式代码的最后，用于提高指定样式规则的优先级，它的权重值为正无穷。【学生】观看效果、聆听、记录、理解通过讲解理论知识，并应用例子说明，使学生掌握CSS3的继承性和层叠性实战演练（17min）为“金企鹅教育”网站主页链接样式表【教师】先演示下最终效果，再讲解练习中较为重要和学生容易出错的地方，再要求学生制作“为“金企鹅教育”网站主页链接样式表”项目，遇到不会的问题可以扫描微课二维码观看视频”制作“为“金企鹅教育”网站主页链接样式表“（详见教材），可讨论或咨询老师，可互相帮助前几章中已经为“金企鹅教育”网站主页添加了多个模块，但是由于该网页文件未链接CSS样式表，导致网页的页面效果杂乱无章。步骤1前几章中已经为“金企鹅教育”网站主页添加了多个模块，但是由于该网页文件未链接CSS样式表，导致网页的页面效果杂乱无章。……（详见教材）步骤2弹出“新建css文件”对话框，输入css文件名称“index”，选择模板“default”，然后单击“创建(N)”按钮，……（详见教材）步骤3“金企鹅教育”网站主页的样式表创建成功，文档显示在编辑窗口中，……（详见教材）步骤4使用ID选择器设置导航栏样式，使用标签选择器、类选择器、复合选择器等设置网页其他元素样式……（详见教材）步骤5打开“index.html”文档，使用链接样式表在网页中引入CSS3样式……（详见教材）通过制作“为“金企鹅教育”网站主页链接样式表“，使学生巩固所学知识，锻炼动手操作能力，通过学生讨论和咨询，可活跃课堂气氛，拉近学生和老师之间，学生与学生之间的距离，提高学生学习积极性实战拓展(10min)【教师】要求学生根据上课所学知识，要求将自己小队项目的网页链入CSS样式表，要求界面合理美观，可以互相讨论或询问老师【学生】讨论、思考、操作通过实践操作任务，使学生巩固对CSS3样式特性的掌握，并锻炼学生的动手操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要讲解了CSS选择器中伪类选择器、伪元素选择器和属性选择器的使用方法和CSS3的特性。通过本节课的学习，读者应重点掌握以下内容。（1）表伪类选择器分为动态伪类选择器、动态伪类选择器、否定伪类选择器、状态伪类选择器。（2）常用的伪元素选择器有::before选择器和::after选择器。（3）CSS3中共有7种属性选择器，分别为E[attr]选择器、E[attr="value"]选择器、E[attr~="value"]选择器、E[attr~="value"]选择器、E[attr$="value"]选择器、E[attr$="value"]选择器、E[attr|="value"]选择器。（4）CSS3样式具有两个最基本的特性，分别是继承性和层叠性。【学生】总结回顾知识点总结知识点，巩固学生对伪类选择器、伪元素选择器、属性选择器的分类的掌握，和CSS3样式特性的理解作业布置（2min）【教师】布置课后作业个人作业：请根据课堂所学知识，完成课后习题和实训练习，实训练习请将制作界面截图并加上自己水印上传至文旌课堂APP团队作业：完成队伍项目链入CSS样

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论