打印本文 打印本文 关闭窗口 关闭窗口
CSS教程(五)--标记的继承属性
作者:武汉SEO闵涛  文章来源:敏韬网  点击数676  更新时间:2009/4/23 13:47:31  文章录入:mintao  责任编辑:mintao

标记的继承(Inheritance)概念其实十分直观,就是被括在里面的标记将拥有外部标记属性。其中外部标记可视为父元件(parent Element),内部标记我们可视为子元件(Child Element),所以用子承父的性质来想,应该很容易理解。如下:

<html>
<head>
<style type="text/css">
<!--
H3 { color:BLUE;
text-align:CENTER;
}
H2 { color:RED; }
-->
</style>
</head>
<body>
<h3>这是蓝色H3文字,<EM>这是继承H3蓝色样式的斜体字</EM></h3>
</body>
</html>

<EM>标记包在<H3>标记之间,故<EM>标记内的文字继承了<H3>标记文字为蓝色的样式属性。


以百分比方式继承样式

继承百分比是样式表中十分重要的特性,它可让元件的属性以百分比方式相互参考。如下:

<html>
<head><title>以百分比方式继承字体样式</title>
<style type="text/css">
<!--
H1 {font-size:12pt}
H2 {font-size:200%}
H3 {font-size:24pt}
H4 {font-size:50%}
-->
</style>
</head>
<body>
<h1>H1定义的字体大小为12pt
<h2>H2继承H1的字体大小为200%*12=24pt</h2>
</h1><hr>

<h3>H3定义的字体大小为24pt
<h4>H4继承H3的字体大小为50%*24=12pt</h4>
</h3>
</body>
</html>

从上面的例子可以知道,用进分比来设定字体大小,可以继承父元件的字体样式,设定值是以字体的百分比计算的值。

打印本文 打印本文 关闭窗口 关闭窗口