HTML5+CSS3网页设计实战 教案 第7章 CSS进阶知识

教学单元第七章CSS进阶知识教学内容Css选择器优先级、关系选择器学习资源任务单、PPT、专题网站等。学时2学时学习目标知识目标：巩固外部样式表知识。理解选择器的优先级别。掌握关系选择器，如子元素选择器、相邻兄弟选择器、兄弟元素选择器。能力目标：具备合理使用关系选择器的意识。具备分辨选择器优先级别的能力。素养目标：了解本章成语的出处，理解成语含义与知识点理解的结合。学习重点外部样式表，子元素选择器、相邻兄弟选择器、兄弟元素选择器的概念。学习难点子元素选择器、相邻兄弟选择器、兄弟元素选择器的应用。教学方法讲授法、演示法、任务驱动法教学过程教学环节学习内容学习时间（分钟）复习无0引入前面通过专项的练习，我们已经具备有一定的布局能力，也初步理解了常用样式的用法。Css样式既然是提供外观的定义，这就意味着能完成许多美观、独特的样式表现，因此我们需要进一步了解css知识。3任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。2知识讲授7.1外部样式表因为案例内容代码量不大，前建议初学者先在文件内部写，等完全写完样式后，才采用外部css文件的写法。一个复杂的网站，主页、栏目页、详情页有自己的css外部文件，但很多样式可以在许多文件中共享使用，所以在实际网站中，往往一个HTML页面链接了多个外部样式表，如图7-1所示。图7-1链接多个外部样式表知识点：外部样式表的样式复用知识点：外部样式表的样式复用记忆关键词：叠矩重规关键词解析： 许多html文件使用到的重复的css样式，采用外部样式表存放，可谓“重规”。外部样式表有若干个，当一个html文件引用了多个外部样式表，换言之就是有多个外部样式的若干个样式一起叠加在该文件中，可谓“叠矩”。成语出处： 《三国志·蜀书·郤正传》：“君臣协美于朝，黎庶欣戴于野，动若重规，静若迭矩。” 叠矩重规——意思是规与规相重，矩矩与相迭，度数相同，完全符合。原比喻动静合乎法度或上下相合，后形容模仿、重复。☆思政讲解：这一成语可以理解为对规则、制度、纪律的严格遵守与传承，体现了对规范性和秩序性的高度重视。“叠矩重规”也强调了创新与传承的统一。在遵循规矩的基础上，我们要勇于探索、敢于创新，不断推动规则制度的完善与发展。这种在传承中创新、在创新中传承的精神，正是思政教育所倡导的实践与探索精神。7.2进一步了解CSS样式优先权从样式表代码所在位置来说：内部样式表比外部样式表优先。从样式表文件内部来说：!important>内联样式（行内样式）>ID选择器>类选择器>元素选择器（标签选择器）请看以下例子，HTML及CSS代码如图7-2所示。【教师演示、讲解】演示网页效果，解说各类型样式的优先级。图7-2css优先权预览的效果如图7-3所示。图7-3预览效果当然，css样式优先级别远没有这么简单，还要考虑样式申明的顺序、其他更多的选择器优先级别，但作为本课程内容，我们要求掌握这么多就可以了。7.3掌握更多的CSS选择器CSS包含了数十种选择器，只要学习过程中我们碰到与我们所学知识不同的选择器，届时在百度搜索相关资料。除了前面练习的ID选择器、类选择器、标签选择器、通用选择器以外，我们介绍一下另外一些选择器。7.3.1关系选择器关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、相邻兄弟选择器、兄弟元素选择器。后代选择器我们在前面的章节大量使用，这里就不论述了。子元素选择器子元素选择器作用是找到指定标签的直接子元素。两个选择器之间使用“>”号连接，中间不要留空格，否则选择器无法生效。用法示例：.footer>p{color:red;}先找到类名为".footer"的标签，然后在这个标签中查找所有名称叫做"p"的儿子元素。知识点：知识点：子元素选择器特点记忆关键词：子承父业关键词解析：子元素选择器只会查找儿子，不会查找其他嵌套的标签，简单地说，父亲元素寻找的传承目标只能是儿子，不能是孙子、曾孙等隔代传承。成语出处： 宋·释道原《景德传灯录·利山和尚》：“僧问：不历僧只获法身，请师直指。师云：子承父业。” 子承父业——意思是指儿子继承父亲的事业。☆思政讲解：，“子承父业”体现了对家族荣誉与责任的尊重与承担。它要求子女在继承父辈事业的同时，也要继承其勤劳、诚信、创新等优秀品质，将这些精神财富代代相传，形成家族特有的文化积淀。“子承父业”还体现了对传统文化的尊重与传承。在快速变化的社会环境中，传统文化往往面临着被遗忘或边缘化的风险。而“子承父业”则要求我们在继承父辈事业的同时，也要积极传承和弘扬传统文化，使其成为连接过去与未来的桥梁。【教师演示、讲解】演示案例1效果，讲解页面中的子元素概念，子元素选择器的写法。【学生练习】制作案例1的页面效果。相邻兄弟选择器相邻兄弟选择器可选择紧接在另一元素后的元素，强调后者与前者是相邻关系，且二者有相同父元素。可以理解成：兄长+第一个弟弟。例如，如果要增加紧接在h1元素（哥哥）后紧接着出现的段落p元素（弟弟）的文字颜色，可以这样写：h1+p{color:red;}知识点：知识点：相邻兄弟选择器特点记忆关键词：近水楼台关键词解析： 兄弟元素选择器只会选中与哥哥（“+”号前面的元素）紧挨着的弟弟，而且这个弟弟符合“+”号后方指定的类型。成语出处： 宋·俞文豹《清夜录》：“范文正公镇钱塘，兵官皆被荐，独巡检苏麟不见录，乃献诗云：‘近水楼台先得月，向阳花木易逢春。’” 近水楼台——指靠近水边的楼台；比喻由于接近某人或者事物，而抢先得到某种利益或便利。提问：提问： 请问如图7-5所示的代码，p段落的文字预览后是什么颜色？为什么？图7-5相邻兄弟选择器兄弟元素选择器兄弟元素选择器是选择当前元素的所有同级元素。可以理解成：兄长~所有弟弟。例如，如果要增加紧接在h1元素后出现的所有段落p元素的行高，可以这样写：h1~p{line-height:1.5em;} 知识点：兄弟元素选择器知识点：兄弟元素选择器特点记忆关键词：手足之情关键词解析： 与相邻兄弟选择器不同，兄弟元素选择器不仅关心紧挨着参考元素的下一个兄弟，还关心所有在参考元素之后的所有兄弟。正如二哥分糖果时，只要是他的任何弟弟妹妹，都会收到糖果，但这位哥哥并不会把糖果留给大哥和自己。成语出处： 唐·李华《吊古战场文》：“谁无兄弟，如足如手。”宋·苏辙《为兄轼下狱上书》：“臣窃哀其志，不胜手足之情。” 手足之情——意思是比喻兄弟的感情很好。☆思政讲解：在校园环境中，“手足之情”体现为同学们之间的相互扶持与关爱。无论是学习上的困难，还是生活中的挫折，同学们都能像兄弟姐妹一样，伸出援手，共同面对。这种情感不仅加深了同学之间的友谊，更培养了大家的集体荣誉感和团队协作精神。【教师演示、讲解】演示案例2的页面效果，讲解兄弟元素选择器的用法。【学生练习】完成案例2的页面效果。35任务实施【案例1】请尝试如图7-4所示的代码，并在子元素选择器的“>”前面添加空格后再预览效果。图7-4子元素选择器【案例2】使用兄弟元素选择器完成如图7-6所示的特定行的样式。图7-6预览效果☆思政讲解：唐诗是中华文化悠久历史的见证与传承。每一首唐诗都是那个时代社会风貌、人民情感与思想智慧的结晶，它们以优美的语言、深邃的意境，展现了中华文化的博大精深与独特魅力。世界上没有第二种语言比汉语言文化更加灵活、精彩。比如有个汉语十级的笑话：阿呆给朋友送红包时，两人有如下对话:朋友:“你这是什么意思?”朋友:“没什么，意思意思。”朋友:“你这就不够意思了。”阿呆:“小意思，小意思。”朋友:“你这人真有意思。”阿呆:“其实也没有别的意思。”朋友:“那我就不好意思了。”阿呆:“是我不好意思。”请解释上文中每个“意思”的意思。（1）编写下图所示的HTML代码，如图7-7所示。图7-7兄弟元素选择器（2）编写对应的CSS代码，如图7-8所示。图7-8CSS代码（3）保存文件后预览效果是否达到预期。35知识或技能拓展无0任务总结通过本课的学习：（1） 巩固外部样式表知识。（2） 理解选择器的优先级别，具备分辨选择器优先级别的能力。（3） 掌握关系选择器，如子元素选择器、相邻兄弟选择器、兄弟元素选择器。5课后作业

