基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第8讲次 任务9 复合选择器、通配符选择器.docx
文件大小:1.1 MB
总页数:8 页
更新时间:2025-05-27
总字数:约2.14千字
文档摘要

教案

序号:8

授课日期

课时数

4

章节名称

任务9复合选择器、通配符选择器

教学内容

重点

复合选择器、通配符选择器。

难点

复合选择器的使用。

教学目的与要求

掌握CSS的基础选择器,学会CSS的定义方法。

掌握CSS的引用方式。

理解CSS的优先级,学会编写复合选择器。

教学方法

与手段

教师采用任务驱动法,使用教学PPT辅助授课。

教师操作演示,学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题,通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

(任务9复合选择器、通配符选择器

9.1复合选择器)

实操任务目标发布

实战演练——制作寓言故事网页

图8-SEQ图\*ARABIC\r11“寓言故事”网页

图8-SEQ图\*ARABIC2锚点链接样式

图8-SEQ图\*ARABIC3背景图片位置

强化训练——制作“诗词欣赏”网页

图8-

图8-SEQ图\*ARABIC4“诗词欣赏”网页图8-SEQ图\*ARABIC5“诗词欣赏”网页——钱塘湖春行

图8-SEQ图\*ARABIC

图8-SEQ图\*ARABIC6“诗词欣赏”网页——送友人图8-SEQ图\*ARABIC7“诗词欣赏”网页——春夜喜雨

知识准备——复合选择器

交集选择器

由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。

第1个必须是标记选择器,第2个必须是类选择器或ID选择器。

两个选择器之间不能有空格,必须连续书写。

pid=red这个段落是红色。/pp#red

pclass=green这个段落是绿色。/pp.green

子任务:

图8-SEQ图\*ARABIC8交集选择器的使用

并集选择器

如果某些选择器定义的样式完全相同或者部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

在并集选择器中,各个选择器通过逗号连接而成。

子任务:

图8-SEQ图\*ARABIC9并集选择器的使用

后代选择器

后代:某标记内嵌套的所有子元素,都称为该标记的后代。

后代选择器:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。

h1热烈庆祝span第三十届/span牡丹文化节召开/h1h1span

图8-SEQ图\*ARABIC10后代选择器的使用

第二学时

(任务9复合选择器、通配符选择器

9.2通配符选择器、9.3同时应用多个样式)

知识准备

通配符选择器

通配符选择器:用“*”表示,能匹配网页中所有的元素,它设置的样式将对网页中的所有标记元素都生效。

语法格式:*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

*{

margin:0;

padding:0;

background-color:#0F0;

}

同时应用多个样式

如果需要同时应用多个CSS样式,则可以在class属性值中设置多个选择器名称,并用空格隔开。

如:要对段落文本同时使用类p1,类p2的样式

pclass=p1p2同时使用.p1和.p2两种样式,中间用空格隔开。/p

第三学时

实战演练——制作“寓言故事”网页

案例描述:设计并制作寓言故事网页,网页效果如图8-11所示

图8-SEQ图\*ARABIC11“寓言故事”网页

网页中,锚点链接分别设置成不同的超链接样式,如图8-12所示。网页右上角背景图片设置为固定位置,如图8-13所示。

图8-SEQ图\*ARABIC12锚点链接样式

图8-SEQ图\*ARABIC13背景图片位置

第四学时

强化训练——制作“诗词欣赏”网页

案例描述:设计并制作诗词欣赏网站,网页效果如下图1、图2、图3、图4所示。四张网页中均有相同的超链接样式,使用链接式样式表来设置。

图8-

图8-SEQ图\*ARABIC14“诗词欣赏”网页图8-SEQ图\*ARABIC15“诗词欣赏”网页——钱塘湖春行

图8-SEQ图\*ARABIC

图8-SEQ图\*ARABIC16“诗词欣赏”网页——送友人图8-SEQ图\*ARABIC17“诗词欣赏”网页——春夜喜雨

课后实训

图8-SEQ图\*