CSS: セレクターとプロパティ

レクチャー 2: セレクターとプロパティ

この講義では、CSS の構成要素であるセレクターとプロパティについて詳しく説明します。これらは、Web ページ上の特定の要素をターゲットにして効果的にスタイルを設定できるようにするための重要な概念です。

---

CSS セレクターとは何ですか?

CSS セレクターは、スタイルを設定する HTML 要素を選択するために使用されるパターンです。さまざまなタイプのセレクターを使用すると、タグ、クラス、ID、属性などに基づいてさまざまな要素にスタイルを適用できます。

セレクターの種類

1. 要素 (タイプ) セレクター:

   • 特定のタイプのすべての要素をターゲットとします。
   • 例:

    p {
      color: green;
    }
   

   これにより、すべての e388a4556c0f65e1904146cc1a846bee の色が変更されます。要素を緑色にします。

2. クラスセレクター:

   • 特定のクラス属性を持つ要素をターゲットとします。
   • 例:

    .highlight {
      background-color: yellow;
    }
   

   HTML では、class="highlight" を持つ要素の背景が黄色になります。
   

    <p class="highlight">This is highlighted text.</p>
   

3. ID セレクター:

   • 一意の ID 属性を持つ単一の要素をターゲットとします。
   • 例:

    #header {
      font-size: 24px;
    }
   

   id="header" を持つ要素のみ、フォント サイズが 24 ピクセルになります。
   

    <div id="header">Welcome to My Website</div>
   

4. グループセレクター:

   • 複数のセレクターに同じスタイルを適用します。
   • 例:

    h1, h2, h3 {
      color: blue;
    }
   

   このルールは、すべての 4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、および 684271ed9684bde649abda8831d4d355 を作成します。要素は青です。

5. 子孫セレクター:

   • 他の要素の内部 (子孫) にある要素をターゲットとします。
   • 例:

    div p {
      font-style: italic;
    }
   

   これにより、すべての e388a4556c0f65e1904146cc1a846bee が作成されます。 dc6dce4a544fdca2df29d5ac0ea9906b 内の要素斜体。
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

CSS プロパティを理解する

CSS プロパティは、選択した要素のどの側面をスタイル設定するかを定義します。各プロパティの後には、目的の結果を指定する値が続きます。

プロパティの例:

• 色:

  • テキストの色を設定します。
  • 例:

  h1 {
    color: red;
  }
  

• 背景色:

  • 背景色を設定します。
  • 例:

  body {
    background-color: #f0f0f0;
  }
  

• フォントサイズ:

  • テキストのサイズを設定します。
  • 例:

  p {
    font-size: 16px;
  }
  

• マージン:

  • 要素の外側のスペースを設定します。
  • 例:

  .box {
    margin: 20px;
  }
  

• パディング:

  • 要素内のコンテンツと境界線の間にスペースを設定します。
  • 例:

  .content {
    padding: 10px;
  }
  

実際的な例:

これまでに学んだことを簡単な例と組み合わせてみましょう。

HTML:

8ca2b4eb17525146e680c309e9dfa6a5
  4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a
  03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS:

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

この例では:

• #container div は黒い枠線とパディングでスタイル設定されています。

• 見出しは紫色です。

• クラスの紹介を含む段落は、背景が水色でフォント サイズが大きくなります。
• 両方

  e388a4556c0f65e1904146cc1a846bee要素は Arial フォントを使用します。

• #container 内のすべての段落には、スペースを確保するために下余白があります。

練習演習

1. 見出し、段落、div を含む単純な HTML ファイルを作成します。
2. コンテンツのスタイルを設定するために、さまざまなセレクターとプロパティを試してください。
3. 子孫セレクターを使用して、ネストされた要素のスタイルを設定してみてください。
4. グループ化セレクターを操作して、同じスタイルを複数の要素に適用します。

---

次のステップ: 次の講義では、CSS ボックス モデル を検討し、マージン、ボーダー、パディング、コンテンツがどのように組み合わされてレイアウトを定義するかを学びます。ウェブ要素。また会いましょう!

フォローしてください -

LinkedIn- リドイ・ハサン

-

以上がCSS: セレクターとプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。