任务单教学单元第七章CSS进阶知识教学内容Css选择器优先级、关系选择器实施环境机房学时2任务描述【案例1】请尝试如图7-4所示的代码，并在子元素选择器的“>”前面添加空格后再预览效果。【案例2】使用兄弟元素选择器完成如图7-6所示的特定行的样式。任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。任务实施【案例1】请尝试如图7-4所示的代码，并在子元素选择器的“>”前面添加空格后再预览效果。图7-4子元素选择器【案例2】使用兄弟元素选择器完成如图7-6所示的特定行的样式。图7-6预览效果（1）编写下图所示的HTML代码，如图7-7所示。图7-7兄弟元素选择器（2）编写对应的CSS代码，如图7-8所示。图7-8CSS代码（3）保存文件后预览效果是否达到预期。任务检测学习效果评价表被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10练习1子元素选择器应用正确，效果达到预期30练习2相邻兄弟选择器使用正确。30兄弟元素选择器使用正确。30总分说明：评分项目为任务实施中要求学生掌握的技能点。

教学单元7.3.2属性选择器教学内容属性选择器的应用学习资源任务单、PPT、专题网站等。学时2学时学习目标知识目标：理解属性选择器概念。掌握常见的5种属性选择器的写法。能力目标：（1）具备使用属性选择器对指定元素进行样式定义的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。学习重点属性选择器概念及应用场景学习难点5种常见属性选择器的写法教学方法讲授法、演示法、任务驱动法教学过程教学环节学习内容学习时间（分钟）复习关系选择器包括后代、子元素、相邻兄弟、兄弟元素选择器，各有何特点？5引入关系选择器是根据标签的结构关系来进行定义的，选择器书写的是标签本身或者是id、class名称。而今天介绍的属性选择器，则是针对标签本身自带的属性来定义，相对关系选择器，属性选择器更加灵活，适用的范围也更广。3任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。2知识讲授7.3.2属性选择器属性选择器是CSS中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景：为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。属性选择器写法为[属性]，用法示例：a[href]{color:red;}/*只对有href属性的a元素应用样式*/知识点：属性选择器特点知识点：属性选择器特点记忆关键词：有的放矢关键词解析：CSS属性选择器允许针对具有特定属性或属性值的元素来应用样式。通俗理解成针对具有特定“属性箭靶”的元素来“发射”样式规则的。成语出处： 宋代叶适《水心别集十五终论》：“论立于此，若射之有的也，或百步之外，或五十步之外，的必先立，然后挟弓注矢以从之。” 有的放矢——意思是放箭要对准靶子。比喻说话做事有针对性。☆思政讲解：作为学生，将“有的放矢”这一成语融入学习之中，可以帮助我们更加高效、有针对性地规划和管理自己的学习，以下是几个具体的实践方法：（1）设定明确的学习目标（2）制定个性化的学习计划（3）选择适合的学习资源和方法。常见的大部分用法如表7-1所示。写法作用范例[属性]选择所有具有指定属性的元素，不论其属性值为何。选择所有带有'type'属性的元素[type]{……}[属性="值"]选择属性值完全等于指定值的元素。选择href属性值完全等于指定URL的元素[href=""]{……}[属性^="值"]选择属性值以指定值开始的元素。选择href属性值以'https://'开始的元素[href^="https://"]{……}[属性$="值"]选择属性值以指定值结束的元素。选择href属性值以'.pdf'结束的元素[href$='.pdf']{……}[属性*="值"]选择属性值包含指定字符串的元素。选择title属性值包含'hello'字符串的元素[title*='hello']{……}表7-1属性选择器用法25任务实施【案例3】敲入如图7-9所示代码，尝试属性选择器的作用。图7-9属性选择器代码运行后的效果如图7-10所示。图7-10预览效果40知识或技能拓展无0任务总结通过本课的学习：（1）理解属性选择器概念。（2）掌握常见的5种属性选择器的写法。（3）具备使用属性选择器对指定元素进行样式定义的能力。5课后作业

