CSS のキーワード、initial、inherit、unset、revert、およびすべての属性を理解する

CSS には、理論的には任意の CSS プロパティに適用できる 4 つのキーワードがあります。それらは、initial (初期)、inherited (継承)、unset (未設定)、revert (縮小) です。 ）。 all の値は、上記の 4 つのキーワードのみです。この記事では、初期化、継承、設定解除、元に戻すなどをすべて紹介します。

initial

要素属性の初期デフォルト値を表します (デフォルト値は公式 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

# は、要素の直接の親要素の対応する属性の計算値を意味します。互換性: IE7 はサポートされていません

<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>

unset は、initial や継承よりも比較的複雑です。プロパティがデフォルトで継承可能である場合、値は継承可能であり、それ以外の場合、値は初期値であることを示します。実際、unset を設定することは、設定しないことと同じです。 互換性: IE はサポートしません、safari9- はサポートしません、ios9.2- サポートしません、android4.4.4- はサポートしません

【一般的に使用されるデフォルトが使用可能です。継承スタイル】

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>

は、のデフォルト値を表しますスタイルシートで定義された要素属性。ユーザー定義のスタイル シートで明示的に設定されている場合は、この設定に従います。それ以外の場合は、ブラウザ定義のスタイル シートのスタイル設定に従います。それ以外の場合は、未設定と同等です。 互換性: safari9.1 および ios9 のみ3 サポート

all

は、unicode-bidi と方向を除くすべての CSS 属性の属性値をリセットすることを意味します。値は初期値のみです。 revert との互換性: IE はサポートされません、safari9 はサポートされません、ios9.2 はサポートされません、android4.4 はサポートされません

<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 サイトの他の関連記事を参照してください。