HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-通配符和后代选择器

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.3常见的选择器类型该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 通配符选择器、后代选择器的用法。（2） 理解所学的选择器的优先级别。能力目标：（1） 具备使用后代选择器定义样式的能力。（2） 具备合理调整选择器权重的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。通配符选择器、后代选择器的用法后代选择器的写法，选择器的优先级别。通过成语解析概念，然后借助案例强化选择器的写法。选择器的优先级别。通过相关案例的选择器设置的前后对比，让学生加强理解与认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习类选择器对于id选择器，两者的使用场景有什么不同？基于后期的维护，哪种选择器更便捷一些？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入在我们接触的案例中，几乎每种标签都需要设置margin、padding为0，文字color属性，行高等等。我们可以采用通配符选择器将公共样式定义，这个通配符，类似于window搜索文件时，采用“*”代表任何多个字符的韵味。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.3.4通配符选择器（通用选择器）用法格式：*{属性:值；}body,ul,ol,li,h1,h2,h3,form,th,td{margin:0;padding:0}知识点：通配符选择器范围记忆关键词：一呼百诺、一呼百应关键词解析：通配符选择器，就是给所有的元素附加指定的样式。如果确实需要使用通配符，一般设置大部分元素都有的margin、padding、font-size、color这几个公共属性。☆思政讲解：加强学科间知识的融会贯通。通配符选择器采用的*号，来源于操作系统的通配符“*”，在系统中可以通过通配符来实现快速查找特定文件名称或扩展名的操作。4.3.5后代选择器用法格式：选择器1选择器2{属性:值;}知识点：后代选择器无视嵌套层次记忆关键词：株连蔓引、株连九族关键词解析：后代不仅仅是儿子，也包括孙子、重孙子，后代选择器可以通过空格一直延续下去，但不需要把完整的族谱写出来，比如可以声明为“父亲曾孙子”，而不需要申明为“父亲我儿子孙子曾孙子”。☆思政讲解：株连九族是旧封建时代下的产物，社会主义制度下早已摒弃这种株连蔓引的制度。但重要部门、岗位的应聘，也是需要政治审核。比如：公安招警政审除了对个人基本条件进行审查外，还会对考生的家庭背景、社会关系等进行深入调查。考生父母如果有反对国家政策，或者是有过犯罪记录及品质不端的行为，例如流氓、偷窃等行为被记录在案，都会对考生政审产生影响。提醒学生们，切勿以身试法，以免影响后代的教育、就业。4.3.6标签选择器、ID选择器、类选择器的优先权级别id选择器>类选择器>标签选择器>通用选择器知识点：优先级别与权重值记忆关键词：人微言轻、仗势欺人关键词解析： 当申明选择器时，想要样式发挥出作用，就看选择器的“背景”够不够雄厚。比如“我”这个选择器没什么份量，换一个说法“与企业有业务往来的我”，瞬间提高一个档位；当换成“与全球500强企业的中国银行有业务往来的我”，我边说这句话的时候，你是不是也认真听着？当有不同选择器指定了相同的属性，我们一般采用给目标选择器增加id或类选择器，增加它的权重值，一个不行再增加一个，父容器分不出胜负，再把爷辈容器搬出来，就是要依仗更大的“势”。☆思政讲解1：人微言轻虽然听上去是一个贬义词，但从另外一个角度思考，如果一个人地位高，他从视野、战略思考的问题，都不是普通人一般能考虑到的，所以想清楚这点，也就释然了。如果要实现话语有份量，我们要加强实力的同时，争取、把握表现自我能力的机会。☆思政讲解2：仗势欺人，列举现实生活中不少坑爹的案例，比如某著名演员的儿子仗着父亲的名气和地位，在中戏门口殴打自己的女朋友。某著名歌唱家儿子，依仗家庭背景显赫而肆意妄为，无视法律法规和社会公德，最终因强奸罪被判刑。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例5】尝试不同选择器的优先级别。（1）敲入如图4-28所示的代码，观察样式效果。图4-28优先权练习（2）有时候，恰好有多个样式对某个属性定义了不同数值，比如刚才的代码中我们修改成这样，文字将变成黄色，代码如图4-29所示。图4-29后申明的样式优先权较高但.highlight样式并不服气，想把文字调回绿色，但.highlight和.other都是类选择器，权重值相同，它想出一个主意，告诉浏览器“我爸是body标签，也就是body.highlight{color:green;}”，这时浏览器就会把它的权重增加，这段文字就会变回绿色。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Html代码容器结构正确，缩进整齐。30Css代码样式定义正确，样式名称合理。60总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点