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

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 を応援していただければ幸いです。

<<:  MySQL で左結合を使用して where 条件を追加する問題の詳細な分析

>>:  あまり使われていない、または誤解されている HTML タグ 10 個

推薦する

CSS スタイルを変更してグレーの Web ページ (色なし、明るい白黒のみ) を実現するいくつかの方法

通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...

Linux での MySQL マルチインスタンスの展開とインストール ガイド

MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...

MySQL ページングの制限パラメータの簡単な例

Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

要素のフォーム要素の使用の概要

フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...

HTML は Double 11 クーポン取得を実装します (クーポン取得ページを開く時間を設定します)

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...

メタタグの詳しい説明(メタタグの役割)

個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

マークアップ言語 - 画像の置き換え

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

HTMLページにビデオを挿入する方法の概要

ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...

CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明

構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...

Docker を使用してイメージをローカルにパッケージ化してデプロイする方法

初めてDockerを使用してイメージをローカルにパッケージ化してデプロイするまず、私のラップトップシ...

検証例 MySQL | 同じ値を持つフィールドを更新すると、binlog に記録されます

1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...