HTML5+CSS3网页设计实战 教案 4.3 常见的选择器类型-类选择器

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.3常见的选择器类型该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 类选择器的特点，使用场合分析。（2） 比较id选择器，明确类选择器的优势所在。（3） 同一对象应用多个类的权重分析。能力目标：具备合理定义类选择器的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）通过id选择器和类选择器的对比实践，鼓励学生在计算机领域不断探索新知，勇于创新，培养批判性思维和解决问题的能力。类选择器的概念及运用。类选择器的特点，类选择器的使用场合，同一对象应用多个类的权重分析。通过成语解析概念，然后借助案例强化选择器的相关知识。同一对象应用多个类的权重分析。通过案例练习，让学生在体会权重的含义。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习对于一个企业页面来说，使用Id选择器对页面主体框架进行命名，应该如何命名？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入标签选择器影响的范围太广，而id选择器影响的作用太窄，实际应用上，我们可以采用id+标签选择器的组合来完成选择目标元素。但有时采用这种方式也不太适合，比如ul标签下的一组li元素，如何将其中某几个li进行样式定义？如果采用每个li定义id选择器，那在style标签内书写的样式申明工作量太大，为解决这种问题，今天我们了解“类选择器”。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.3.3类选择器用法示例：.center{text-align:center;color:red;}HTML元素也可以引用多个类。每个元素都可以设置一个或多个class（空格分隔），比如，<p>元素将根据CSS代码区的"center"和"large"样式进行设置，那可以写成：<pclass="centerlarge">本文文字会受到两个样式影响</p>知识点：类选择器有利于代码复用记忆关键词：屡次三番关键词解析：实际项目中一个元素为了能被多个样式应用对应效果，样式复用可以提高效率。简单地说，就是一个元素可以拥有多个类，一个类也可以应用到多个元素上。☆思政解说：（1）所有编程语言中，追求代码的重复利用，通常会将代码进行封装为函数等等。如同一台电脑的操作系统可以被多个用户登录，并非为不同用户安装多个同样的操作系统。（2）代码复用，类比“环保意识”，追求物品的重复利用。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例4】打开之前的“中华网”布局练习中，完成页头部分。（1）打开文件“第4章-常用选择器-ID选择器中华网.html”，把id选择器换成类选择器。修改后的CSS代码。（2）同样道理，我们把后面的id选择器改为类选择器。对应CSS代码。（3）我们需要把其中一个div容器的高度调整为特殊的400px，那可以为该容器再加上一个class类名。对应的CSS样式代码。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10Html结构容器结构正确。30类选择器的引用代码正确，名称合理。10多个类的引用类之间保留空格。10样式的定义样式顺序正确，属性值正确。40总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）类选择器的特点，使用场合分析。（2）比较id选择器，明确类选择器的优势所在。（3）同一对象应用多个类的权重分析。（4）通