CSS3_html/css_WEB-ITnose のすべての属性を簡単に理解する

1. 互換性

一部の CSS 記事や CSS ドキュメントでは、互換性が最後に置かれています。

恥ずかしいことではありません。さあ、銃剣から始めましょう。

互換性は問題ありませんが、IE はサポートされていませんが、他のブラウザは基本的に緑色で、イントラネット プロジェクトなどに使用できます。

2. all は何に使用されますか?

all 属性は実際にはすべての CSS 属性の略語であり、すべての CSS 属性がこれに似ていることを意味しますが、unicode-bidi は含まれません。と方向。これら 2 つの CSS プロパティ。

なぜこの CSS プロパティがあるのでしょうか?

一部の CSS プロパティ値は、inherit!

CSS で入力ボックスをリセットするときに、基本的にすべての CSS プロパティで共有されることはわかっていると思います (実際には特定の値である可能性があり、機能は同様です):

input, textarea {    color: inherit;    font-size: inherit;    font-family: inherit;}

このタイプの入力コントロール自体にはサイズとフォントが組み込まれているため、リセットする必要があります。

この時点で、これらの属性値はすべて継承されていることがわかります。これらをマージできれば素晴らしいでしょう。

ヨーヨーヨー、本題に入りますが、マージには CSS の all 属性が使用されます。

input, textarea {    all: inherit; }

ああ、スリーインワン、春風が顔に吹いているような気がします。ただし、これは表示用であり、all:inherit では背景色などを親から継承させるため、実際には使用しません。

3. 構文と相違点

構文は次のとおりです:

all: initial;all: inherit;all: unset;/* CSS4特性，无视之 */all: revert;

3 つの共通の CSS 属性値、initial、inherit、unset をサポートします。それぞれを表します とはどういう意味ですか?

ここをクリックできます: CSS3 全属性デモ デモ

デフォルトの HTML と CSS は次のようになります。タイトルとリストを含む従来のタグ コンテンツです:

<article>    <h6>标题</h6>    <p>p变文字</p>    <ol>        <li>有序列表1</li>        <li>有序列表2</li>        <li>有序列表3</li>    </ol>    <textarea>文本域</textarea></article>

article {    background-color: #f0f3f9;    color: green;}article > textarea {    border: 1px solid #34538b;    background-color: #ffffe0;    color: red;}

この繁栄した時代では、ご覧のとおり:

色、間隔、テキストフィールドのステータスはすべて、私たちが考えるとおりに表示されます。

ここで、デモのドロップダウンをクリックし、対応するすべての属性値を選択し、次の CSS 効果を実現します:

.initial > * {    all: initial;}.inherit > * {    all: inherit;}.unset > * {    all: unset;}

結果:

• initial

  Initial は初期値を意味します。つまり、article 要素の下にあるすべての第 1 レベルのサブ要素は、unicode-bidi と direct を除く CSS の初期値を使用します。

  たとえば、 4e9ee319e0fa4abc21ff286eeb145ecc 、 e388a4556c0f65e1904146cc1a846bee 要素は inline 要素に置き換えられているため、次のように 1 行で表示されます。

  フォントサイズもブラウザソフト自体で設定したサイズ16pxを使用し、カラーもブラウザソフト自体の黒色に変更されます。たとえば、ブラウザ設定のフォント サイズを中から大に変更します:
  。表示されるテキスト コンテンツも大きくなることがわかります:
  隣接レベルのサブ要素については初期設定のみが行われるため、25edfb22a4f469ecb59f1190150159c6 要素は影響を受けません。ただし、親要素が不明な場合、25edfb22a4f469ecb59f1190150159c6 要素はドットになります。この時点で、list-style-type と list-style-position の両方が変更されています。

inherit
• Inherit は継承を意味します。つまり、article 要素の下にあるすべての隣接する子要素は、unicode-bidi と Direction を除く CSS を継承します。記事>要素。

  したがって、4e9ee319e0fa4abc21ff286eeb145ecc 要素は依然としてブロック形状であり、背景色は 23c3de37f2f9ebcb477c4a90aac6fffd 要素の背景色です。 ;article>、緑色です (テキスト フィールドの赤色が削除されています)。

  上記の CSS だけでなく、padding/margin も引き継がれていますが、デフォルトが 0 なので少し変更して、例えば 23c3de37f2f9ebcb477c4a90aac6fffd 要素を与えてみましょう。マージン値:
  その結果、これらの子要素が開花しました:

unset
• unset とは、設定を解除するには、つまり、unicode-bidi と direct を除く、article 要素の下にある隣接するサブ要素のすべての CSS を削除します。必要ない場合は、何を使用すればよいでしょうか。未設定の値の特性は次のとおりです。現在の要素のブラウザーまたはユーザーによって設定された CSS が、色などの継承された CSS プロパティである場合は、その値が使用されます。背景色などの継承された特性があれば、それが使用されます。

  したがって、4e9ee319e0fa4abc21ff286eeb145ecc 要素と e388a4556c0f65e1904146cc1a846bee 要素の表示属性値は初期値を使用するため、同じ行に 2 つ表示されます。要素は値を継承するため、すべて緑色になります。4750256ae76b6b9d804861d8f69e79d3 の背景色には継承プロパティがないため、透明な初期値が使用されます。

3. 結論

記事を書き始める前は、この CSS プロパティは予想外の魔法のような効果をもたらすだろうと思っていました。魔法の効果、私はそれを調べることしかできませんでした。

all 関連する CSS が多すぎて、この CSS プロパティが使用されるシナリオがまだ思いつきません。または、特別な要素を突然通常の要素にしたい場合、たとえば、input 入力ボックスの外側の div に input{all:inherit;} が付いている場合、そのようなシナリオがあるようですが、入力ボックスはそうします境界線も背景も必要ありません パディングもマージンも必要ありません、まあ、悪くない、この記事を書く価値はありません。

この記事はオリジナル記事であり、頻繁に更新され、一部の間違いは修正されますので、転載する場合は（画像を直接リンクしないでください）お願いします。トレーサビリティを容易にし、誤った知識による誤解を避けるために元のソースを保持し、より良い読書体験を提供します。

この記事のアドレス: http://www.zhangxinxu.com/wordpress/?p=5321

(この記事はここまで)