css3 の新しい属性とは何ですか?用途は何ですか?

Web フロントエンド開発の便宜を図るために、CSS3 には多くの新しい属性 (新機能) が追加されており、誰もがその役割と使用法を理解できるように、CSS3 の新しい属性が何であるかを紹介します。すべての属性。困っている友人は参考にしていただければ幸いです。 [css3 関連の知識をさらに学びたい場合は、ビデオ学習をお勧めします: css3 チュートリアル ]

まず、css3 all 属性とは何なのかを理解しましょう。何ができるでしょうか？

all 属性は実際にはすべての CSS 属性の略称であり、すべての CSS 属性がどうあるべきかを示します。ただし、2 つの CSS 属性である unicode-bidi と direct は含まれません。したがって、all 属性の役割を知ることができるはずです。

all 属性: テキストの方向を制御する 2 つの属性 (direction 属性と Unicode 属性) を除く、選択したすべての要素属性をリセットできます。双方向属性。

.demo{
  all: unset;
}

その焦点は、コンポーネントレベルのスタイルのリセットを可能にすることです。場合によっては、元のスタイルを変更するよりも、目的のスタイルを最初から設定する方がはるかに簡単です。

all 属性で設定できる 属性値を見てみましょう:

1 初期: 選択したすべての要素の属性をそれらの値にリセットします。 CSS仕様の初期値で定義されています。

2. 継承: 選択した要素は、通常は継承できないスタイルを含む、すべての親要素のスタイルを継承します。

3. 設定解除: 選択した要素は、親要素から継承された継承可能な値を継承します。継承可能な値がない場合は、CSS 仕様の初期値が各プロパティに使用されます。

注:

CSS の一部のプロパティは、仕様で初期値が明確に定義されていませんが、色やフォント ファミリなど、ユーザーが独自に初期値を設定できるようにしています。

all は、単一の宣言を使用して各 CSS プロパティの値を一度に制御できるため、省略形のプロパティです。ただし、ほとんどの省略表現プロパティとは異なり、実用的な「省略表現」バージョンやサブプロパティはありません。

all のデモンストレーション効果を見てみましょう:

html コード:

<div class="container">
    <div class="parent">
        <div class="alltest">
            <p>Change this div&#39;s <code>all</code> value.</p>
        </div>
    </div>
</div>

css コード:

.container {/* 继承 */
  font-family: sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

.parent {
  color: green;/* 继承*/

  /* 不继承 */
  background-color: gainsboro;
  width: 80%;
  padding: 1em;
  border: 5px solid #E18728;
}

レンダリング (all 属性を使用しない場合) ) :

次に、.alltest セレクターを設定し、すべての属性をそれぞれ追加します:

all:initial;

all:inherit;

all:unset;

継承値を使用すると、div は幅、パディング、境界線を含むすべてのプロパティを親から継承しますが、これらは通常は継承されないことに注意してください。

ブラウザのサポート

数字は、ブラウザがこのバージョン以降の機能をサポートしていることを示します。

PC バージョン

モバイル/タブレットバージョン

概要: 以上ですこの記事の内容全体が皆さんの研究に役立つことを願っています。

以上がcss3 の新しい属性とは何ですか?用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。