Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9-复合选择器、通配符选择器课件_第1页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9-复合选择器、通配符选择器课件_第2页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9-复合选择器、通配符选择器课件_第3页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9-复合选择器、通配符选择器课件_第4页
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务9-复合选择器、通配符选择器课件_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务9复合选择器、通配符选择器第四单元CSS3基础任务9复合选择器、通配符选择器第四单元CSS31学习目标通配符选择器交集选择器并集选择器后代选择器掌握学习目标通配符选择器交集选择器并集选择器后代选择器掌握2如何同时应用多个样式了解:学习目标如何同时应用多个样式了解:学习目标3任务目标实战演练——制作寓言故事网页任务目标实战演练——制作寓言故事网页4任务目标强化训练——制作诗词欣赏网站任务目标强化训练——制作诗词欣赏网站5知识准备1.复合选择器交集选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。第1个必须是标记选择器，第2个必须是类选择器或ID选择器。两个选择器之间不能有空格，必须连续书写。<pid="red">这个段落是红色。</p><pclass="green">这个段落是绿色。</p>p#redp.green知识准备1.复合选择器交集选择器：由两个选择器直接连接构成6知识准备示例：交集选择器的使用<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>知识准备示例：交集选择器的使用<styletype="te7知识准备1.复合选择器并集选择器：如果某些选择器定义的样式完全相同或者部分相同，就可以利用并集选择器为它们定义相同的CSS样式。在并集选择器中，各个选择器通过逗号连接而成。知识准备1.复合选择器并集选择器：如果某些选择器定义的样式8知识准备示例：交集选择器的使用<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>知识准备示例：交集选择器的使用<styletype="te9知识准备1.复合选择器后代：某标记内嵌套的所有子元素，都称为该标记的后代。后代选择器：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。<h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1>h1span知识准备1.复合选择器后代：某标记内嵌套的所有子元素，都称10知识准备示例：后代选择器的使用<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;}h3span{color:#00F;}.uuliulli{font-weight:bold;color:#00F;}</style>知识准备示例：后代选择器的使用<body><stylety11知识准备2.通配符选择器通配符选择器：用“*”表示，能匹配网页中所有的元素，它设置的样式将对网页中的所有标记元素都生效。语法格式：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}*{margin:0;padding:0;background-color:#0F0;}知识准备2.通配符选择器通配符选择器：用“*”表示，能匹配12知识准备3.同时应用多个样式如果需要同时应用多个CSS样式，则可以在class属性值中设置多个选择器名称，并用空格隔开。如：要对段落文本同时使用类p1，类p2的样式<pclass="p1p2">同时使用.p1和.p2两种样式，中间用空格隔开。</p>知识准备3.同时应用多个样式如果需要同时应用多个CSS样式13实战演练案例描述：设计并制作寓言故事网页，网页效果如图1所示。制作寓言故事网页图1实战演练案例描述：设计并制作寓言故事网页，网14实战演练网页中，锚点链接分别设置成不同的超链接样式，如图2所示。网页右上角背景图片设置为固定位置，如图3所示。制作寓言故事网页图2图3实战演练网页中，锚点链接分别设置成不同的超链15强化训练案例描述：设计并制作诗词欣赏网站，网页效果如下图1、图2、图3、图4所示。四张网页中均有相同的超链接样式，使用链接式样式表来设置。制作诗词欣赏网站图1图2图3图4强化训练案例描述：设计并制作诗词欣赏网站，网页效16任务小结01交集选择器02并集选择器03后代选择器04通配符选择器05同时应用多个样式任务小结01交集选择器02并集选择器03后代选择器04通配符17课后实训设计并制作“杭州西湖”景点网页，效果如图所示。课后实训设计并制作“杭州西湖”景点网页，效果如图所示。18谢谢观看谢谢观看19任务9复合选择器、通配符选择器第四单元CSS3基础任务9复合选择器、通配符选择器第四单元CSS320学习目标通配符选择器交集选择器并集选择器后代选择器掌握学习目标通配符选择器交集选择器并集选择器后代选择器掌握21如何同时应用多个样式了解:学习目标如何同时应用多个样式了解:学习目标22任务目标实战演练——制作寓言故事网页任务目标实战演练——制作寓言故事网页23任务目标强化训练——制作诗词欣赏网站任务目标强化训练——制作诗词欣赏网站24知识准备1.复合选择器交集选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。第1个必须是标记选择器，第2个必须是类选择器或ID选择器。两个选择器之间不能有空格，必须连续书写。<pid="red">这个段落是红色。</p><pclass="green">这个段落是绿色。</p>p#redp.green知识准备1.复合选择器交集选择器：由两个选择器直接连接构成25知识准备示例：交集选择器的使用<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>知识准备示例：交集选择器的使用<styletype="te26知识准备1.复合选择器并集选择器：如果某些选择器定义的样式完全相同或者部分相同，就可以利用并集选择器为它们定义相同的CSS样式。在并集选择器中，各个选择器通过逗号连接而成。知识准备1.复合选择器并集选择器：如果某些选择器定义的样式27知识准备示例：交集选择器的使用<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>知识准备示例：交集选择器的使用<styletype="te28知识准备1.复合选择器后代：某标记内嵌套的所有子元素，都称为该标记的后代。后代选择器：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。<h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1>h1span知识准备1.复合选择器后代：某标记内嵌套的所有子元素，都称29知识准备示例：后代选择器的使用<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;}h3span{color:#00F;}.uuliulli{font-weight:bold;color:#00F;}</style>知识准备示例：后代选择器的使用<body><stylety30知识准备2.通配符选择器通配符选择器：用“*”表示，能匹配网页中所有的元素，它设置的样式将对网页中的所有标记元素都生效。语法格式：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}*{margin:0;padding:0;background-color:#0F0;}知识准备2.通配符选择器通配符选择器：用“*”表示，能匹配31知识准备3.同时应用多个样式如果需要同时应用多个CSS样式，则可以在class属性

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论