HTML5+CSS3网页设计实战 教案 7.1~3 外部样式表、优先级别、关系选择器

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。27.1外部样式表，7.2CSS样式优先权，7.3更多的CSS选择器该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 巩固外部样式表知识。（2） 理解选择器的优先级别。（3） 掌握关系选择器，如子元素选择器、相邻兄弟选择器、兄弟元素选择器。能力目标：（1） 具备合理使用关系选择器的意识。（2） 具备分辨选择器优先级别的能力。素养目标：（1） 了解本章成语的出处，理解成语含义与知识点理解的结合。Css选择器优先级、关系选择器外部样式表，子元素选择器的概念。通过成语解析概念，然后借助案例强化选择器的概念及对应写法。子元素选择器的应用。通过案例讲解，让学生在不同场景中体会选择器的用法。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习尝试用知识导图将上一章节的内容进行描述。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入前面通过专项的练习，我们已经具备有一定的布局能力，也初步理解了常用样式的用法。Css样式既然是提供外观的定义，这就意味着能完成许多美观、独特的样式表现，因此我们需要进一步了解css知识。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授7.1外部样式表因为案例内容代码量不大，前建议初学者先在文件内部写，等完全写完样式后，才采用外部css文件的写法。一个复杂的网站，主页、栏目页、详情页有自己的css外部文件，但很多样式可以在许多文件中共享使用，所以在实际网站中，往往一个HTML页面链接了多个外部样式表。知识点：外部样式表的样式复用记忆关键词：叠矩重规关键词解析： 许多html文件使用到的重复的css样式，采用外部样式表存放，可谓“重规”。外部样式表有若干个，当一个html文件引用了多个外部样式表，换言之就是有多个外部样式的若干个样式一起叠加在该文件中，可谓“叠矩”。☆思政讲解：这一成语可以理解为对规则、制度、纪律的严格遵守与传承，体现了对规范性和秩序性的高度重视。“叠矩重规”也强调了创新与传承的统一。在遵循规矩的基础上，我们要勇于探索、敢于创新，不断推动规则制度的完善与发展。这种在传承中创新、在创新中传承的精神，正是思政教育所倡导的实践与探索精神。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。7.2进一步了解CSS样式优先权从样式表代码所在位置来说：内部样式表比外部样式表优先。从样式表文件内部来说：!important>内联样式（行内样式）>ID选择器>类选择器>元素选择器（标签选择器）7.3掌握更多的CSS选择器CSS包含了数十种选择器，只要学习过程中我们碰到与我们所学知识不同的选择器，届时在百度搜索相关资料。除了前面练习的ID选择器、类选择器、标签选择器、通用选择器以外，我们介绍一下另外一些选择器。7.3.1关系选择器关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、相邻兄弟选择器、兄弟元素选择器。后代选择器我们在前面的章节大量使用，这里就不论述了。子元素选择器子元素选择器作用是找到指定标签的直接子元素。两个选择器之间使用“>”号连接，中间不要留空格，否则选择器无法生效。用法示例：.footer>p{color:red;}先找到类名为".footer"的标签，然后在这个标签中查找所有名称叫做"p"的儿子元素。知识点：子元素选择器特点记忆关键词：子承父业关键词解析：子元素选择器只会查找儿子，不会查找其他嵌套的标签，简单地说，父亲元素寻找的传承目标只能是儿子，不能是孙子、曾孙等隔代传承。☆思政讲解：，“子承父业”体现了对家族荣誉与责任的尊重与承担。它要求子女在继承父辈事业的同时，也要继承其勤劳、诚信、创新等优秀品质，将这些精神财富代代相传，形成家族特有的文化积淀。“子承父业”还体现了对传统文化的尊重与传承。在快速变化的社会环境中，传统文化往往面临着被遗忘或边缘化的风险。而“子承父业”则要求我们在继承父辈事业的同时，也要积极传承和弘扬传统文化，使其成为连接过去与未来的桥梁。演示网页效果，解说各类型样式的优先级。任务实施【案例1】请尝试如图7-4所示的代码，并在子元素选择器的“>”前面添加空格后再预览效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。20练习1子元素选择器应用正确，效果达到预期80总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能