初期、継承、設定解除、元に戻す和all_html/css_WEB-ITnose-htmlチュートリアル-php.cn

初期、継承、設定解除、元に戻す和all_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:18:51

オリジナル

1378 人が閲覧しました

× Directory [1]initial [2]inherit [3]unset [4]revert [5]all

前の単語

CSSでは、理論的には任意のCSSプロパティに適用できるキーワードが4つあります。初期（初期）、継承（継承）、アンセット（未設定）、リバート（復元）です。 all の値は、上記の 4 つのキーワードのみです。この記事では、initial、inherit、unset、revertなどを紹介します

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 非対応Supported

rrree

unset

unsetはinitialやinheritよりも比較的複雑です。プロパティがデフォルトで継承可能な場合、値は継承可能であることを示し、それ以外の場合、値は初期値になります。実際、unset を設定することは、設定しないことと同じです

互換性: IE はサポートしません、safari9- はサポートしません、ios9.2- はサポートしません、android4.4.4- はサポートしません

[一般的に使用されるデフォルトの継承可能なスタイル]

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

ログイン後にコピー

colorcursordirectionfontletter-spacingline-heightlist-styletext-aligntext-indenttext-shadowtext-transformwhite-spaceword-breakword-spacingword-wrapwriting-mode

ログイン後にコピー

revert

スタイルシートに定義されている要素属性のデフォルト値を表します。ユーザー定義のスタイルシートで明示的に設定されている場合は、この設定に従います。それ以外の場合は、未設定と同等です。

互換性: safari9.1+ および ios9 でのみサポートされます。 3+

all Supported, ios9.2-not support, android4.4-not support

//内容为测试一的元素和内容为测试二的元素的样式是一样的<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>

ログイン後にコピー

【1】all:initial の場合、.in のすべての属性はデフォルト値を取る

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

ログイン後にコピー

【2】の場合all:inherit [3] all:unset の場合、.in のすべての属性は値を設定しないことと同じになります。デフォルトの継承可能な属性は継承され、継承できない属性はデフォルト値のままになります。