ホームページ >ウェブフロントエンド >htmlチュートリアル >初期、継承、設定解除、元に戻す和all_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:18:511381ブラウズ

× 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 のすべての属性は値を設定しないことと同じになります。デフォルトの継承可能な属性は継承され、継承できない属性はデフォルト値のままになります。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。