CSS的高级属性.pptVIP

课前引入 在上节课中，我们实际动手体验了利用CSS设置网页样式的基本方法，希望同学们能逐渐深刻地理解CSS的核心思想，尽可能地使用网页内容与形式分离。 在本课中，我们将继续深入地了解CSS的相关概念，在前面介绍的3中基本选择器的基础上，学习3种由基本选择器符合构成的选择器，然后再了解CSS的两个重要特性。 1.1 “交集”选择器 “交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。 其中，第1个必须是标记选择器，第2个必须是类别选择器或者是ID选择器。这两个选择器之间不能有空格，必须连续书写，形式如下： 1.1 “交集”选择器 举例，声明了h3、.special、h3.special这3种选择器，它们的选择范围如图所示： 实例见01-24.html 1.2 “并集”选择器 “并集”选择器，又称“集体声明”，是由多个选择器通过逗号连接而成的。它的结果是同时选中各个基本选择器所选择的范围。 任何形式的选择器都可以作为并集选择器的一部分。在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，就可以利用并集选择器同时声明风格相同的CSS选择器。选择范围如下图所示： 实例见01-25.html 1.2 “并集”选择器 · 全局选择器“*”： 适用情况：实际网站中的一些页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种css样式，但又不希望逐个来声明。 实例见01-26.html 1.3 后代选择器 后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代（或子元素）。实例见01-27A.html 后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”，选择器之间用空格连接。实例见01-27B.html 后代选择器适用于所有类型的选择器相互间的组合，下面是一些典型的语句： .special i{color:red;} #one li{padding-left:5px;} td.out .inside strong{font-siza:16px;} /*多层嵌套，同样适用*/ 本块儿经验之谈 选择器的嵌套在css的编写中可以大大减少对class和id的声明。因此在构建页面html框架时通常只给外层标记（父标记）定义class或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明。 二、CSS的继承特性 CSS继承（Inheritance），指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。 2.1 继承关系（说明见实例01-28.html） 2.2 CSS继承的运用：后代选择器 “子”随“父”，“子”不影响“父”：实例见01-29.html 指定标签的另类设置：实例见01-30.html 三、CSS的层叠特性 CSS的全名叫做“层叠样式表”，层叠，可以简单地理解为“冲突”的解决方案。 举例说明：01-31.html 总结： 优先级规则可以表述为：行内样式 ID样式类别样式标记样式 理解冲突的大原则：越特殊的样式，优先级越高。 本节主要介绍了3种由基本选择器符合构成的复合选择器（交集选择器、并集选择器、后代选择器），然后又了解CSS的两个重要特性（继承特性、层叠特性）。作为CSS设计的核心基础，请同学们务必真正理解这些最基础和核心的原理，课余时间多练习。 PPT模板下载：/moban/ 第四课 CSS的高级属性 主讲：郭亚琴 二、CSS的继承特性 主讲内容： 一、复合选择器 三、CSS的层叠特性 四、本章小结 一、复合选择器 复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。 符合选择器的常见“组合”： “交集”选择器 “并集”选择器 · 全局选择器 后代选择器 h3.class 标记 选择器 属性 值 属性 值 类别名称 声明 声明 {color:red; font-size:25px;} h3 h3.special .special h3,.special 注意：并不是所有的属性都会自动传给子元素，即有的属性不会继承父元素的属性值，如边框属性等。 四、本章小结 PPT模板下载：/moban/