强烈推荐:非常不错的样式表CSS教程(3)

2016-03-02    编辑:csser     点击(

■继 承 和 层 叠
CSS规则影响元素的显示形态,但是如果没有样式匹配或者存在多种样式规则同时匹配该元素时,元素显示的形态到底是遵循哪个规则呢?本节论述的内容涉及到样式的继承和层叠方面的知识。
●继 承
有些样式通过默认的样式设置而“继承”,也就是说,子元素继承父元素的样式规则,包括color、font和text-align等等。
例如:
p { color: red }
...
<p>Sample paragraph with <b>bold</b> text.</p>
<B>和</B>标记内的文字显示为红色,因为其父元素P标记有一个样式规则color:red,同时没有设置针对B标记的匹配样式,根据继承原则 <B>和</B>标记内的文字显示为红色。
同样,任何B标记的子元素将继承段落的样式显示为红色。例如:
<p>Sample paragraph with <b>bold and <i>bold italic</i></b> text.</p>
但是如果增加了:
b { color: green }
<B>和</B>标记内的文字将要变成绿色,<I>和</I>标记内的文字也将继承其父标记B的样式而显示为绿色
Some style properties permit a value of inherit, indicating that the value should be taken from the element's parent, even if the property is not inherited by default
●样式冲突
有时侯元素可能是与若干式样规则相配,此时就产生了样式规则之间的冲突。为了断定哪个规则被应用,CSS按一定的梯级优先分配规则,根据优先权决定执行哪个规则。
理解式样声明之间是否存在冲突是非常重要的,例如,下面的样式不存在样式冲突:
b { font-size: 12pt; } /* no conflicts */
p b { color: red; }
但是下列样式规则中,对于P标记中的B标记来说,font-size出现冲突:
b { font-size: 12pt; } /* conflict between font-size property */
p b { font-size: 14pt;
color: red; }
这两种规则根据优先顺序决定执行哪个规则。
CSS按下列规则判定优先权的归属:
如果没有施加继承或缺省样式,此时不存在优先权问题,样式按设定的规则显示。
依据来源(网页制作者还是最终用户)、层叠秩序、重要性(特指!important关键字)来判断执行。
依据特殊性(基于特性级别)判断执行。
定义的顺序,最后定义的规则优先执行。
●层 叠
样式表有三个来源:“用户代理”、“最终用户”、“网页设计者”。