第 3 章 CSS アプリケーションの補足

セレクターの特性の適用

セレクターの特性について話す前に、CSS によって継承される特性について触れておく必要があります。いわゆる継承された特性とは、内部でラップされたタグが外部タグのスタイル プロパティを持つことを意味します。継承機能の最も一般的な用途は、Web ページ全体のスタイルをプリセットし、他のスタイルとして指定する必要がある部分を必要に応じて個別の要素に設定することです。この機能は、Web デザイナーに、より理想的な空間を提供します。次は、セレクターの特性の応用について話しましょう。実際、この部分は宣言の方法と見なす必要がありますが、第 2 章の基本的な宣言と適用を読んだ後、ここでセレクターについて説明するときに、よりよく理解できるようになります。 CSS を適用または設計する場合、要素の関係やプロパティに基づいて特定の表示プロパティを設定する方法がいくつかあります。これはセレクター プロパティの適用であり、より柔軟な制御と適用が可能になります。 1. コンテキスト セレクター: ステートメント ラベルのコンテキスト関係に基づいて特定のプロパティを表示するメソッド。コンテキスト セレクターは、ブラウザーが HTML ソース コードで指定されたコンテンツを表示するときに、要素タグのコンテキストを考慮して、指定されたスタイル ステートメントを表示することを意味します。つまり、HTML ソース コード内のタグの順序が一貫している限り、このステートメントは有効になります。要素 A (タグ A) 要素 B (タグ B) 要素 C (タグ C) ... {スタイル ルール} コンテキスト セレクターの宣言は集合宣言とよく似ていますが、コンテキスト セレクターの要素タグは集合宣言はカンマで区切る必要があり、コンテキスト セレクターを使用して宣言する場合は要素タグを区切るのにスペースを使用します。これら 2 つの宣言方法を混合することができます。要素 A 要素 B、要素 C 要素 D 要素 E、... {スタイル ルール} このように、集団宣言を使用して、配列コンテキスト セレクターのスタイル ルールを宣言できます。 2. カテゴリ セレクター: 1 つまたは複数のタグが同じスタイル ルールのセットを使用できるようにする方法。このクラスでは、異なる要素タグに同じスタイル プロパティのセットを適用したり、同じ要素タグに異なるスタイル プロパティのセットを適用したりすることができます。最初の紹介は、次の例に示すように、同じスタイル プロパティのセットを異なる要素に適用する方法です。 ...

...

...

...

... の前にある小さな点に注目してください。宣言、CLASS 名は任意に選択できます。同じ要素タグに異なるスタイル属性セットを適用したい場合は、カテゴリ属性を適用して設定することもできます。 ...

...

...

...

名前は任意です。カテゴリ機能を柔軟に活用することで、スタイル設定をより柔軟に行うことができます。 3. ID セレクター: カテゴリ セレクターと同様に、違いは「一意性」にあります。 ID 属性の使用方法は category 属性とよく似ていますが、ファイル内の各 ID は一意です。つまり、category 属性は 1 つまたは複数の要素タグに繰り返し適用できますが、ID 属性はドキュメント内で 1 回しか出現できません。以下の例のように書くだけです。 ... P ID=" blue" >...

...ご覧のとおり、宣言方法はポンド記号『#』を使用します。 ID の「一意性」が、JavaScript または VBScript による要素の制御を可能にする鍵となります。上記で紹介したセレクター特性の宣言と使用により、スタイル設定をより柔軟かつ変更可能にすることができます。実際、まず前の章で紹介した基本的な宣言と適用方法に慣れてから、この章で説明するセレクター機能を適用して、段階的にスタイル シートの使用に慣れることができます。

同様の機能を持つアプリケーションを接続します

HTML の基本的な構文を覚えていますか? BODY タグで、link、alink、および vlink 属性を使用して、リンク可能なフォントまたはリンクされたフォントのフォントの色を制御できます。最近では、CSS を使用して、「疑似クラス」と呼ばれるこれらのプロパティを制御することもできます。これを一般的なカテゴリとして扱い、そのスタイル ルールを宣言することができます。実際、これらの疑似カテゴリでは、上記のカテゴリ セレクターのように、HTML ソース コードで指定されたカテゴリ (CLASS) を設定する必要はありません。疑似カテゴリの宣言と適用を以下に紹介します。一般的な宣言方法: 疑似カテゴリはコロンで宣言されます。次のステートメントを 構造に追加する限り、ページ上のリンク テキストは設定したスタイルに従って表示されます。 A:link { スタイル ルール }A:active { スタイル ルール }A:visited { スタイル ルール }A:hover { スタイル ルール }A:link は、未訪問のリンクのスタイル ルールを設定するために使用されます。 A:active は、アクティブなリンクのスタイル ルールを設定するために使用されます。 A:visited は、訪問済みリンクのスタイル ルールを設定するために使用されます。 A:hover は、マウスがリンク上に移動したときのスタイル ルールを設定するために使用されます。このうち、ホバー機能は NC4 ではサポートされていませんが、他の 3 つの機能は両方の主要ブラウザでサポートされています。 IE4 以降のブラウザを使用している場合は、この Web サイトのリンクからホバー機能の素晴らしさを知ることができます。シンプルなスタイル設定で、長い設定リストを作成する必要があったのと同じ効果を得ることができます。このリンク擬似カテゴリは、上記のカテゴリ ピッカー機能と組み合わせて使用​​することもできます。

ＤＩＶＶとＳＰＡＮの比較 HTMLの応用レベルを大幅に拡張します。 DIV と SPAN の 2 つの要素は用途が非常に似ており、使用する場合は終了タグ (

...

と ...) を追加する必要があります。スパン＞適用可能な 2 つのプロパティとイベント処理も非常に似ており、どちらも前述のセレクター機能と組み合わせて作成できます。どちらもページコンテンツに表示機能を課すものではないため、非常に広く使用されている要素タグと言えます。 DIV と SPAN の違いは、DIV 要素がブロックとして定義され、

...

の間が完全な段落ブロックであることです。 SPAN要素はインラインとして定義されており、...は狭い範囲の設定に使用されます。この 2 つは互いに独立しているため、混合することができます。したがって、これら 2 つの要素を他のプロパティと組み合わせて使用​​すると、Web ページに表示されるコンテンツを柔軟に調整できます。

上記は第 3 章 CSS アプリケーションの補足的な内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。