CSSスタイルシートの書き方

CSS スタイル シートは、要素セレクター (1)、属性と値 (2) によって HTML 要素の外観を制御し、優先順位は具体性 (3)、順序、重要度によって決まります。さらに、メディア クエリ (4) を使用すると、特定の条件に基づいてスタイルを変更したり、リンク要素 (5) を介してスタイル シートを HTML ドキュメントにリンクしたりできます。

CSS スタイルシートの準備

CSS (Cascading Style Sheets) は、HTML 文書を編集するための手法です。様式化された言語。色、フォント、レイアウト、アニメーションなどの要素の外観を制御できます。 CSS スタイルシートの書き方は次のとおりです:

1. 要素セレクター

CSS スタイルシートは、スタイルを設定する HTML 要素を識別する要素セレクターで始まります。要素セレクターは、要素名 (例: p)、クラス (例: .example)、または ID (例: #header) に基づくことができます。

2. 属性と値

要素セレクターの後には中括弧が続き、スタイル属性とその値が含まれます。プロパティは変更するスタイルを定義し、値はプロパティの設定を指定します。例:

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

3. 優先度

複数のスタイル ルールが同じ要素に適用される場合、優先度の高いルールが適用されます。優先順位は次の要素によって決まります。

• Specificity: 特定の要素セレクターは、ワイルドカード セレクターよりも高い優先順位を持ちます。
• 順序: 後で宣言されたルールの方が優先されます。
• 重要性: !重要 キーワードは、優先度が低い場合でもルールを強制的に適用します。

4. メディア クエリ

メディア クエリを使用すると、画面サイズ、デバイスの種類、またはその他の基準に基づいてスタイルを変更できます。 @media ルールとそれに続く条件:

<code class="css">@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
}</code>

5 を使用します。Link

CSS スタイルシートでは link## を使用できます。 # 要素は次のように HTML ドキュメントにリンクします:

<code class="html"><link rel="stylesheet" href="style.css"></code>

これらの手順に従い、CSS ルールの優先順位を理解することで、Web サイトの外観と機能を強化する効果的な CSS スタイル シートを作成できます。

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