CSS特性和选择器的组合-第七次课-上节复习.pptVIP

上节复习 CSS的基本选择器 标记选择器 伪类选择器 类选择器 id选择器 本节内容 CSS的层叠性 CSS的继承性 选择器的组合 CSS属性和值的介绍 CSS滤镜效果 CSS的层叠性 CSS的层叠性 CSS具有两个特性：层叠性和继承性。 层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？CSS的处理原则是： 1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如： CSS的层叠性－未冲突 style type=text/css p{ /* 标记选择器 */ color:blue; font-size:18px;} .special{ /* 类别选择器 */ font-weight: bold; } /* 粗体 */ #underline{ text-decoration: underline; } /* 有下划线 */ /style p标记选择器1/pp标记选择器2/p p class=special受到标记、类两种选择器作用/p p id=underline class=special受到标记、类和id三种选择器作用/p CSS的层叠性－发生冲突 2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为： 行内样式 ID样式 类别样式 标记样式。总的原则是：越特殊的样式，优先级越高。如： 选择器的优先级 style type=text/css p{ /* 标记选择器 */ color:blue; font-style: italic; } .green{ /* 类选择器 */ color:green; } .purple{ color:purple; } #red{ /* ID选择器 */ color:red;} /style !important的用途 可以通过!important强制改变选择器的优先级，则优先级为!important 行内样式 ID样式 类别样式 标记样式 另外，如果在同一个选择器中定义了两条相冲突的规则，则以后一条为准。如果为某一条添加了!important，那么IE6总是以后一条为准，不认!important 。而Firefox/IE7以定义了!important的为准 #box { color:red!important; /*Firefox执行这一条*/ color:blue; /*IE6执行这一条*/} CSS的继承性 CSS的继承性 CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如： style type=text/css body { text-align: center;} p { font-size: 24px; text-decoration: underline;} em { color: #FF0000;} .right{ text-align: right;} /style 继承关系树型图(DOM) 继承性习题 ulli在这里，你可以学习到： ulliHTML/li liCSS ulliCSS初级/li liCSS中级/li liCSS高级/li/ul/li liJavascript/li/ul /lili你还可以学习到：ol liFlash/li liDreamweaver/li liPhotoshop/li/ol /li/ul p如果您有任何问题，欢迎联系我们/p 要善于利用CSS继承性 CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。 例如，如果网页中大部分文字的字体大小都是12px，我们可以对body或td标记定义样式为12像素。这样由于其他标记都是body的子标记，会继承这一样式，就不需要对这么多子标记去定义样式了，有些特殊的地方如果字体大小要求是14px，我们可以再利用类选择器或id选择器单独定义。 并不是所有的CSS属性都具有继承性 需要注意的是并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性（如背景属性、盒子属性等）则不具有继承性。 具有继承性的属性：color, font-类，text-indent, text-align, text-decoration, line-h