1. css的概念
CSS（Cascading Style Sheets，層疊樣式表）是一種用於描述HTML文件的表現形式的樣式語言。它被設計用於將網頁的內容與表現形式分離，可以控制網頁的外觀和佈局，包括間距、顏色、字型等視覺元素，而不需要直接修改HTML的結構。
2. 語法結構
選擇符 {
樣式屬性: 樣式屬性值;
樣式屬性: 樣式屬性值;
樣式屬性: 樣式屬性值, 樣式屬性值, 樣式屬性值;
}
2. 註釋語法
/* 這是註釋 */
3. 引入css的方式
3.1 head內style標籤內部直接編寫css程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: aqua;
}
</style>
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
3.2 head內link標籤引入外部css檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="newcss.css">
</head>
<body>
<p>avril lavigne</p>
</body>
</html>
3.3 行內式
標籤內部透過style屬性直接編寫
將HTML和css糅合到了一起（不推薦）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: blue">avril lavigne</p>
</body>
</html>
4. 基本選擇器
4.1 標籤選擇器（範圍查詢）
透過標籤名查詢標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1>avril</h1>
<h1>lavigne</h1>
<h1>haaland</h1>
</body>
</html>
4.2 類選擇器（範圍查詢）
透過標籤的class屬性查詢標籤 .類名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 class="c1">avril</h1>
<h1 class="c1">lavigne</h1>
<h1 class="c2">haaland</h1>
</body>
</html>
4.3 id選擇器（精確查詢）
透過標籤的id屬性查詢標籤 #id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
color: lightseagreen;
}
</style>
</head>
<body>
<h1 class="c1" id="d1">avril</h1>
<h1 class="c1" id="d2">lavigne</h1>
<h1 class="c2" id="d3">haaland</h1>
</body>
</html>
5. 關係選擇器
5.1 分類
後代選擇器、子代選擇器、相鄰兄弟選擇器、通用兄弟選擇器
5.2 演示說明
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
透過巢狀來表示標籤關係：
[1]對於div1來說，div2、p2、span2是子代
[2]對於div1來說，內部的所有標籤無論層級都是div1的後代
[3]div2、p2、span2是兄弟
5.3 程式碼
[1] 子代選擇器
關鍵符號是大於號
查詢id是d1標籤內部所有的子代span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 > span {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
[2]後代選擇器
關鍵符號是空格
查詢id是d1標籤內部所有的後代span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 span {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
[3]相鄰兄弟選擇器
關鍵符號是加號
查詢id是d2標籤同級別緊隨其後的span標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d2 + span {
color: blueviolet;
}
</style>
</head>
<body>
<div id="d1">div1
<div>div2
<p>p1</p>
</div>
<p id="d2">p2
<span>span1</span>
</p>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
[4]通用兄弟選擇器
關鍵符號是波浪號
查詢id是d2標籤同級別下所有的h1標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d2 ~ h1{
color: blueviolet;
}
</style>
</head>
<body>
<div>div1
<div id="d2">div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
<h1>avril</h1>
<h1>lavigne</h1>
</div>
</body>
</html>
6. 屬性選擇器
根據標籤內部的屬性名和屬性值查詢標籤（關鍵符號是中括號）
方式一：直接透過屬性名查詢
將帶有id屬性的標籤背景顏色改為blueviolet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id] {
background: blueviolet;
}
</style>
</head>
<body>
<input type="text" name="aaa" id="1">
<input type="text" name="bbb" id="2">
<p id="3">avril</p>
<p id="4">lavigne</p>
</body>
</html>
方式二：屬性名+屬性值
將屬性名為id，屬性值為1的標籤背景顏色改為blueviolet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id="1"] {
background: blueviolet;
}
</style>
</head>
<body>
<input type="text" name="aaa" id="1">
<input type="text" name="bbb" id="2">
<p id="3">avril</p>
<p id="4">lavigne</p>
</body>
</html>
方法三：標籤名+屬性名+屬性值
將標籤名為p、屬性名為id、屬性值為3的標籤背景顏色改為blueviolet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[id="3"] {
background: blueviolet;
}
</style>
</head>
<body>
<input type="text" name="aaa" id="1">
<input type="text" name="bbb" id="2">
<p title="666" id="3">avril</p>
<p title="666" id="4">lavigne</p>
</body>
</html>
7. 分組與巢狀
7.1 分組
[1] 語法
/*查詢div或者p或者span*/
div, p, span {
color: red;
}
[2]示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: blue;
}
p {
color: blue;
}
span {
color: blue;
}
</style>
</head>
<body>
<div>這是div標籤</div>
<p>這是p標籤</p>
<span>這是span標籤</span>
</body>
</html>
上述方法，重複程式碼造成了程式碼的冗餘
[3]最佳化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 逗號表示並列關係 */
div,span,p {
color: blue;
}
</style>
</head>
<body>
<div>這是div標籤</div>
<p>這是p標籤</p>
<span>這是span標籤</span>
</body>
</html>
7.2 巢狀
/*查詢id是d1或者class包含c1或者span*/
#d1, .c1, span {
color: red;
}
7.3 綜合運用
div#d1 查詢id是d1的div標籤
div.c1 查詢class包含c1的div標籤
div #d1 查詢div內部id是d1的後代標籤
#d1>.c1 查詢id是d1的內部class包含c1的子代標籤
8. 偽類選擇器
8.1 hover
設定滑鼠懸停在標籤時的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: grey;
}
p:hover {
color: deepskyblue;
}
</style>
</head>
<body>
<p>Avril lavigne</p>
</body>
</html>
8.2 focus
設定標籤在成為輸入焦點時的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input:focus {
background-color: deepskyblue;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