任务单教学单元7.3.2属性选择器教学内容属性选择器的应用实施环境机房学时2任务描述【案例3】敲入如图7-9所示代码，尝试属性选择器的作用。任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。任务实施【案例3】敲入如图7-9所示代码，尝试属性选择器的作用。图7-9属性选择器代码运行后的效果如图7-10所示。图7-10预览效果任务检测学习效果评价表被考评人（组）：考评人：日期：评分项目过程表现分值得分[属性]写法代码书写正确、规范，样式效果生效。20[属性="值"]写法代码书写正确、规范，样式效果生效。20[属性^="值"]写法代码书写正确、规范，样式效果生效。20[属性$="值"]写法代码书写正确、规范，样式效果生效。20[属性*="值"]写法代码书写正确、规范，样式效果生效。20总分说明：评分项目为任务实施中要求学生掌握的技能点。

教学单元7.3.3伪类选择器教学内容伪类选择器的应用学习资源任务单、PPT、专题网站等。学时2学时学习目标知识目标：了解伪类选择器的应用场景及种类。:Hover选择器的应用:nth-of-type(n)选择器和:nth-last-of-type()选择器的应用。能力目标：具备正确使用Hover伪类选择器，并合理定义状态的能力。具备正确使用nth-of-type(n)和:nth-last-of-type()选择器的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）通过引入宋词的案例，鼓励学生跨学科学习，将程序设计与其他学科知识相结合，拓宽视野，提升综合素质。学习重点英文命名文件学习难点部分英文单词的记忆教学方法讲授法、演示法、任务驱动法教学过程教学环节学习内容学习时间（分钟）复习属性选择器的应用场景。列举一下可以应用属性选择器的标签。3引入伪类选择器，是一种特殊的选择器，它用来选择元素在特定状态下的样式。这些特定状态并不是由文档结构决定的，而是由用户行为（如点击、悬停）或元素的状态（如被访问、被禁用）来定义的。2任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。2知识讲授7.3.3伪类选择器 伪类选择器包含数十种选择器，大体包括以下三大类：结构性伪类选择器结构性伪类选择器主要用于选取DOM树中特定位置的元素。状态伪类选择器状态伪类选择器主要用于选取具有特定交互状态的元素。表单相关伪类选择器表单相关伪类选择器主要用于选取与表单相关的特定元素。知识点：知识点：伪类选择器特点记忆关键词：千变万化关键词解析： 伪类选择器可以根据不同的条件和状态来选择元素，这些条件和状态可以是动态的、交互的，甚至是基于文档结构的。因此，伪类选择器在CSS中的应用就像千变万化的魔法，能够根据不同的场景和需求，以灵活多变的方式为元素应用样式。成语出处： 《列子·周穆王》：“乘虚不坠，触实不硋，千变万化，不可穷极。” 千变万化——比喻变化很多。 接下来，因篇幅、使用频率等原因，我们只需要把握以下几种常见的伪类选择器。:hover选择器:hover选择器通常用于超链接元素，也可以用于大部分HTML标签。如果应用在a元素上，通常有a:active，a:hover,a:link,a:visited四种状态，但实际上，通常只需要设置a:hover状态即可。其他状态可以由a对应标签选择器中设置对应属性就可以达到现行的主流效果。【教师演示、讲解】案例4——设计如图7-11所示的导航条的级联菜单出现效果。【学生练习】:nth-of-type(n)选择器和:nth-last-of-type()

