版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务9复合选择器、通配符选择器第四单元CSS3基础学习目标通配符选择器交集选择器并集选择器后代选择器掌握如何同时应用多个样式了解:学习目标知识回顾CSS样式的优先级优先级关系：行内样式>内嵌样式>链接样式100010010>行内样式id选择器类选择器伪类选择器>10>标记选择器伪元素选择器通配符子选择器相邻选择器继承样式>复合选择器权重为基础选择器权重的叠加任务目标实战演练——制作寓言故事网页任务目标强化训练——制作诗词欣赏网站知识准备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;}h3span{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任务小结01交集选择器02并集选择器03后代选择器04通配符选择器05同时应用多个样式课后实训设计并制作“杭州西湖”景点网页，效果如图所示。任务10盒子模型及应用第五单元盒子模型学习目标外边距的设置盒子模型的概念边框的设置内边距的设置掌握利用盒子模型布局网页的优势了解:学习目标任务目标实战演练——制作古诗文欣赏网页强化训练——制作散文赏析网页知识准备1.盒子模型的概念知识准备CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，因此网页布局主要是掌握：一个独立的盒子的内部结构；多个盒子之间的相互关系。盒子模型使用<div></div>标记来表示。1.盒子模型的概念知识准备1.盒子模型的概念一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）这4部分组成。知识准备1.盒子模型的概念盒子的实际宽度=width+padding（左右）+border（左右）+margin（左右）盒子的实际高度=height+padding（上下）+border（上下）+margin（上下）知识准备1.盒子模型的概念盒子模型各元素的关系知识准备2.边框的设置：边框样式边框样式（border-style）：solid（单实线），dashed（虚线），dotted（点线），double（双实线）。基本格式：border-style：上边框[右边框
下边框
左边框]；值复制原则：1个值：四边2个值：上下/左右3个值：上/左右/下4个值：上/右/下/左知识准备示例：边框样式的设置<styletype="text/css">#box1{border-style:double;/*4条边框都为双实线*/}#box2{border-style:soliddashed;/*上下边框单实线，左右边框为虚线*/}#box3{border-style:soliddasheddotted;/*上边框单实线，左右边框为虚线，下边框为点线*/}</style><body><divid="box1">设置四边的边框样式为双实线</div><p></p><divid="box2">设置上下边框样式为单实线，左右边框样式为虚线</div><p></p><divid="box3">设置上边框样式为单实线，左右边框样式为虚线，下边框样式为点线</div></body>知识准备小技巧：分别设置边框样式上边框样式：border-top-style右边框样式：border-right-style下边框样式：border-bottom-style左边框样式：border-left-style知识准备2.边框的设置：边框宽度边框宽度（border-width）：单位为像素px基本格式：border-width：上边框[右边框下边框左边框]；值复制原则：1个值：四边2个值：上下/左右3个值：上/左右/下4个值：上/右/下/左知识准备示例：边框宽度的设置<styletype="text/css">div{border-style:solid;/*设置边框样式为单实线*/}#box1{border-width:1px;/*4条边框都为1像素*/}#box2{border-width:2px1px;/*上下边框为2像素，左右边框为1像素*/}#box3{border-width:2px3px4px;/*上边框为2像素，左右边框为3像素，下边框为4像素*/}</style><body><divid="box1">设置四边的边框为1像素，单实线</div><p></p><divid="box2">设置上下边框为2像素，左右边框为1像素，单实线</div><p></p><divid="box3">设置上边框为2像素，左右边框为3像素，下边框为4像素，单实线</div></body>知识准备小技巧：分别设置边框宽度上边框宽度：border-top-width右边框宽度：border-right-width下边框宽度：border-bottom-width左边框宽度：border-left-width知识准备2.边框的设置：边框颜色边框颜色（border-color）：预定义的颜色值、#RRGGBB或rgb（r,b,g）。基本格式：border-color：上边框[右边框下边框左边框]；值复制原则：1个值：四边2个值：上下/左右3个值：上/左右/下4个值：上/右/下/左知识准备示例：边框颜色的设置<styletype="text/css">div{border-style:solid;/*设置边框样式为单实线*/}#box1{border-color:#f00;/*4条边框都为红色*/}#box2{border-color:#f00#00f;/*上下边框为红色，左右边框为蓝色*/}#box3{border-color:#f00#00f#0f0;/*上边框为红色，左右边框为蓝色，下边框为绿色*/}</style><body><divid="box1">设置四边的边框颜色为红色</div><p></p><divid="box2">设置上下边框为红色，左右边框为蓝色</div><p></p><divid="box3">设置上边框为红色，左右边框为蓝色，下边框为绿色</div></body>知识准备小技巧：分别设置边框颜色上边框颜色：border-top-color右边框颜色：border-right-color下边框颜色：border-bottom-color左边框颜色：border-left-color知识准备2.边框的设置：综合设置边框的综合设置：设置四侧边框的属性。基本格式：border：宽度样式颜色；单侧边框的综合属性：border-topborder-rightborder-bottomborder-left知识准备<styletype="text/css">#box1{border-top:2pxsolid#f00;/*设置四边的不同属性*/border-right:3pxdouble#F90;border-bottom:2pxdotted#C0F;border-left:3pxdouble#F90;}#box2{border:3pxsolid#00f;/*设置四边的相同属性*/}</style><body><divid="box1">设置四边的不同属性</div><p></p><divid="box2">设置四边的相同属性</div></body>示例：边框属性的综合设置知识准备2.边框的设置：圆角边框圆角边框：使用border-radius将矩形的方角设置为圆角。基本格式：border-radius：参数1/参数2；参数1：像素值/百分比，圆角的水平半径参数2：像素值/百分比，圆角的垂直半径如果参数2省略，则参数2=参数1border-radius：50px/30px；/*4个圆角水平半径为50px，垂直半径为30px*/border-radius：50px；/*4个圆角水平半径为50px，垂直半径为50px*/知识准备2.边框的设置：圆角边框遵循值复制的原则：参数1、参数2均可以设置1~4个参数值，用于表示四角的圆角半径大小。参数1和参数2设置一个参数值：表示四角的圆角半径如：border-radius：50px/30px；/*4个圆角水平半径为50px，垂直半径为30px*/知识准备2.边框的设置：圆角边框参数1和参数2设置两个参数值：第一个参数值表示“左上角”和“右下角”的圆角半径第二个参数值表示“右上角”和“左下角”的圆角半径如：border-radius：50px20px/30px10px；
/*左上和右下圆角水平半径为50px，垂直半径为30px*//*右上和左下圆角水平半径为20px，垂直半径为10px*/知识准备2.边框的设置：圆角边框参数1和参数2设置三个参数值：第一个参数值表示“左上角”的圆角半径第二个参数值表示“右上角”和“左下角”的圆角半径第三个参数值表示“右下角”的圆角半径如：border-radius：50px20px40px/30px10px60px；
/*左上圆角水平半径为50px，垂直半径为30px*//*右上和左下圆角水平半径为20px，垂直半径为10px*//*右下圆角水平半径为40px，垂直半径为60px*/知识准备2.边框的设置：圆角边框参数1和参数2设置四个参数值：第一个参数值表示“左上角”的圆角半径第二个参数值表示“右上角”的圆角半径第三个参数值表示“右下角”的圆角半径第四个参数值表示“左下角”的圆角半径如：border-radius：50px20px40px15px/30px10px60px25px；/*左上圆角水平半径为50px，垂直半径为30px*//*右上圆角水平半径为20px，垂直半径为10px*//*右下圆角水平半径为40px，垂直半径为60px*//*左下圆角水平半径为15px，垂直半径为25px*/知识准备示例：圆角边框的设置<styletype="text/css">#box1{width:300px;height:100px;border:3pxsolid#00f;border-radius:50px20px40px15px/30px10px60px25px;/*左上圆角水平半径为50px，垂直半径为30px*//*右上圆角水平半径为20px，垂直半径为10px*//*右下圆角水平半径为40px，垂直半径为60px*//*左下圆角水平半径为15px，垂直半径为25px*/}#box2{width:300px;height:100px;border:3pxsolid#00f;border-radius:50px;/*4个圆角水平半径为50px，垂直半径为50px*/}</style><body><divid="box1">设置圆角边框</div><p></p><divid="box2">设置圆角边框</div></body>知识准备如何设置正圆？知识准备3.内边距的设置内边距（padding）：用于控制内容与边框之间的距离遵循值复制的原则单独设置padding-toppadding-rightpadding-bottompadding-left知识准备示例：内边距的设置<styletype="text/css">#box{width:400px;border:5pxsolidred;padding:10px40px80px120px;}</style><body><divid="box">CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两方面来理解：一是一个独立的盒子的内部结构；二是多个盒子之间的相互关系。
</div></body>知识准备4.外边距的设置外边距（margin）：用于控制盒子边框
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 赣南医学院《英语阅读与思辨》2023-2024学年第一学期期末试卷
- 七年级语文上册第二单元6散步教案新人教版
- 七年级道德与法治上册第四单元生命的思考第八课探问生命第1课时误区警示新人教版
- 三年级数学上册7长方形和正方形第3课时周长导学案新人教版
- 三年级数学上册第2单元两三位数乘一位数2.8解决问题课时练冀教版
- 慢性胃炎培训课件
- 《先芥蒂与麻醉》课件
- 人教版八年级物理下册全册教案
- 函数的图象课件
- 涂料调色完整版本
- 2025年采购部工作计划
- 期末检测卷(一)（试卷）-2024-2025学年外研版（三起）英语六年级上册(含答案含听力原文无音频)
- 《防范于心反诈于行》中小学防范电信网络诈骗知识宣传课件
- 2023-2024学年北京市通州区九年级（上）期末语文试卷
- 2023-2024学年广东省深圳市龙岗区八年级（上）期末英语试卷
- DB23-T 3768-2024北方种鹅节水生态旱养管理技术规程
- 勘察工作质量及保证措施
- 事业单位招聘《综合基础知识》考试试题及答案
- 2024年电工（高级技师）考前必刷必练题库500题（含真题、必会题）
- 垫江县中医院2018年11月份临床技能中心教学设备招标项目招标文件
- 2024年《浙江省政治学考必背内容》（修订版）
评论
0/150
提交评论