CSS: セレクターとプロパティ-CSSチュートリアル-php.cn

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

王林

リリース： 2024-08-22 06:30:32

オリジナル

850 人が閲覧しました

CSS: selectors and properties

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

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

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

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

セレクターの種類

要素 (タイプ) セレクター:
- 特定のタイプのすべての要素をターゲットとします。
- 例:
```
 p {
   color: green;
 }
```
ログイン後にコピー
これにより、すべての
の色が変更されます。要素を緑色にします。
クラスセレクター:
- 特定のクラス属性を持つ要素をターゲットとします。
- 例:
```
 .highlight {
   background-color: yellow;
 }
```
ログイン後にコピー
HTML では、class="highlight" を持つ要素の背景が黄色になります。
```
 <p class="highlight">This is highlighted text.</p>
```
ログイン後にコピー
ID セレクター:
- 一意の ID 属性を持つ単一の要素をターゲットとします。
- 例:
```
 #header {
   font-size: 24px;
 }
```
ログイン後にコピー
id="header" を持つ要素のみ、フォントサイズが 24 ピクセルになります。
```
 <div id="header">Welcome to My Website</div>
```
ログイン後にコピー
グループセレクター:
- 複数のセレクターに同じスタイルを適用します。
- 例:
```
 h1, h2, h3 {
   color: blue;
 }
```
ログイン後にコピー
このルールは、すべての
、
、および
を作成します。要素は青です。
子孫セレクター:
- 他の要素の内部 (子孫) にある要素をターゲットとします。
- 例:
```
 div p {
   font-style: italic;
 }
```
ログイン後にコピー
これにより、すべての
が作成されます。
内の要素斜体。
```
 <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:

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>

ログイン後にコピー

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;
}

ログイン後にコピー

この例では: