Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9-复合选择器、通配符选择器课件.pptx

1、任务9 复合选择器、通配符选择器第四单元 CSS3基础学习目标通配符选择器交集选择器并集选择器后代选择器掌握如何同时应用多个样式了解:学习目标任务目标实战演练制作寓言故事网页任务目标强化训练制作诗词欣赏网站知识准备1.复合选择器n 交集选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。n 第1个必须是标记选择器，第2个必须是类选择器或ID选择器。n 两个选择器之间不能有空格，必须连续书写。n 这个段落是红色。n 这个段落是绿色。p#redp.green知识准备示例：交集选择器的使用 p color:#F00;/*红色*/.p1 color:#0F0;/*绿色*/h2.p1

2、color:#00F;/*蓝色*/普通段落文本的样式（红色）指定了.p1类的段落文本样式（绿色）指定了.p1类的h2标题文本样式（蓝色）知识准备1.复合选择器n 并集选择器：如果某些选择器定义的样式完全相同或者部分相同，就可以利用并集选择器为它们定义相同的CSS样式。n 在并集选择器中，各个选择器通过逗号连接而成。知识准备示例：交集选择器的使用 p,h1,h2,h2.special,.one,p#two text-decoration:underline;font-size:15px;并集选择器的使用 并集选择器的使用 并集选择器的使用 并集选择器的使用 并集选择器的使用 并集选择器的使用 知

3、识准备1.复合选择器n 后代：某标记内嵌套的所有子元素，都称为该标记的后代。n 后代选择器：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。n 热烈庆祝第三十届牡丹文化节召开h1 span知识准备示例：后代选择器的使用 热烈祝贺第三十届牡丹文化节召开 牡丹花分三类十二型 单瓣类 黄花魁 泼墨紫 凤丹 盘中取果 重瓣类 重台类 span text-decoration:underline;h2 span color:#F00;h3 span color:#00F;.uu li ul li font-weight:bold;color:#00F;知识准备2.通配符选择器n 通配符选择器：

4、用“*”表示，能匹配网页中所有的元素，它设置的样式将对网页中的所有标记元素都生效。n 语法格式：*属性1:属性值1;属性2:属性值2;属性3:属性值3;*margin:0;padding:0;background-color:#0F0;知识准备3.同时应用多个样式n 如果需要同时应用多个CSS样式，则可以在class属性值中设置多个选择器名称，并用空格隔开。n 如：要对段落文本同时使用类p1，类p2的样式同时使用.p1和.p2两种样式，中间用空格隔开。实战演练 案例描述：设计并制作寓言故事网页，网页效果如图1所示。制作寓言故事网页图1实战演练 网页中，锚点链接分别设置成不同的超链接样式，如图2所示。网页右上角背景图片设置为固定位置，如图3所示。制作寓言故事网页图2图3强化训练 案例描述：设计并制作诗词欣赏网站，网页效果如下图1、图2、图3、图4所示。四张网页中均有相同的超链接样式，使用链接式样式表来设置。制作诗词欣赏网站图1图2图3图4任务小结01交集选择器02并集选择器03后代选择器04通配符选择器05同时应用多个样式课后实训设计并制作“杭州西湖”景点网页，效果如图所示。谢谢观看