选择器:nth-of-type(n)选择器匹配“同类型中的第n个同级兄弟元素”。:nth-last-of-type(n)选择器匹配“同类型中的倒数第n个同级兄弟元素”。括号内的数字n也可以采用odd、even关键字，分别指的是奇数、偶数位置。【教师演示、讲解】案例5——完成如图7-14所示的文字效果。【学生练习】15任务实施【案例4】设计如图7-11所示的导航条的级联菜单出现效果。图7-11级联菜单交互效果（1）编写如图7-12所示的HTML代码：图7-12HTML代码（2）完成对应的CSS代码，如图7-13所示。图7-13CSS代码（3）保存文件，在浏览器中运行，测试光标滑过时的效果。【案例5】完成如图7-14所示的文字效果。图7-14样式效果对应的HTML和CSS代码如图7-15所示。图7-15HTML及CSS代码55知识或技能拓展无0任务总结通过本课的学习：（1）了解伪类选择器的应用场景及种类。（2）掌握:Hover选择器的应用（3）掌握:nth-of-type(n)选择器和:nth-last-of-type()选择器的应用。（4）通过引入宋词的案例，鼓励学生跨学科学习，将程序设计与其他学科知识相结合，拓宽视野，提升综合素质。3课后作业

任务单教学单元7.3.3伪类选择器教学内容伪类选择器的应用实施环境机房学时2任务描述【案例4】设计如图7-11所示的导航条的级联菜单出现效果。【案例5】完成如图7-14所示的文字效果。任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。任务实施【案例4】设计如图7-11所示的导航条的级联菜单出现效果。图7-11级联菜单交互效果（1）编写如图7-12所示的HTML代码：图7-12HTML代码（2）完成对应的CSS代码，如图7-13所示。图7-13CSS代码（3）保存文件，在浏览器中运行，测试光标滑过时的效果。【案例5】完成如图7-14所示的文字效果。图7-14样式效果对应的HTML和CSS代码如图7-15所示。图7-15HTML及CSS代码任务检测学习效果评价表被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10练习1级联菜单对应的容器结构正确20添加hover选择器后，交互效果达到预期。30练习2nth-of-type(n)选择器定义正确20nth-last-of-type()选择器定义正确20总分说明：评分项目为任务实施中要求学生掌握的技能点。

