CSS —— 樣式表、複合選擇器
CSS —— 樣式表、複合選擇器
目錄
一、樣式表
樣式表分為：行內樣式表（行內式）、內部樣式表（嵌入式）、外部樣式表（連結式）。
1. 行內樣式表（內聯樣式表）（行內式引入）
1.1 概述：在元素標籤內部
1.2 語法格式：
<div style=" color : red; font-size : 28px;">文豪野犬</div>
2. 內部樣式表（內嵌樣式表）（嵌入式引入）
2.1 概述：內部樣式表是寫在HTML頁面內部，將所有的CSS程式碼一起單獨放在<style>標籤中；
2.2 語法格式：
<style> div { color: red; font-size: 28px; font-weight: 700px; } </style>
2.3 style標籤理論上可以放在HTML文件的任何位置；
3. 外部樣式表（）（連結式引入）
3.1 概述：將樣式單獨寫在CSS檔案中，再將CSS檔案引入到HTML頁面中使用；
3.2 步驟：
① 新建一個字尾名為 .css 的樣式檔案，在此檔案中書寫CSS程式碼；
② 在HTML頁面中，使用 <link> 標籤引入這個檔案；
3.3 語法格式：
<link rel="stylesheet" href="css檔案路徑">
二、複合選擇器
1. 概述
1.1 複合選擇器：由兩個或多個基本選擇器組合而成；
1.2 分類：後代選擇器、子選擇器、並集選擇器、偽類選擇器等
2. 後代選擇器（包含選擇器）
2.1 後代選擇器：將外層標籤寫在前面，內層標籤寫在後面，用空格隔開；（當標籤發生巢狀時，內層標籤就等同於外層標籤的後代）
2.2 語法格式：
<style>
div p {
color: red;
font-size: 28px;
font-weight: 700px;
}
</style>
<div>
<p> 天天開心 </p>
<span> 天天快樂 </span>
</div>
2.3 後代選擇器的元素可以是任意基礎選擇器，並且可以選擇巢狀標籤的巢狀標籤；
div span p {
color: red;
font-size: 28px;
font-weight: 700px;
}
<div>
<p> 天天開心 </p>
<span> <p> 天天快樂 </p> </span>
</div>
3. 子選擇器
3.1 子選擇器：只能選擇作為某元素最近一級的子集，用＞符號隔開；
3.2 語法格式：
div > p {
color: red;
font-size: 28px;
font-weight: 700px;
}
<div>
<p> 天天開心 </p>
<span> <p> 天天快樂 </p> </span>
</div>
即不可以選擇span中的p；
4. 並集選擇器
4.1 並集選擇器：可以選擇多組標籤，同時定義相同的樣式，通常用於集體宣告；
4.2 並集選擇器：通過英文逗號符隔開，任何形式的選擇器都可以作為並集選擇器的一部分；
4.3 語法格式：
div,
p {
color: red;
font-size: 28px;
font-weight: 700px;
}
<div> 天天開心 </div>
<p> 天天快樂 </p>
4.4 最後一個選擇器不需要加逗號；
5. 偽類選擇器
連結偽類選擇器：
5.1 分類：
5.2 具體解釋：
① a:link：未點選時為紅色；
a:link {
color: red;
}② a:visited：點選後變為紅色；
a:visited {
color: red;
}
③ a:hover：滑鼠經過時變為紅色；
a:hover {
color: red;
}
④ a:active：長按時變為紅色；
a:active {
color: red;
}
5.3 注意：
:focus偽類選擇器
5.1 用於獲取游標的表單元素，一般用於<input>表單類元素；
5.2 語法格式：（滑鼠點選後即變為紅色）
input:focus {
background-color: crimson;
}
<input type="text" name="a" >
