CSSスタイルキーワード初期、継承、解除、元に戻すと、すべての

CSSでは、4つのキーワードは、理論的には(最初の)最初のある任意のCSSプロパティ、継承(継承)、解除(設定されていない)、元に戻す(復元)に適用することができますがあります。そして、これらの値の全ては、わずか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>

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

継承

これは、要素のプロパティの計算値に対応する直接の親要素を表し、

互換性: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>

解除

そして、当該初期設定解除を継承に関して、それが比較的複雑です。そうでない場合、値は初期;プロパティは、値の継承継承デフォルトである場合と述べました。実際には、未設定の設定の同等は設定されていません

互換性: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 +サポート

すべて

CSSプロパティのunicode-双方向および方向以外のすべての属性値をリセット表し、値が唯一の初期で、継承、設定を解除して元に戻します

互換性: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>

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

すべてとして、[1]:時の初期、すべての属性はデフォルト値です.IN

border:none;padding:0;color:black;

[2]と、すべての:継承、すべての属性は、親要素の継承値.IN取得されたとき

border:1px solid black;padding:20px;color:red;

[3]と、すべての:未設定、すべてのプロパティがない値と同等であるが、デフォルト継承継承、非継承デフォルト値で設定されている.IN

border:none;padding:0;color:red;

公開された267元の記事 ウォンの賞賛9 ビュー10000 +

おすすめ

転載: blog.csdn.net/weixin_45761317/article/details/104025070
おすすめ