教学单元7.3.3伪类选择器教学内容伪类选择器的应用学习资源任务单、PPT、专题网站等。学时2学时学习目标知识目标：（1）:first-child选择器与:last-child选择器的区别。（2）:nth-child(n)和:nth-last-child(n)选择器的区别。（3）理解last字眼在选择器中所起的作用。能力目标：具备应用:first-child选择器与:last-child选择器完成对应案例的能力。具备应用:nth-child(n)和:nth-last-child(n)选择器完成对应案例的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）通过类比思维，加强对选择器的认识，提升自身的思维能力。学习重点:first-child和:last-child选择器，:nth-child(n)和:nth-last-child(n)选择器学习难点理解并熟记这四种选择器的应用场合。教学方法讲授法、演示法、任务驱动法教学过程教学环节学习内容学习时间（分钟）复习相邻兄弟选择器与兄弟选择器的区别。4引入今天了解其他常见的伪类选择器。1任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。2知识讲授:first-child选择器与:last-child选择器:first-child是css中的一个选择器，其作用是用于选择它的父元素中的第一个子元素。用法示例：p:first-child{……}:last-child选择器用来匹配父元素中最后一个子元素。单是从字面上看起来挺容易理解的，但实际隐藏了另外一个条件“这第一个子元素刚好是本身”。【教师演示、讲解】案例6——《江城子·密州出猎》【学生练习】:nth-child(n)和:nth-last-child(n)选择器:nth-child(n)选择器匹配“父元素的第n个子元素，不论元素的类型”。:nth-last-child(n)选择器匹配“父元素的倒数第n个子元素，不论元素的类型”。注意这里说的“不论元素的类型”指的是“任何类型的元素都要纳入n的计数内”，但不是说“任何类型的元素都可以相应你的选择器”。这两种选择器同样也可以拥有odd、even关键字。【教师演示、讲解】案例7——如图7-18所示的代码，然后分析出现的预览效果。同时，分发给学生对应诗词文字。【学生练习】25任务实施【案例6】打开上个《江城子·密州出猎》的练习，增加如图7-16所示的代码。图7-16:first-child选择器预览后的效果如图7-17所示。图7-17预览效果【案例7】敲入如图7-18所示的代码，然后分析出现的预览效果。图7-18HTML代码及CSS代码预览的最终效果如图7-19所示。图7-19预览效果45知识或技能拓展无0任务总结通过本课的学习：（1）:first-child选择器与:last-child选择器的区别。（2）:nth-child(n)和:nth-last-child(n)选择器的区别。（3）理解last字眼在选择器中所起的作用。（4）通过类比思维，加强对选择器的认识，提升自身的思维能力。3课后作业

