CSS（Cascading Style Sheets，層疊樣式表）是一種用於HTML（Hypertext Markup Language，超文本標記語言）文件的樣式表語言。 CSS可以讓網頁的外觀更加美觀、清晰，並且提高了網頁的可讀性和可維護性。
CSS樣式表通常包含三個部分：選擇器、屬性和值。選擇器指定要套用樣式的HTML元素，屬性定義套用在元素上的樣式，值則指定屬性的特定取值。
下面我們來詳細了解CSS的使用方法。
- 建立CSS樣式表
首先，我們需要為HTML文件建立一個CSS樣式表。通常，我們將CSS樣式表單獨儲存在一個.css檔案中，並在HTML文檔的
標籤內透過
標籤引入。
例如：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
登入後複製
- 選擇器
選擇器是指定CSS規則所應用的HTML元素的識別碼。常見的選擇器包括：
- 標籤名稱選擇器：使用HTML元素的標籤名稱來指定元素。例如：p、h1、div等。
- 類別選擇器：以「.」開始，後面跟著類別名稱。例如：.class1、.class2。
- ID選擇器：以「#」開始，後面跟著ID名稱。例如：#id1、#id2。
- 屬性選擇器：根據HTML元素的屬性來指定元素。例如：[attribute]、[attribute=value]等。
- 偽類選擇器：用於指定某些特殊的元素狀態。例如：:hover、:focus等。
範例：
/* 标签名选择器 */
p {
color: blue;
}
/* 类选择器 */
.red {
color: red;
}
/* ID选择器 */
#green {
color: green;
}
/* 属性选择器 */
[class="yellow"] {
color: yellow;
}
/* 伪类选择器 */
a:hover {
color: purple;
}登入後複製
- 屬性
#屬性是指定CSS規則所應用的HTML元素的樣式。常見的屬性包括：
- color：文字顏色。
- background-color：背景顏色。
- font-size：字體大小。
- font-family：字體類型。
- font-weight：字體粗細。
- text-align：文字對齊方式。
- margin：外邊距。
- padding：內邊距。
- border：邊框。
範例：
/* 文本颜色 */
p {
color: blue;
}
/* 背景颜色 */
body {
background-color: #eee;
}
/* 字体大小、字体类型、字体粗细 */
h1 {
font-size: 32px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* 文本对齐方式 */
div {
text-align: center;
}
/* 外边距、内边距 */
.box {
margin: 10px;
padding: 20px;
}
/* 边框 */
.img {
border: 1px solid black;
}登入後複製
- 值
值是屬性的具體取值。屬性的可取值範圍取決於屬性的類型。例如，顏色可以使用預先定義的顏色名稱（如“red”、“blue”等）或使用十六進位或RGB值（如“#ff0000”、“rgb(255,0,0)”等）。
範例：
/* 颜色 */
p {
color: blue;
}
/* 背景颜色 */
body {
background-color: #eee;
}
/* 字体大小、字体类型、字体粗细 */
h1 {
font-size: 32px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* 文本对齐方式 */
div {
text-align: center;
}
/* 外边距、内边距 */
.box {
margin: 10px;
padding: 20px;
}
/* 边框 */
.img {
border: 1px solid black;
}登入後複製
- 繼承
CSS中的樣式可以繼承。例如，我們可以為HTML文件中的所有段落設定一個字型屬性，並且這些屬性的值可以自動繼承給每個段落所包含的文字。
範例：
/* 字体 */
body {
font-family: Arial, sans-serif;
}登入後複製
- 層疊
當多個CSS規則套用於相同HTML元素時，它們會發生層疊。這意味著某些規則具有更高的優先級，並優先於其他規則。 CSS中使用的層疊原則是：
- 樣式指定性：簡單地說，就是選擇器的複雜度。
- 檔案順序：後面的規則會覆蓋前面的規則。
#範例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 优先级为1，文件顺序为1 */
p {
color: red;
}
</style>
<style>
/* 优先级为10，文件顺序为2 */
.green {
color: green;
}
</style>
<style>
/* 优先级为100，文件顺序为3 */
#blue {
color: blue;
}
</style>
</head>
<body>
<p class="green" id="blue">This text is blue.</p>
</body>
</html>登入後複製
- 外部樣式表
#將CSS樣式表用標籤連結到HTML文件通常被認為是最佳實踐。這樣做有以下幾個好處：
- 可快取：瀏覽器可以將CSS樣式表快取起來，以便下次載入。
- 可維護性：樣式可以在單獨的檔案中進行編輯和維護。
- 可跨瀏覽器：透過使用外部樣式表，可以確保樣式在不同瀏覽器中的一致性。
- 可適用性：可以將相同樣式套用到多個頁面，以確保一致性。
範例：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
This text is red.
This text is blue.
This text is green.
登入後複製
/* style.css */
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}登入後複製
- #內部樣式表
有時，將CSS樣式表儲存到HTML文件中可以提高頁面載入速度。如果樣式表僅適用於目前頁，可以將樣式表放在
標籤中的
