div+css视频教程之CSS继承特性

当前位置:

首页 > 网站开发 > css >

div+css视频教程之CSS继承特性

一、 CSS继承特性

1．继承性的运用

CSS的一个主要特征就是继承，它是依靠于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如对<BODY>标签声明的颜色值也会应用到段落的文本中。下面举例说明：
CSS代码：
body{ /*标签选择器*/
color:purple; /*文本颜色*/
}
HTML代码：
CSS的层叠和继承深入探讨
“CSS的层叠和继承深入探讨”这段话以紫颜色显示，因为和都是<body>的子标签，它们会继承父标签的样式风格。

2．继承的局限性

在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。并不是所有的属性都会自动传给子元素，即有的属性不会自动继承父元素的属性值。上面举的文本颜色color属性，子对象会继承父对象的文本颜色属性，但是如果给某个元素设置了边框，它的子元素就不会自动加上一个边框，因为边框属性是非自动继承的。
实际上，在CSS的规范中，每种CSS属性都有一个默认的属性值，有些属性的默认值是“继承”（inherit），这些属性就会自动继承父元素的属性值了。而另外的属性的默认属性值不是“继承”（inherit），比如边框宽度的默认属性值为0，因此边框宽度属性就不具有自动的继承性，除非人为指定为继承。多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。

3．继承中的问题

有时候继承也会带来些错误，比如说下面这条CSS定义：
body{
color:blue;
}
根据 CSS继承规则，子元素从父元素继承属性。根据上面这条规则，站点的 body 元素中的文本以蓝色显示。子元素继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p， td， ul，ol， li等），所有的body 的子元素都应该以蓝色显示文本，子元素的子元素也一样。
但在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成如下样式，就可以使表格内的文本也变成蓝色。
body,table,th,td{
color:blue
}

4．多重样式混合应用中的冲突

既然有了继承性，那么在CSS的应用上可能会存在多个样式同时应用到一个对象上的情形。例如：
CSS代码：
p {
 color: green;
}
.red {
 color: red;
}
.purple {
 color: purple;
}
#p3 {
 color: blue;
}
HTML代码：
示例文本p1（绿色）
示例文本p2（红色）
示例文本p3（蓝色）
示例文本p4（橙色）
示例文本p5
代码中一共有5组标签定义的文本，并声明了4个选择器，定义为不同的颜色，最终显示效果如图所示，现对每个标签最终显示的效果说明如下：
l

第1行文本没有使用其他的样式，因此这行文本显示为标签选择器p中定义的绿色。
l 第2行文本使用了类别样式，因此这时产生了“冲突”。文本是按照标签选择器中定义的绿色显示，还是按照类别选择器中定义的红色显示呢？最终效果显示是按照类别选择器中定义的红色，这说明类别选择器的优先级高于标签选择器。
l 第3行文本同时使用了类别样式和ID样式，这又产生了“冲突”。文本最终是按照按照ID选择器中定义的蓝色显示，这说明ID选择器的优先级高于类别选择器。
l 第4行文本同时使用了行内样式和ID样式，那么这时又以哪个为准呢？答案是行内样式的优先级高于ID选择器，文本显示为橙色。
l 第5行文本中使用了两个类别样式，它们的优先级相同，这时应以哪个为准呢？答案是在定义CSS样式时，哪个的声明在后面就显示哪个的样式。因为在本例的定义部分，“.purple”的声明在“.red”之后，因此显示为“.purple”中定义的紫色。
综上所述，优先级规则可以表示为：
行内样式 > ID样式 > 类别样式 > 标签样式
在复杂的页面中，某个元素有可能会从很多地方获得样式，例如：
外部样式表针对 h3 选择器定义了三个属性：
h3 {
 color: red;
 text-align: left;
 font-size: 8pt;
}
页面内的CSS代码：
h3 {
 text-align: right;
 font-size: 20pt;
}
页面内的HTML代码：
<h3 style="text-align:center;">示例h3</h3>
假如该页面链接了外部样式表，这样在外部样式表、内部样式和行内样式都定义了文字排列（text-alignment）属性，外部样式表和内部样式还定义了字体尺寸（font-size）属性，那么 h3 得到的样式是什么呢？答案是颜色属性继承于外部样式表显示为红色，文字排列（text-alignment）是按照行内样式的定义，居中显示，而字体尺寸（font-size）是按照内部样式表中的规则显示。
综上所述，优先级规则可以表示为：
行内样式 > 内部样式 > 外部样式