教案
序号：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图\*