CSS关键字

CSS initial与inherit详解

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30716725

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tig666666/p/5973256.html

本文详细介绍了CSS中initial和inherit两个关键字的用法。initial关键字用于将CSS属性重置为默认值；inherit关键字则使元素继承其父元素的属性值。文章通过实例展示了这两种关键字的应用场景。

1、initial

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。

版本：	CSS3
JavaScript 语法：	object.style.property="initial"

CSS 语法

property: initial;

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div {color: red; }
h1  {color: initial; }
</style>
</head>
<body>

<div>
<h1>Initial</h1>
<p>DIV 元素内的标题和文本的 color 属性被设置为 "red"。标题元素的 color 属性被另外设置为 "initial"，因此是 "black"。</p>
</div>

<p><b>注意：</b>Internet Explorer 或 Opera 15 及其之前的版本不支持 initial 关键字作为一个属性值。</p>

</body>

代码效果：h1被显示为默认模式，不收父继承的限制。

2、inherit

inherit 关键字指定一个属性应从父元素继承它的值。

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。

版本：	CSS3
JavaScript 语法：	object.style.property="inherit"

CSS 语法

property: inherit;

 1 <head>
 2 <meta charset="utf-8"> 
 3 <title></title> 
 4 <style>
 5 span
 6 {
 7     color: blue;
 8     border:1px solid black;
 9 }
10 .extra span
11 {
12     color: inherit;
13 }
14 </style>
15 </head>
16 <body>
17 
18 <div>
19 这里是一个蓝色的 <span>span 元素</span>，正如 span 元素所设置的。
20 </div>
21 
22 <div class="extra" style="color:green">
23 这里是一个绿色的 <span>span 元素</span>，因为它继承了父元素。
24 </div>
25 
26 <div style="color:red">
27 这里是一个蓝色的 <span>span 元素</span>，正如 span 元素所设置的。
28 </div>
29 
30 </body>