CSS3のall属性の使い方を理解する

1. 互換性

以下のように表示されます。

互換性は問題ありません。IE を除き、他のブラウザは基本的に問題ありません。私自身のエンターテイメントやイントラネット プロジェクトに使用できます。

2. これらはすべて何に使用されますか?

all 属性は、実際にはすべての CSS プロパティの略語です。つまり、すべての CSS プロパティはこれまたはあれのようなものですが、2 つの CSS プロパティ unicode-bidi と direction は含まれません。

この CSS プロパティはなぜ存在するのでしょうか?

一部の CSS プロパティ値は継承など、基本的にすべての CSS プロパティに共通していることはご存知かもしれません。

CSS リセット入力ボックスを使用する場合、これに似たコードはありますか (実際には同様の効果を持つ特定の値である可能性があります)。

入力、テキストエリア {
    色: 継承;
    フォントサイズ: 継承;
    フォントファミリー: 継承;
}

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

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

マージには CSS all プロパティが使用されます。

入力、テキストエリア { 
   すべて: 継承; 
}

これはデモンストレーション目的のみです。実際にはこのようには使用されません。all:inherit により、背景色やその他の要素が親から継承されるため、これは望ましい表示ではないと思います。

3. 文法と区別

構文は次のとおりです。

すべて: 初期;
すべて: 継承;
すべて: 未設定;

/* CSS4 機能、無視 */
すべて: 元に戻す;

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

<記事>
    <h6>タイトル</h6>
    <p>p はテキストに変更されます</p>
    <オル>
        <li>順序付きリスト 1</li>
        <li>順序付きリスト 2</li>
        <li>順序付きリスト 3</li>
    </ol>
    <textarea>テキストエリア</textarea>
</記事>
記事 {
    背景色: #f0f3f9;
    色: 緑;
}
記事 > テキストエリア {
    境界線: 1px 実線 #34538b;
    背景色: #ffffe0;
    色: 赤;
}

ご覧のように：

テキスト フィールドの色、間隔、状態は、私たちが想定しているとおりの外観になっています。

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

.initial > * {
    すべて: 初期;
}
.継承 > * {
    すべて: 継承します。
}
.unset > * {
    すべて: 未設定;
}

結果：

initial は初期値を意味します。つまり、article 要素の下のすべての第 1 レベルの子要素は、unicode-bidi と direction を除く CSS の初期値を使用します。

たとえば、<h6> 要素と <p> 要素にはブラウザに組み込まれた display:block 機能がないため、インライン要素となり、1 行で表示されます。

フォントサイズもブラウザソフト自体で設定されている16pxのサイズが使用され、色もブラウザソフト自体のデフォルト設定である黒になります。たとえば、ブラウザの設定でフォント サイズを中から大に変更します。

表示されるテキスト コンテンツも大きくなっていることがわかります。

隣接レベルの子要素のみ初期設定を行ったため、<li>要素には影響がありません。ただし、親要素が不明な場合の<li>要素のデフォルト設定はドットなので、ここの数字はドットに変更され、list-style-typeとlist-style-positionの両方が変更されます。

継承は継承を意味します。つまり、article 要素の下にあるすべての隣接する子要素は、unicode-bidi と direction を除いて、<article> 要素の CSS を継承します。

したがって、<h6> 要素と <p> 要素はブロック形状のままで、background-color は <article> 要素の背景色となり、色は <article> と同じ緑色になります (テキスト領域の赤色は削除されます)。

上記の CSS だけでなく、padding/margin も継承されますが、デフォルトは 0 なのでわかりにくいです。少し変更して、たとえば <article> 要素に margin 値を与えてみましょう。

その結果、これらの子要素はすべて開花しました。

設定解除

設定解除は設定を解除することを意味します。つまり、article 要素の下にある隣接する子要素の CSS のうち、unicode-bidi と direction を除くすべての CSS が削除されます。これらが不要な場合は何を使用すればよいでしょうか。未設定値の特性は、現在の要素ブラウザまたはユーザーによって設定された CSS は無視され、color などの継承特性を持つ CSS の場合は継承された値が使用されます。background-color などの継承特性を持たない CSS プロパティの場合は初期値が使用されます。

そのため、<h6> 要素と <p> 要素の display 属性値は初期値を使用するため、インライン要素となり、同じ行に表示されます。これらの要素の色は継承値を使用するため、すべて緑色になります。<textarea> の背景色には継承機能がないため、初期値、つまり透明が使用されます。そのため、スクリーンショットにその効果が表示されています。

やっと

非常に多くの CSS が関係しているため、この CSS プロパティを使用する必要があるシナリオがまだ思いつきません。あるいは、入力ボックスの外側の div など、特殊な要素を突然通常の要素にしたい場合や、input{all:inherit;} と入力する場合など、そのようなシナリオがあるようですが、入力ボックスには境界線、背景、パディング、または余白は必要ありません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。