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 個

推薦する

Google Web Fonts でウェブサイトに無制限のフォントを追加

長い間、リソースの制約により、使用できるフォントが限られていたため、Web サイトの開発は妨げられて...

js を使用してファイルが UTF-8 でエンコードされているかどうかを判断する方法

従来の解決策FileReader を使用して UTF-8 形式のファイルを読み取り、ファイルの内容に...

Windows と Linux 間のリモート デスクトップ接続

Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...

docker を使用して Redis マスター/スレーブを構築する方法

1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

Windows Server 2019 で NAS を構成する方法

序文このチュートリアルでは最新バージョンをインストールします。 NAS は非常に安定して動作するので...

Linuxにグラフィカルインターフェースをインストールする方法

1. Linuxのインストール(rootユーザー操作) 1. vncserver をインストールしま...

Linux の MariaDB データベースについて

目次Linux の MariaDB データベースについて1. データベースとは何ですか? 2. デー...

Windows での MySQL 8.0.16 のインストールと設定方法のグラフィック チュートリアル

この記事は、参考のためにMySQL 8.0.16のインストールグラフィックチュートリアルを記録してい...

Alibaba Cloud Server Linux システムは Tomcat を構築して Web プロジェクトを展開します

私は全体のプロセスを 4 つのステップに分けます。 JDKをダウンロードしてインストールするTomc...

React Native スキャフォールディングの基本的な使い方の詳細な説明

プロジェクトを構築する対応するパスでコマンドラインを実行します: react-native init...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。...

Vueのスロットの詳細な説明

Vue でのコードの再利用により、mixnis が提供されます。テンプレートの再利用により、スロット...