CSS には、理論的には任意の CSS プロパティに適用できる 4 つのキーワードがあります。それらは、initial (初期)、inherited (継承)、unset (未設定)、revert (縮小) です。 ）。 all の値は、上記の 4 つのキーワードのみです。この記事では、初期化、継承、設定解除、元に戻すなどをすべて紹介します。
要素属性の初期デフォルト値を表します (デフォルト値は公式 CSS 仕様によって定義されています)
互換性: IE はサポートしますサポート対象外
[注] 各属性の初期デフォルト値はここに移動##
//display在官方CSS规范中定义的默认值是inline
<style>
.test{display: initial;}
</style>
<div class="box">
<div class="test">测试一</div><span>文字</span>
<br>
<div >测试二</div><span>文字</span>
</div>inherit
<style>
.box{
border: 1px solid black;
padding: 10px;
width: 100px;
}
.test{
border: inherit;
height: 30px;
}
</style>
<div class="box">
<div class="test">测试一</div>
</div>
<div class="box">
<div class="in">
<div class="test">测试二</div>
</div>
</div>【一般的に使用されるデフォルトが使用可能です。継承スタイル】
color cursor direction font letter-spacing line-height list-style text-align text-indent text-shadow text-transform white-space word-break word-spacing word-wrap writing-mode
//内容为测试一的元素和内容为测试二的元素的样式是一样的
<style>
.box{
border: 1px solid black;
padding: 10px;
width: 100px;
color: red;
}
.test1{
border: unset;
color: unset;
}
</style>
<div class="box">
<div class="test">测试一</div>
<div>测试二</div>
</div><style>
.test{
border: 1px solid black;
padding: 20px;
color: red;
}
.in{
/* all: initial;
all: inherit;
all: unset;
all: revert; */
}
</style>
<div class="test">
<div class="in">测试文字</div>
</div>[1]すべての場合: initial,.in のすべての属性はデフォルト値を受け取ります
border:none;padding:0;color:black;
[2]When all:inherit、.in のすべての属性は親要素の継承値を受け取ります
border:1px solid black;padding:20px;color:red;
[3]When all:unset 、 .in のすべての属性は値を設定しないことと同じです、デフォルトは継承可能な継承で、継承できないものはデフォルト値を維持します
border:none;padding:0;color:red;
#この記事は、https://www.cnblogs.com/xiaohuochai/p/5464456.html#推奨学習:
css クイック スタート## から転載されています。 #
以上がCSS のキーワード、initial、inherit、unset、revert、およびすべての属性を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
