最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
强烈推荐:非常不错的样式表CSS教程(3)
时间:2022-07-02 12:53:42 编辑:袖梨 来源:一聚教程网
■继 承 和 层 叠
CSS规则影响元素的显示形态,但是如果没有样式匹配或者存在多种样式规则同时匹配该元素时,元素显示的形态到底是遵循哪个规则呢?本节论述的内容涉及到样式的继承和层叠方面的知识。
●继 承
有些样式通过默认的样式设置而“继承”,也就是说,子元素继承父元素的样式规则,包括color、font和text-align等等。
例如:
p { color: red }
...
Sample paragraph with bold text.
和标记内的文字显示为红色,因为其父元素P标记有一个样式规则color:red,同时没有设置针对B标记的匹配样式,根据继承原则 和标记内的文字显示为红色。
同样,任何B标记的子元素将继承段落的样式显示为红色。例如:
Sample paragraph with bold and bold italic text.
但是如果增加了:
b { color: green }
和标记内的文字将要变成绿色,和标记内的文字也将继承其父标记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关键字)来判断执行。
依据特殊性(基于特性级别)判断执行。
定义的顺序,最后定义的规则优先执行。
●层 叠
样式表有三个来源:“用户代理”、“最终用户”、“网页设计者”。
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21