From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/inheritance/index.html | 74 ++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/zh-cn/web/css/inheritance/index.html (limited to 'files/zh-cn/web/css/inheritance/index.html') diff --git a/files/zh-cn/web/css/inheritance/index.html b/files/zh-cn/web/css/inheritance/index.html new file mode 100644 index 0000000000..9cfa528f96 --- /dev/null +++ b/files/zh-cn/web/css/inheritance/index.html @@ -0,0 +1,74 @@ +--- +title: 继承 +slug: Web/CSS/inheritance +tags: + - CSS + - 继承 +translation_of: Web/CSS/inheritance +--- +
{{cssref}}
+ +

在css中，每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

+ +

继承属性

+ +

当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

+ +

继承属性的一个典型例子就是 {{ Cssxref("color") }} 属性。给出以下样式规则：

+ +
p { color: green; }
+ +

若将其应用在下面这段 HTML 代码上…

+ +
<p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

…文本 "emphasized text" 就会呈现为绿色，因为 em 元素继承了 p 元素 {{ Cssxref("color") }} 属性的值，而没有获取 color 属性的初始值（这个 color 值用于页面没有指定 color 时的根元素）。

+ +

非继承属性

+ +

当元素的一个非继承属性(在Mozilla code 里有时称之为reset property )没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

+ +

非继承属性的一个典型例子就是 {{ Cssxref("border") }} 属性。给出以下样式规则：

+ +
 p { border: medium solid; }
+ +

若将其应用在下面这段 HTML 代码上…

+ +
  <p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

…文本 "emphasized text" 就没有边框，因为 {{ Cssxref("border-style") }} 属性的初始值为none。

+ +

 {{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

+ +

可以使用 {{cssxref("all")}} 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:

+ +
font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

这会将 {{cssxref("font")}} 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 {{cssxref("font-weight")}} 属性 为"bold"

+ +

注意

+ +

{{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

+ +

可以使用 {{cssxref("all")}} 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:

+ +
font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

这会将 {{cssxref("font")}} 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 {{cssxref("font-weight")}} 属性 为"bold"

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf