HTML5+CSS3网页设计实战 教案 7.3 关系选择器-相邻、兄弟元素选择器

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.3掌握更多的CSS选择器该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 巩固外部样式表知识。（2） 理解选择器的优先级别。（3） 掌握关系选择器，如子元素选择器、相邻兄弟选择器、兄弟元素选择器。能力目标：（1） 具备合理使用关系选择器的意识。（2） 具备分辨选择器优先级别的能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。相邻兄弟选择器、兄弟元素选择器相邻兄弟选择器、兄弟元素选择器的概念。通过成语解析概念，融合思政元素讲解，强化对选择器概念的认识。相邻兄弟选择器、兄弟元素选择器的应用。通过唐诗案例，加强难点知识的学习同时加强对中华文化的认同。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习回顾已学的选择器，Css选择器优先级从高到低怎么排序？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入CSS包含了数十种选择器，只要学习过程中我们碰到与我们所学知识不同的选择器，届时在百度搜索相关资料。除了前面练习的ID选择器、类选择器、标签选择器、通用选择器以外，我们介绍一下另外一些选择器。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授相邻兄弟选择器相邻兄弟选择器可选择紧接在另一元素后的元素，强调后者与前者是相邻关系，且二者有相同父元素。可以理解成：兄长+第一个弟弟。例如，如果要增加紧接在h1元素（哥哥）后紧接着出现的段落p元素（弟弟）的文字颜色，可以这样写：h1+p{color:red;}知识点：相邻兄弟选择器特点记忆关键词：近水楼台关键词解析： 兄弟元素选择器只会选中与哥哥（“+”号前面的元素）紧挨着的弟弟，而且这个弟弟符合“+”号后方指定的类型。 请问如图7-5所示的代码，p段落的文字预览后是什么颜听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。色？为什么？2.兄弟元素选择器兄弟元素选择器是选择当前元素的所有同级元素。可以理解成：兄长~所有弟弟。例如，如果要增加紧接在h1元素后出现的所有段落p元素的行高，可以这样写：h1~p{line-height:1.5em;} 知识点：兄弟元素选择器特点记忆关键词：手足之情关键词解析： 与相邻兄弟选择器不同，兄弟元素选择器不仅关心紧挨着参考元素的下一个兄弟，还关心所有在参考元素之后的所有兄弟。正如二哥分糖果时，只要是他的任何弟弟妹妹，都会收到糖果，但这位哥哥并不会把糖果留给大哥和自己。☆思政讲解：在校园环境中，“手足之情”体现为同学们之间的相互扶持与关爱。无论是学习上的困难，还是生活中的挫折，同学们都能像兄弟姐妹一样，伸出援手，共同面对。这种情感不仅加深了同学之间的友谊，更培养了大家的集体荣誉感和团队协作精神。演示案例2的页面效果，讲解兄弟元素选择器的用法。任务实施【案例1】请尝试如图7-4所示的代码，并在子元素选择器的“>”前面添加空格后再预览效果。【案例2】使用兄弟元素选择器完成如图7-6所示的特定行的样式。☆思政讲解：唐诗是中华文化悠久历史的见证与传承。每一首唐诗都是那个时代社会风貌、人民情感与思想智慧的结晶，它们以优美的语言、深邃的意境，展现了中华文化的博大精深与独特魅力。世界上没有第二种语言比汉语言文化更加灵活、精彩。比如有个汉语十级的笑话，阿呆给朋友送红包时，两人有如下对话:朋友:“你这是什么意思?”朋友:“没什么，意思意思。”朋友:“你这就不够意思了。”阿呆:“小意思，小意思。”朋友:“你这人真有意思。”阿呆:“其实也没有别的意思。”朋友:“那我就不好意思了。”阿呆:“是我不好意思。”请解释上文中每个“意思”的意思。（1）编写下图所示的HTML代码，如图7-7所示。（2）编写对应的CSS代码，如图7-8所示。（3）保存文件后预览效果是否达到预期。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。20练习1相邻兄弟选择器使用正确。40练习2兄弟元素选择器使用正确。40总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能