VB.net 2010 视频教程 VB.net 2010 视频教程 c#入门经典教程
当前位置:
主页 > 网站开发 > css >
  • div+css视频教程之CSS继承特性

  • 2015-08-03 19:19 来源:未知

一、         CSS继承特性

1.      继承性的运用

CSS的一个主要特征就是继承,它是依靠于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如对<BODY>标签声明的颜色值也会应用到段落的文本中。下面举例说明:
CSS代码:
body{               /*标签选择器*/
color:purple;             /*文本颜色*/
}
HTML代码:
<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
 “CSS的层叠和继承深入探讨”这段话以紫颜色显示,因为<p>和<strong>都是<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代码:
<p>示例文本p1(绿色)</p>
<p class="red">示例文本p2(红色)</p>
<p id="p3" class="red">示例文本p3(蓝色)</p>
<p style="color:orange;">示例文本p4(橙色)</p>
<p class="red purple">示例文本p5</p>
代码中一共有5组<p>标签定义的文本,并声明了4个选择器,定义为不同的颜色,最终显示效果如图所示,现对每个<p>标签最终显示的效果说明如下:
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)是按照内部样式表中的规则显示。
综上所述,优先级规则可以表示为:
行内样式 > 内部样式 > 外部样式

【CSS样式】面板

执行【窗口】│【CSS样式】命令,或按快捷键<Shift>+<F11>,可打开【CSS样式】面板。如图6-1所示。使用【CSS样式】面板可以创建、查看或编辑样式属性。
相关教程
关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们       黑ICP备07002182号