任务单教学单元7.3.3伪类选择器教学内容伪类选择器的应用实施环境机房学时2任务描述【案例6】打开上个《江城子·密州出猎》的练习，增加如图7-16所示的代码。【案例7】敲入如图7-18所示的代码，然后分析出现的预览效果。任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。任务实施【案例6】打开上个《江城子·密州出猎》的练习，增加如图7-16所示的代码。图7-16:first-child选择器预览后的效果如图7-17所示。图7-17预览效果【案例7】敲入如图7-18所示的代码，然后分析出现的预览效果。图7-18HTML代码及CSS代码预览的最终效果如图7-19所示。图7-19预览效果任务检测学习效果评价表被考评人（组）：考评人：日期：评分项目过程表现分值得分:first-child选择器选择器书写正确，样式达成预期。25:last-child选择器选择器书写正确，样式达成预期。25:nth-child(n)选择器书写正确，样式达成预期。25:nth-last-child(n)选择器书写正确，样式达成预期。25总分说明：评分项目为任务实施中要求学生掌握的技能点。

教学单元7.3.4伪元素选择器教学内容伪元素选择器的应用学习资源任务单、PPT、专题网站等。学时2学时学习目标知识目标：了解伪元素选择器的应用场景。掌握::before伪元素选择器、::after伪元素选择器的用法格式。能力目标：具备使用::before伪元素选择器、::after伪元素选择器为目标位置生成元素的能力。具备使用::before伪元素选择器完成排行榜的项目列表图标的能力。素养目标：了解本章成语的出处，理解成语含义与知识点理解的结合。通过了解排行榜时事，可以更加深入地了解中国的国情，包括政治、经济、文化等各个方面。这种了解有助于增强民族自豪感和爱国情怀，提高对国家发展的认同感和责任感。学习重点::before伪元素选择器、::after伪元素选择器学习难点::before伪元素选择器完成排行榜的项目列表图标教学方法讲授法、演示法、任务驱动法教学过程教学环节学习内容学习时间（分钟）复习:nth-child(n)和:nth-last-child(n)选择器的区别。请举例说明:nth-child(n)与:nth-of-type选择器的区别。5引入伪元素选择器是Web设计中一个非常有用的工具，‌它允许开发者在不改变HTML结构的情况下，‌通过CSS为元素添加装饰性内容和视觉效果，‌从而丰富网页的视觉表现力和用户体验。以下是一些具体的应用场景：‌添加装饰性图标或符号。面包屑导航。在面包屑导航中，‌可以使用伪元素来连接各个页面之间的链接，‌如使用"»"符号连接页面，‌使用"/"符号分隔页面链接等。‌创建装饰性边框或背景：‌通过设置伪元素的样式，‌可以为其添加边框、‌背景色或其他视觉效果，‌从而增强元素的视觉吸引力。‌5任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。2知识讲授我们将介绍最常见的二种伪元素选择器，分别为::before伪元素选择器、::after伪元素选择器。在早期的CSS规范中，伪元素选择器使用单冒号（:）来表示，CSS3规范更新了语法，要求使用双冒号（::）来表示伪元素选择器。两者的区别在于使用的单冒号（:）和双冒号（::）。::before和:before是伪元素选择器，用于在目标元素的前面插入内容。内容（content）属性可以为空，只为设置样式。::after和:after用于在目标元素的后面插入内容。内容（content）属性也可以为空。用法示例：p::before{content:"台词";color:red;}p::after{content:"";display:block;width:30px;height:30px;}知识点：伪元素选择器特点知识点：伪元素选择器特点记忆关键词：无中生有关键词解析： ::before、::after伪元素选择器可以在不影响html结构的情况下，凭空添加一个元素，通过样式中的content属性赋予元素的内容，照常设置其他css属性即可。“伪”也可以理解成“一个并不真实存在于html结构”的元素。成语出处： 春秋·李耳《老子》：“天下万物生于有，有生于无。” 无中生有——本来是道家的哲学思想，后来人们用它的字面意思，一般形容凭空捏造。☆思政解说：从学习手段来看，“无中生有”不仅是一种创造性的思维方式，更是一种积极的学习态度和问题解决策略。面对学习中的难题或挑战，我们往往没有现成的答案或方法。“无中生有”鼓励我们跳出常规思维，尝试从不同的角度或领域寻找灵感，比如将数学方法应用于物理问题，或者从文学作品中寻找历史事件的线索。这种跨领域的思考方式可以激发新的想法和解决方案。比如：初学英语时，许多人给单词读音标记中文谐音字的方式，第一个尝试这么做的人，是否凭空想出一种解决策略？比如：学网页设计，许多人表示不会配色，不懂图像怎么处理，其实身边并不是缺乏素材，随手一张图片、课本插图，甚至只有一张图的情况下，我们也可以无限放大局部去颜色的对比与协调。当手头没有资料，要从身边的事物中获取灵感及素材，这也是一种“无中生有”。【教师演示、讲解】案例8——热搜榜页面效果。先讲解::before伪类生成前面的数字序号。【学生练习】完成数字序号。【教师演示、讲解】::after伪类生成后面的“沸”“热”图标效果。【学生练习】完成“沸”“热”图标效果。13任务实施【案例8】完成如图7-20所示的热搜榜版面效果。图7-20热搜榜版面效果☆思政讲解：了解排行榜时事，可以更加深入地了解中国的国情，包括政治、经济、文化、体育等各个方面。这种了解有助于增强民族自豪感和爱国情怀，提高对国家发展的认同感和责任感。（1）书写对应的HTML代码，如图7-21所示。图7-21HTML代码从HTML结构来看，我们并没有给各种图标预留有容器。（2）编写对应的CSS代码，如图7-22所示。图7-22CSS代码35知识或技能拓展7.5扩展练习【练习1】打开温氏集团的新闻栏目页/GroupNews/list.aspx，观察如图7-28所示的区域，先思考该区域的布局结构。图7-28光标落在网页中对应的区域，右键菜单中选择“审查元素”，直接进入开发模式，元素面板如图7-29所示。图7-29元素面板该元素对应的样式面板如图7-30所示。图7-30样式面板仔细看上面两张截图后思考以下问题：（1）在布局中，图片区域、文字区域对应使用的容器分别是什么？（2）从效果图来看，“08202408”方框在图片上方浮现，代码位置却在另外的<divclass="time">容器，基于什么原因采用这种结构？（3）::after伪元素是为了添加什么对象？这个伪元素从哪几个外部样式表中调用了样式？解决完上述问题后，尝试模仿官网代码来制作对应的布局效果。15任务总结通过本课的学习：（1）了解伪元素选择器的应用场景。（2）掌握::before伪元素选择器、::after伪元素选择器的用法格式。（3）通过了解排行榜时事，可以更加深入地了解中国的国情，包括政治、经济、文化等各个方面。这种了解有助于增强民族自豪感和爱国情怀，提高对国家发展的认同感和责任感。5课后作业

