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