css風の書き方-フロントエンドQ&A-php.cn

CSS (Cascading Style Sheets) スタイルは、フロントエンド開発に不可欠なテクノロジーです。 Web ページのレイアウト、フォント、色、その他のスタイルを制御して、Web ページのスタイルを統一できます。この記事では、読者が CSS をより深く理解して適用できるように、CSS スタイルの記述方法に焦点を当てます。

1. 埋め込みスタイル シート 埋め込みスタイル シートは、CSS スタイルを HTML コードに直接記述する方法です。スタイルを定義するには、HTML ドキュメントの で タグを使用します。例:

body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } ログイン後にコピー 上記の例では、body 要素の背景色は #f2f2f2、テキストの色は #262626、h1 要素のフォント サイズは 36 ピクセルで、太字で表示されます。 。

2. 外部スタイル シート 外部スタイル シートは、CSS スタイルを外部 CSS ファイルに個別に記述する方法です。外部スタイル シートを導入するには、HTML ドキュメントの で タグを使用します。例:

ログイン後にコピー style.css ファイルの内容は次のとおりです:

body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } ログイン後にコピー このようにして、HTML 内のすべての要素が外部スタイル シートからスタイル情報を取得できるため、より明確で簡潔な HTML が実現されます。コードです。

3. インライン スタイル インライン スタイルは、HTML タグの style 属性に CSS スタイルを直接記述する方法です。例:

Hello, world! ログイン後にコピー 上記の例では、h1 要素のフォントの色は赤、フォント サイズは 36 ピクセルです。

4. CSS セレクター CSS セレクターは、HTML 要素を選択し、スタイルを適用するために使用されるメカニズムです。名前、クラス名、ID、その他の属性に基づいて要素を見つけ、対応する CSS スタイルを継承またはオーバーライドできます。 CSS セレクターの一般的な使用法は次のとおりです。

タグ セレクター: 要素を検索し、タグ名でスタイルを適用します。例: h1 { color: red; } ログイン後にコピー クラス セレクター: 要素を見つけて、要素の class 属性を通じてスタイルを適用します。例: .red { color: red; } ログイン後にコピー HTML コードで、スタイルを設定する必要がある要素の class 属性を「red」に設定して、フォントの色を赤にします。

ID セレクター: 要素を検索し、その ID 属性を通じてスタイルを適用します。 HTMLコードでは、スタイルの効果を実現するために、スタイルを適用する必要がある要素のID属性を「id」に設定します。例: #header { background-color: #f2f2f2; } ログイン後にコピー 上記の例では、要素の ID は「header」で、背景色の #f2f2f2 の効果が得られます。

属性セレクター: 要素を見つけて、その属性値に基づいてスタイルを適用します。例: input[type="text"] { border: 1px solid #ccc; } ログイン後にコピー 上記の例では、type 属性値が「text」であるすべての入力要素の境界線は、1 ピクセルの太さの灰色の実線です。

子孫セレクター: 要素を見つけて、親子関係を通じてスタイルを適用します。例: div p { color: #262626; } ログイン後にコピー 上の例では、div 要素内のすべての p 要素のフォントの色は #262626 です。

上記は CSS セレクターの一般的な記述方法ですが、その柔軟な応用により面倒なスタイル調整を実現し、Web ページのレイアウト、フォント、色などをより美しくすることができます。

5. 概要 この記事では、埋め込みスタイル シート、外部スタイル シート、インライン スタイル、CSS スタイルの CSS セレクターなどの一般的な記述方法を紹介します。 create より美しく、より快適なユーザーエクスペリエンスを演出します。実際の開発では、コードの可読性や保守性を向上させるために、ニーズに応じて適切な CSS スタイルの記述方法を選択する必要があります。