PPT
【文档说明】Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9--复合选择器、通配符选择器课件.pptx，共(19)页，4.343 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-3294.html
以下为本文档部分文字说明：
任务9复合选择器、通配符选择器第四单元CSS3基础学习目标通配符选择器交集选择器并集选择器后代选择器掌握如何同时应用多个样式了解:学习目标任务目标实战演练——制作寓言故事网页任务目标强化训练——制作诗词欣赏网站
知识准备1.复合选择器交集选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。第1个必须是标记选择器，第2个必须是类选择器或ID选择器。两个选择器之间丌能有空格，必须连续书写。<pid="red"
>这个段落是红色。</p><pclass="green">这个段落是绿色。</p>p#redp.green知识准备示例：交集选择器的使用<styletype="text/css">p{color:#F00;/*
红色*/}.p1{color:#0F0;/*绿色*/}h2.p1{color:#00F;/*蓝色*/}</style><body><p>普通段落文本的样式（红色）</p><pclass="p1">指定了.p1类的段落文本样式（绿色）</p><
h2class="p1">指定了.p1类的h2标题文本样式（蓝色）</h2></body>知识准备1.复合选择器并集选择器：如果某些选择器定义的样式完全相同或者部分相同，就可以利用并集选择器为它们定义相同的CSS样式。在并集选择器中，各个选
择器通过逗号连接而成。知识准备示例：交集选择器的使用<styletype="text/css">p,h1,h2,h2.special,.one,p#two{text-decoration:underline;font-size:15px;}</style><
body><p>并集选择器的使用</p><h1>并集选择器的使用</h1><h2>并集选择器的使用</h2><h2class="special">并集选择器的使用</h2><spanclass="one">并集选择器的使用</
span><pid="two">并集选择器的使用</p></body>知识准备1.复合选择器后代：某标记内嵌套的所有子元素，都称为该标记的后代。后代选择器：把外层的标记写在前面，内层的标记写在后面，之间用空
格分隔。<h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1>h1span知识准备示例：后代选择器的使用<body><h2>热烈祝贺<span>第三十届</span>牡丹文化节召
开</h2><h3><span>牡丹花</span>分三类十二型</h3><olclass="uu"><li>单瓣类<ul><li>黄花魁</li><li>泼墨紫</li><li>凤丹</li><li>盘中取果</li>
</ul></li><li>重瓣类</li><li>重台类</li></ol></body><styletype="text/css">span{text-decoration:underline;}h2span{color:#F00;}h3
span{color:#00F;}.uuliulli{font-weight:bold;color:#00F;}</style>知识准备2.通配符选择器通配符选择器：用“*”表示，能匹配网页中所有的元素，它设
置的样式将对网页中的所有标记元素都生效。语法格式：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}*{margin:0;padding:0;background-color:#0F0;}知
识准备3.同时应用多个样式如果需要同时应用多个CSS样式，则可以在class属性值中设置多个选择器名称，并用空格隔开。如：要对段落文本同时使用类p1，类p2的样式<pclass="p1p2">同时使用.p1和.p2两种样式，中间用空格
隔开。</p>实战演练案例描述：设计并制作寓言故事网页，网页效果如图1所示。制作寓言故事网页图1实战演练网页中，锚点链接分别设置成丌同的超链接样式，如图2所示。网页右上角背景图片设置为固定位置，如图3所示。制作寓言故事网页图2图3强化训练案例描述：设计并制作诗词欣赏网站
，网页效果如下图1、图2、图3、图4所示。四张网页中均有相同的超链接样式，使用链接式样式表来设置。制作诗词欣赏网站图1图2图3图4任务小结交集选择器并集选择器后代选择器通配符选择器同时应用多个样式课后实训设计并制作“杭州西湖”景点网页，效果如图所示
。谢谢观看
辽公网安备 21102102000191号
营业执照
