CSS实例教程:了解承继特性及运用

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作


4.5承继
在本书的[3.3.2承继与堆叠]1节以前扼要详细介绍改姓承:(X)HTML元素能够从其父元素那里承继一部分CSS特性,即便当今元素并沒有界定该特性。

4.5.1值的承继
承继也是根据文本文档树的,文本文档树中元素的一些特性能够被其子元素承继,每个CSS特性都界定了它能否被承继。比如有以下编码,其在访问器内显示信息如图4⑵9所示。
p{color:green;}
<p>文本文档树中1元素的<strong>一些值</strong>能够被其子元素承继。</p>

图4⑵9值的承继
要设置文本文档的一些缺省款式特性,能够在文本文档树的根上设置该特性,假如这个特性能够承继,则其子孙后代元素将承继这个特性,比如color、font-size等特性。在(X)HTML中,<html>或<body>元素能够完成这1作用。比如:
body{color:black;}
因为color特性是可承继的,全部<body>元素的子孙后代都承继色调值为“black”。
特定的百分比值不被承继,可是测算值能够被承继。比如:
body{font-size:12px;}
h1{font-size:120%}
<body>
<h1>题目1的<em>文本</em>会大1些</h1>
<p>段落的文本承继body的界定</p>
</body>
<h1>元素的font-size特性的测算值为“14.4px”(其父元素值12px的120%)。因为“font-size”的 测算值被承继,<em>元素也承继“14.4px”的测算值。可是因为1个像素(1px)是电脑上最少的显示信息企业,不能能显示信息“0.4px”, 因此<h1>和<em>元素“font-size”的具体值是“14px”。

4.5.2“inherit”值
每个特性能够特定值为“inherit”,即:针对给定的元素,该特性和它父元素相对性特性的测算值取1样的值。承继值一般只用作储备值,它能够根据显式地特定“inherit”而获得提升,比如:
p{font-size:inherit;}

4.5.3承继的局限性
承继尽管降低了反复界定的不便,可是,一些特性是不可以承继的,比如border(边框)、margin(边距)、padding(补白)和情况等。
这样设置是有道理的,比如,为1个<div>设置了边框,假如此特性也承继的话,那末在这个<div>内全部的元素都会 有边框,这无疑会造成1个令人头晕眼花缭乱的結果。一样的,危害元素部位的特性,比如margin(边距)和padding(补白),也不容易被承继。
另外,访问器的缺省款式也在危害着承继的結果。比如:
body{font-size:12px;}
<h2>2级题目的文本并不是12px。</h2>
这是由于访问器的缺省款式设置了<h2>的CSS标准。
另外,一些老版本号的访问器将会对承继适用的不大好,比如一些访问器当遇到<table>的情况下,就会遗失全部的承继的特性,比如以下编码,在IE5.5中显示信息如图4⑶0所示。
body{font-size:12px;}
<p>段落的文本承继body的界定</p>
<table>
<tr>
<td>模块格</td>
<td>模块格</td>
</tr>
</table>

图4⑶0IE5.5中报表沒有承继<body>的特性
因而,假如要照料到这些老版本号的访问器,则将会必须以下界定:
body,table,th,td{……}