CSS基礎
CSS語法
CSS（Cascading Style Sheets）的基本語法由選擇器、屬性和值組成。以下是基本語法的結構：
選擇器 {
屬性: 值;
}
- 選擇器：指定要應用樣式的 HTML 元素。
- 屬性：定義了要修改的樣式屬性。
- 值：設置屬性的具體值。
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
font-size: 2em;
color: blue;
}
引入CSS
有三種方法可以將 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;
}
複合選擇器
- 後代選擇器：選擇某元素內的所有指定後代元素。
div p {
color: blue;
} - 子選擇器：選擇某元素的直接子元素。
ul > li {
list-style-type: none;
} - 相鄰兄弟選擇器：選擇緊跟在另一元素之後的元素。
h1 + p {
margin-top: 0;
} - 群組選擇器：對多個選擇器應用相同的樣式。
h1, h2, h3 {
color: navy;
}
層疊與優先級
CSS 的層疊性指的是樣式的應用順序和優先級。當多個樣式同時應用於一個元素時，CSS 使用以下規則來決定哪個樣式優先：
- 優先級（Specificity）：
- 元素選擇器（最低優先級）：div、p、h1
- 類選擇器：.class
- 屬性選擇器和偽類選擇器：[type="text"]、:hover
- ID 選擇器（最高優先級）：#id
- 來源順序：當優先級相同時，後定義的樣式會覆蓋先前的樣式。
p {
在這個例子中，段落的顏色會是紅色，因為後面的樣式覆蓋了前面的樣式。
color: blue;
}
p {
color: red;
}
