2024-07-15|閱讀時間 ‧ 約 24 分鐘

CSS入門-Day2：語法

CSS基礎

CSS（Cascading Style Sheets）的基本語法由選擇器、屬性和值組成。以下是基本語法的結構：

選擇器 {
  屬性: 值;
}

例如：

body {
  background-color: #f0f0f0;
  color: #333;
}

h1 {
  font-size: 2em;
  color: blue;
}

有三種方法可以將 CSS 引入到 HTML 中：

內聯樣式：直接在 HTML 元素的 style 屬性中定義樣式。
```
<p style="color: red;">這是一個紅色文本。</p>
```

內部樣式表：在 HTML 文檔的 <head> 部分使用 <style> 標籤定義樣式。

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

外部樣式表：將樣式定義在單獨的 CSS 文件中，並在 HTML 文檔的 <head> 部分使用 <link> 標籤引入該文件。
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```

元素選擇器：選擇 HTML 元素。
```
p {
  color: green;
}
```
類選擇器：選擇帶有特定 class 屬性的元素。使用 . 作為前綴。
```
.example {
  background-color: yellow;
}
```
ID 選擇器：選擇帶有特定 id 屬性的元素。使用 # 作為前綴。
```
#unique {
  font-weight: bold;
}
```

CSS 的層疊性指的是樣式的應用順序和優先級。當多個樣式同時應用於一個元素時，CSS 使用以下規則來決定哪個樣式優先：

優先級（Specificity）：
- 元素選擇器（最低優先級）：div、p、h1
- 類選擇器：.class
- 屬性選擇器和偽類選擇器：[type="text"]、:hover
- ID 選擇器（最高優先級）：#id
來源順序：當優先級相同時，後定義的樣式會覆蓋先前的樣式。
```
p {
  color: blue;
}

p {
  color: red;
}
```
在這個例子中，段落的顏色會是紅色，因為後面的樣式覆蓋了前面的樣式。

分享至

成為作者繼續創作的動力吧！