CSSカスケードとは何ですか

藏色散人
リリース: 2023-01-05 16:07:56
オリジナル
3625 人が閲覧しました

css カスケードは CSS の基本機能です。複数のソースからの属性値を結合する方法を定義するアルゴリズムです。CSS カスケードとは、CSS スタイルが同じ要素に同じ属性を設定する場合を意味します。ルールは競合を処理するために使用され、CSS セレクターによって指定された属性を最も高い重みで適用することを選択します。

CSSカスケードとは何ですか

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS カスケードとは何ですか?

カスケードは CSS の基本的な機能であり、複数のソースからのプロパティ値を組み合わせる方法を定義するアルゴリズムです。これは CSS の中核であり、CSS の正式名称である Cascading Style Sheets はこの点を強調しています。

CSS カスケードとは、CSS スタイルが同じ要素に同じ属性を構成する場合、カスケード ルール (重み) に従って競合を処理し、CSS セレクターで指定された属性を高い重みで選択することを意味します。一般に、より高い重みを持つものがより低い重みを持つものをカバーすると表現されるため、スタッキングとも呼ばれます。

各 CSS セレクターは重みを持ちます。2 つのセレクターが同じ要素の同じ属性を同時に設定すると (たとえば、1 つは色を赤に設定し、もう 1 つは黒を設定する)、競合が発生します。競合を解決する解決策は、CSS セレクターの重みです。重みの高い方が、重みの低い方をオーバーライドします。

カスケードとは、上位レベルのタグのスタイルがすべての下位レベルのタグに自動的に継承されることを意味します。たとえば、 に設定されたタグ セレクターに設定されたフォント スタイルが自動的に適用されます。

の下のタグに追加します (

が関連スタイルをオーバーライドして関連スタイルをオーバーライドしない限り)。

スタックとはスタイルの優先順位を指します。競合が発生した場合は、優先順位の高いものが優先されます:

  • 開発者スタイル>リーダー スタイル>ブラウズ セレクター スタイル(そうでない場合を除く) ! important タグを使用)

  • ##id ​​セレクター > (擬似) クラス セレクター > 要素セレクター

  • Weight 同時に、後で定義されるスタイル

CSS カスケード アルゴリズムは、CSS 宣言を選択することによって CSS プロパティに正しい値を設定することを期待します。 CSS 宣言はさまざまなソースから取得できます:

1. ブラウザには、Web ページのデフォルト スタイルを設定するための基本スタイル シートがあります。これらのスタイルは総称して **ユーザー エージェント スタイル** と呼ばれます。一部のブラウザは実際のスタイル シートを使用してこれを実行しますが、他のブラウザはコードを通じてこれをエミュレートしますが、どちらの場合も検出できないはずです。

また、一部のブラウザでは、ユーザーがユーザー エージェント スタイルを変更できるようになります。 HTML 標準ではユーザー エージェント スタイルに多くの制限が設けられていますが、ブラウザーにはまだやるべきことがたくさんあり、ブラウザーごとに大きな違いがあります。

開発コストを削減し、スタイル シートの実行に必要な基本環境を減らすために、Web 開発者は通常、CSS リセット スタイル シートを使用して、共通の属性値を特定の状態に強制します。

2. Web ページの作成者は、ドキュメントのスタイルを定義できます。これは最も一般的なスタイル シートです。ほとんどの場合、このタイプのスタイル シートが複数定義され、Web サイトのビジュアルとエクスペリエンス、つまりテーマを構成します。

3. 読者はブラウザ ユーザーとして、カスタム スタイル シートを使用してエクスペリエンスをカスタマイズできます。

CSS スタイルはこれらの異なるソースから取得されていますが、それらの範囲は重複しており、カスケード アルゴリズムによって相互作用する方法が定義されます。

【推奨学習:

css ビデオ チュートリアル

以上がCSSカスケードとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート