CSS：選擇器和屬性-css教學-PHP中文網

CSS：選擇器和屬性

王林

發布： 2024-08-22 06:30:32

原創

877 人瀏覽過

CSS: selectors and properties

第二講：選擇器與屬性

在本次講座中，我們將深入探討 CSS 的構建塊：選擇器和屬性。這些是基本概念，可讓您定位網頁上的特定元素並有效地設計它們。

什麼是 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" 的元素才會有 24px 的字體大小。
```
 <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;
}

登入後複製

在此範例中：