CSS ルールセットは何に使用されますか?

CSS は、Cascading Style Sheets の略です。 HTML 要素のスタイルを設定するために使用されます。 HTML は、Web ページにコンテンツを作成または追加するために使用されます。その後、開発者は CSS を使用して HTML コンテンツを特定のスタイルでレンダリングし、見栄えを良くします。

CSS ルール セットには主に 2 つの部分が含まれています。 1 つは CSS セレクターで、もう 1 つは宣言ブロックです。

CSS セレクターは HTML 要素の選択に使用され、宣言ブロックには HTML 要素に適用されるキーと値の形式の CSS プロパティが含まれています。

＃＃＃文法＃＃＃

ユーザーは、CSS ルール セットを使用して、次の構文に従って HTML 要素のスタイルを設定できます。

リーリー

上記の構文では、「selector」は HTML 要素のクラス名、ID などであり、HTML 要素を選択するために使用されます。宣言ブロックには、HTML 要素に適用する複数の CSS プロパティとその値が含まれています。

例 1 (CSS クラス名セレクター)

以下の例では、CSS ルールセットを定義するときにクラス名を CSS セレクターとして使用します。以下のコードには、異なるクラス名を持つ 3 つの div 要素があります。各 div 要素をクラス名で選択し、異なる CSS スタイルを適用しました。これはユーザーが出力で確認できます。

リーリー

例 2 (CSS ID セレクター)

以下の例では、CSS ルール セットを定義するときに、HTML 要素の ID を CSS セレクターとして使用します。 HTML では、2 つの要素に同じ ID を含めることはできません。

ここでは、「card」という ID を持つ div 要素があり、これには「content1」と「content2」に等しい ID を持つ他の 2 つの div 要素が含まれています。すべての HTML 要素のスタイルは、ユーザーが出力で確認できる ID でアクセスすることによって設定されます。

リーリー

例 3 (CSS 複数セレクター)

以下の例では、複数の CSS セレクターを使用して、同じ CSS スタイルを複数の HTML 要素に一度に適用します。

異なるクラス名と ID を持つ 3 つの

要素があります。 CSS では、「.text1、.text2、#para1」CSS セレクターを使用して、宣言ブロックに追加されたのと同じスタイルをすべての HTML 要素に適用します。

さらに、異なる要素に異なるスタイルを適用するために、クラス名と ID CSS セレクターを使用して 3 つの HTML 要素すべてを個別に選択しました。

リーリー

例 4 (CSS ネストされた要素セレクター)

次の例では、CSS のネストされたセレクターを紹介します。 HTML では、div 要素には、クラス名「link」を持つ複数の

要素が含まれます。

CSS では、「div .link」CSS セレクターを使用します。これは、クラス名「link」を持つすべての HTML 要素と div 要素の子孫を選択します。 CSS セレクターとして「div.link」を使用すると、クラス名「link」を持つすべての div 要素にスタイルが適用されます。したがって、「div.link」と「div .link」は両方とも異なる CSS セレクターです。

出力では、CSS スタイルが div 要素の子孫であるすべての

HTML 要素に適用されていますが、div 要素の外側の要素には適用されていないことがわかります。

リーリー 例 5 (CSS 疑似セレクター)

この例では、CSS 疑似セレクターの使用を示します。 CSS 擬似セレクターにはさまざまな種類があり、ここではそのうちのいくつかを使用します。

ここでは、「element」クラス名を持つ 4 つの子要素を含む「container」div 要素があります。ユーザーが div 要素の上にマウスを移動したときに、「:hover」疑似セレクターを使用して、「container」div 要素の背景色を変更します。

その後、「:first-child」、「:last-child」、「:nth-child()」CSS セレクターと「.element」セレクターを使用して、最初の子要素と最後の子要素を選択します。それぞれ要素要素と n 番目の子です。

出力では、最初の子、最後の子、2 番目の子に異なる CSS スタイルが適用されていることがわかります。

リーリー

ユーザーは、このチュートリアルでさまざまな CSS ルール セットの使用方法を学びました。クラス名と ID をセレクターとして使用します。さらに、複数の CSS セレクターとネストされた CSS セレクターの使用について学びました。前の例では、CSS ルールセットの疑似セレクターを使用する方法を学びました。

以上がCSS ルールセットは何に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。