ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSスタイルルールとは何ですか

CSSスタイルルールとは何ですか

下次还敢
下次还敢オリジナル
2024-04-25 19:24:15443ブラウズ

CSS スタイル ルールは、セレクター (適用可能な要素を決定) や宣言ブロック (スタイル属性と値を定義) を含む HTML 要素の視覚スタイルを定義します。セレクターには、要素セレクター (要素名を指定)、クラス セレクター (クラス名を指定)、ID セレクター (ID を指定)、および子孫セレクター (子要素の選択) が含まれます。宣言ブロックには、テキストの色、フォント サイズ、背景色などの要素の外観を変更するために使用されるスタイル属性とその値が含まれています。

CSSスタイルルールとは何ですか

#CSS スタイル ルール

CSS スタイル ルールは、HTML 要素の視覚スタイルを定義するために使用されます。各ルールには 2 つの主要な部分が含まれています。

  • セレクター: ルールが適用される HTML 要素を識別します。
  • 宣言ブロック: 要素のスタイル属性とその値を定義します。

セレクター

セレクターはさまざまな方法でターゲット要素を指定できます:

  • 要素セレクター: pdiv などの特定の名前を持つ要素を選択します。
  • クラス セレクター: 特定の CSS クラス名 (.my-class など) を持つ要素を選択します。
  • ID セレクター: #my-id などの特定の ID を持つ要素を選択します。
  • 子孫セレクター: 要素の子要素 ​​(div p など) を選択します。
#宣言ブロック

宣言ブロックには、スタイル プロパティのセットが含まれており、それぞれの後にコロンと値が続きます。

    属性:
  • 設定するスタイル属性 (colorfont-sizebackground-color など)。
  • Value:
  • 属性の実際の値 (red12px#ffffff など)。
CSS スタイル ルールの例

<code class="css">p {
  color: blue;
  font-size: 16px;
}

.my-class {
  background-color: yellow;
  padding: 10px;
}</code>
最初のルールはすべての段落 (

p

) 要素に適用され、テキストの色を変更します。青、フォント サイズは 16 ピクセルです。 2 番目のルールは、my-class CSS クラスを持つすべての要素に適用され、背景色を黄色に設定し、10 ピクセルのパディングを追加します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。