CSS でのさまざまなカスケード スタイルの例のまとめ

CSS (Cascading Style Sheets) は、HTML 文書の表示形式を指定するために使用されます。すべてのものには順序があり、すべてのものには年功序列があります。通常の状態では差異は見られず、これがいわゆるすべての生き物の平等です。しかし、衝突やもつれが生じた場合、完全な同等性を達成することが不可能であることは明らかであり、アイデンティティの差異が順番に現れます。カスケードは、ブラウザが複数のスタイル ソースをスタックし、最終的に結果を決定するプロセスです。この記事では、CSS カスケード スタイルの具体的な役割について説明します。

まず、PHP 中国語 Web サイトに関連する無料コースを学ぶことができます

1. CSS カスケード チュートリアルを学習します

CSS カスケード スタイル 1.

CSSスタイル継承とカスケード

機能:

タグセレクターは、現在のページで指定されたすべてのタグを選択します。

タグセレクターは、現在のページで選択できる限り、コードの現在のタグ階層とは関連付けられません。 。 ID の選択: 最初に ID 値を設定するタグを指定する必要があります (ID 値は繰り返すことができず、ページ全体で一意です)。

クラス選択: ラベルにクラス名を付け、クラスセレクターを通じて指定されたラベルを選択します。

2.

CSS カスケードメカニズムの詳細な説明

カスケード スタイル シートでのカスケードとは、スタイルがドキュメント構造内のあるレベルから別のレベルに渡されることを意味します。タグが適用されるソースのスタイル属性。

レイヤリングは強力なメカニズムです。カスケードを理解すると、最も経済的で保守しやすい方法で CSS を作成し、希望する理想的なドキュメントの外観を作成するのに役立ちます。

3.

CSS継承とカスケード機能の詳細説明

最初のPはセレクターを使用しないため、HTMLのデフォルトの表示色(黒)が使用されます

2番目のPはクラスセレクターを使用するため、クラスが最初に使用されます セレクターの色(赤)

3番目のPはIDとクラスの2つのセレクターを使用します IDセレクターはクラスセレクターよりも優先度が高いため、色は青で表示されます

4番目のPはInlineを使用しますセレクターと ID セレクター、インライン セレクターは ID セレクターよりも優先度が高いため、色は黄色で表示されます

5 番目の P は 2 つのクラス セレクターを同時に使用し、ブラウザーは Web ページを解釈するときに最初のクラス セレクターを使用します。クラス セレクターで定義された色が優先されるため、色は紫になります

6 番目の P は同時に 2 つの ID セレクターを使用しますが、ID セレクターは同時に 1 つのタグに対してのみ使用でき、グローバルに一意であるため、 , ブラウザはこれが不正だと判断し、色はデフォルト値(黒)で表示されます

4.

CSSカスケードスタイルシートの詳細説明

[attribute] 属性属性を持つ要素を選択します。

[attribute=value] 属性attributeと属性valueがvalueに等しい要素を選択します。

[attribute~=value] は、attribute 属性を持つ要素を選択します。属性値はスペースで区切られた単語のリストであり、そのうちの 1 つが value に等しいものです。

[attribute|=value] は、att 属性を持ち、属性値が val で始まりコネクタ「-」で区切られた文字列である E 要素を選択します。

[attibute^=value] は、attribute 属性を持ち、値が value で始まる E 要素と一致します

[attribute$=value] E 要素が、attribute 属性を持ち、値が value で終わるものと一致します

[attribute*=value] E と一致します属性を持つ要素と値を含む値

5. CSS スタイルシート、継承、カスケードおよび属性値を分析する

CSS には基本的な形式 (フォント サイズや色など) を制御する属性があります。 .) には、レイアウトを制御する属性 (位置やフロートなど) があり、訪問者が印刷時にページを変更する場所を決定する印刷制御要素があります。さらに、他にも多くの属性があります。 スタイル シートには、Web ページの外観を定義するルールが含まれています。各ルールには、セレクター (選択) と宣言ブロック (宣言) の 2 つの主要な部分があります。セレクターはどの要素が影響を受けるかを決定し、宣言ブロックは何を実行するかを指定する 1 つ以上の属性と値のペアで構成されます。

6.
CSS の特異性、継承、およびカスケード

! important でマークされた宣言は重要な宣言と呼ばれます。これには特別な特徴はありませんが、重要でない宣言とは分けて考慮する必要があります。

具体的には: 重要でないステートメントは 1 つのグループにグループ化され、それらの間の競合は特異性を使用して解決されます。重要なステートメントは 1 つのグループにグループ化され、それらの間の競合は常に重要でないステートメントよりも優先されます。

関連する質問と回答

1. スタッキング コンテキストのない要素は、カスケード コンテキストのある要素よりも大きな z-index を持つことができますか?

2. iOS WebView は HTML ファイルを読み込みます。 9.2 では問題が発生しますが、8.1 では水平レイアウトのカスケードが下部に表示されます

[関連推奨事項]

1. php 中国語 Web サイトの無料ビデオ チュートリアル: 「php.cn Dugu Jiijian (2) - CSS ビデオ チュートリアル」

2. php中国語サイト関連記事: DIVを重複させるCSSの例まとめ

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