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 個
通常、清明節、国哀悼日、大地震の日、影響力のある偉人の死去または命日には、ウェブマスターとして、故人...
MySQLマルチインスタンスとは簡単に言うと、MySQL マルチインスタンスとは、サーバー上で複数の...
Mysqlページングの2つのパラメータ ユーザー制限 1,2 から * を選択 1 は検索する最初の...
フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...
ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...
フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...
個人のウェブサイトがどんなに素晴らしいものであっても、サイバースペースの広大な海に浮かぶ小さなボート...
質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合)...
構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...
初めてDockerを使用してイメージをローカルにパッケージ化してデプロイするまず、私のラップトップシ...
1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...
目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...