任务单教学单元7.3.4伪元素选择器教学内容伪元素选择器的应用实施环境机房学时2任务描述【案例8】完成如图7-20所示的热搜榜版面效果。任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。任务实施【案例8】完成如图7-20所示的热搜榜版面效果。图7-20热搜榜版面效果（1）书写对应的HTML代码，如图7-21所示。图7-21HTML代码从HTML结构来看，我们并没有给各种图标预留有容器。（2）编写对应的CSS代码，如图7-22所示。图7-22CSS代码任务检测学习效果评价表被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构文件及文件夹命名及位置正确。10Ul容器结构及基本样式结构书写正确，基本样式正确。30::before伪元素所生成的样式与效果一致。30::after伪元素所生成的样式与效果一致。30总分说明：评分项目为任务实施中要求学生掌握的技能点。

教学单元7.4CSS过渡与动画教学内容过渡效果和@keyframes规则的应用学习资源任务单、PPT、专题网站等。学时2学时学习目标知识目标：（1）理解CSS过渡与动画的意义。（2）掌握transition属性的书写格式，理解速度曲线过渡参数。（3）掌握@keyframes规则的创建与应用。能力目标：（1）具备使用css过渡完成级联菜单的交互效果的能力。（2）具备创建@keyframes规则完成级联菜单动态效果的能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。（2）鼓励学生使用@keyframes规则创建独特的动态效果，培养他们的创新意识和创造力。学习重点CSS过渡与动画的意义，transition属性的应用，@keyframes规则的应用学习难点速度曲线属性，@keyframes规则的定义。教学方法讲授法、演示法、任务驱动法教学过程教学环节学习内容学习时间（分钟）复习伪元素选择器在页面装饰上起到的意义。::before伪元素中，能否不写content属性，倘若无内容的情况先，应该如何设置content属性值？5引入CSS过渡与动画在网页设计中扮演着至关重要的角色，它们为网页增添了动态效果，提升了用户体验，并使得网页界面更加生动和吸引人。以下是CSS过渡与动画起到的具体意义：CSS过渡的意义：可以在用户与网页进行交互时（如鼠标悬停、点击等）提供视觉上的反馈，使交互操作更加顺滑和自然。使用CSS过渡可以简化代码，因为过渡效果是通过CSS属性来控制的，而不需要使用JavaScript等编程语言来实现。CSS动画的意义：可以包含多个步骤和关键帧。这使得网页设计师能够制作出更加生动和有趣的用户界面。3任务准备准备任务单、教案、PPT。测试本机的网页浏览器、Hbuilder软件是否正常。分发案例及练习所需图片、文字素材。2知识讲授7.4.1过渡效果transitiontransition读音——英[trænˈzɪʃn]之前我们在个别案例中使用了transition属性产生过渡动态效果。它可以让元素的某个属性在一定的时间内平滑地从一个值变化到另一个值。这种变化可以是颜色、大小、位置等任何可以改变的属性。下面的代码先建构了一个100px*100px的红色<div>元素。该元素样式中为width属性指定了过渡效果，持续时间为2秒；当光标浮在该元素上方时，该元素的width设置为300px，这就产生了width值变化的过程，也就激活了transition属性，让这个变化过程进行对应的动态效果。div{width:100px;height:100px;background:red;transition:width2s;}div:hover{width:300px;}如果hover状态下除了width属性外，还有若干个属性值发生变化，我们也可以将transition:width2s;改写为transition:all2s;这里的all就是指“产生变化的所有属性”。其实这是一种简写形式，里面涉及到了若干个属性，通常延迟属性没必要写。 transition简写形式的用法示例：transition:属性过渡持续时间速度曲线延迟;但个别属性是不允许有过渡过程的，比如期待一个元素从不可见到慢慢可见，采用了display:none;状态转入display:block;，这实际是无法生效的。我们换一下思路，可以采用不透明度opacity:0;状态转入opacity:1;，或者采用位置偏移、增加父容器去响应等等的方式。1.速度曲线属性transition-timing-functiontransition-timing-function属性可接受以下值：ease

-规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）linear

-规定从开始到结束具有相同速度的过渡效果ease-in

-规定缓慢开始的过渡效果ease-out

-规定缓慢结束的过渡效果ease-in-out

-规定开始和结束较慢的过渡效果cubic-bezier(n,n,n,n)

-允许您在三次贝塞尔函数中定义自己的值延迟时间transition-delaytransition-delay属性理解成动画启动之前有n秒的延迟。【教师演示、讲解】案例9——子菜单出现过程设置过渡效果。【学生练习】7.4.2@keyframes规则keyframes读音——[‘kiː‘freɪm]CSS3的‌@keyframes规则用于创建动画。允许你创建一个或多个关键帧，‌每个关键帧可以设置不同的样式，‌从而在动画过程中改变元素的样式。‌例如，‌你可以定义一个动画，‌使得一个元素的颜色在动画过程中从红色直接跳转成蓝色，再由蓝色变成绿色，最后变成黑色。‌在@keyframes规则中，‌你可以使用百分比来指定动画的不同阶段，‌例如0%、‌25%、‌50%、‌75%和100%等，‌这些百分比表示动画的不同阶段，0％是开