コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3_html/css_WEB-ITnose のすべての属性を簡単に理解する

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

WBOY
リリース： 2016-06-21 08:53:16
オリジナル
1408 人が閲覧しました

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 の初期値を使用します。

    たとえば、

    、

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

    フォントサイズもブラウザソフト自体で設定したサイズ16pxを使用し、カラーもブラウザソフト自体の黒色に変更されます。たとえば、ブラウザ設定のフォント サイズを中から大に変更します:

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

    隣接レベルのサブ要素については初期設定のみが行われるため、
  • 要素は影響を受けません。ただし、親要素が不明な場合、
  • 要素はドットになります。この時点で、list-style-type と list-style-position の両方が変更されています。

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

    したがって、

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

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

    その結果、これらの子要素が開花しました:

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

    したがって、

    要素と

    要素の表示属性値は初期値を使用するため、同じ行に 2 つ表示されます。要素は値を継承するため、すべて緑色になります。