「1.內部樣式表(內嵌樣式表)」
也稱為內嵌式，將CSS代碼集中寫在HTML檔案的head頭部標簽中，并且用style標簽定義，
- style標簽一般位于head標簽中，當然理論上他可以放在HTML檔案的任何地方，
- type=“text/css” 在html5中可以省略，
- 只能控制當前的頁面
- **缺點:**沒有徹底分離結構與樣式
<head>
<style type="text/CSS">
選擇器（選擇的標簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
「2.行內式(行內樣式)」
通過標簽的style屬性來設定元素的樣式
- style其實就是標簽的屬性
- 樣式屬性和值中間是:
- 多組屬性值直接用;隔開
- 只能控制當前的標簽和以及嵌套在其中的字標簽，造成代碼冗余，
- **缺點:**沒有實作樣式和結構相分離，
<標簽名 style="屬性1: 屬性值1; 屬性2: 屬性值2; 屬性3: 屬性值3;"> 內容 </標簽名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>
「3.外部樣式表(外鏈式)」
也稱鏈入式，將所有的樣式放在一個或多個以.css為擴展名的外部樣式表檔案中，通過link標簽將外部樣式表檔案鏈接到HTML檔案head中，
rel:定義當前檔案與被鏈接檔案之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的檔案是一個樣式表檔案，href:定義所鏈接外部樣式表檔案的URL，可以是相對路徑，也可以是絕對路徑，
<link rel="stylesheet" href="css檔案路徑">
「1. 后代選擇器」
又稱為包含選擇器
- 用來選擇元素或元素組的子孫后代
- 其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用**「空格」**分隔，先寫父親爺爺，再寫兒子孫子，
- 子孫后代都可以這么選擇，或者說，它能選擇任何包含在內 的標簽，
父級 子級{屬性:屬性值;屬性:屬性值;}
.class h3 {color:red;font-size:16px;}
- 當標簽發生嵌套時，內層標簽就成為外層標簽的后代，
- 子孫后代都可以這么選擇，或者說，它能選擇任何包含在內的標簽，
「2. 子元素選擇器」
- 子元素選擇器只能選擇作為某元素子元素**(親兒子)**的元素，
- 其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個
>進行連接 - 這里的子,指的是親兒子，不包含孫子 重孫子之類，
.class>h3 {color:red;font-size:14px;}
「3. 交集選擇器」
- 其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間
不能有空格，如h3.special，
交集選擇器是并且的意思,即...又...的意思
比如： p.one 選擇的是： 類名為 .one 的段落標簽，
/*用的相對來說比較少，不建議使用，*/
「4. 并集選擇器」
如果某些選擇器定義的相同樣式，就可以利用并集選擇器，可以讓代碼更簡潔，并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體宣告，
- 任何形式的選擇器（包括標簽選擇器、class類選擇器 id選擇器等），都可以作為并集選擇器的一部分，
- 并集選擇器通常用于集體宣告 ，逗號隔開的，所有選擇器都會執行后面樣式，逗號可以理解為和的意思，
比如
.one,
p,
#test {
color: #F00;
}
表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色，
通常用于集體宣告，
「5. 鏈接偽類選擇器」
例如：滑鼠經過的時候，由原來的 灰色 變成了紅色， 用冒號表示
用于向某些選擇器添加特殊的效果，寫的時候，他們的順序盡量不要顛倒,按照LVHA的順序，否則可能引起錯誤，
記憶：love hate 或者 lv 包包 hao
鏈接偽類，是利用交集選擇器.
a:link未訪問的鏈接a:visited已訪問的鏈接a:hover滑鼠移動到鏈接上a:active選定的鏈接
實際作業中，很少寫全四個狀態，一般寫法如下：
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
text-decoration: none; /* 清除鏈接默認的下劃線*/
}
a:hover { /* :hover 是鏈接偽類選擇器 滑鼠經過 */
color: red; /* 滑鼠經過的時候，由原來的 灰色 變成了紅色 */
}
因為a鏈接在瀏覽器有 默認樣式，所以我們實際作業中給鏈接單獨指定樣式，
「6. focus偽類選擇器」
:focus偽類選擇器用于選取焦點的表單元素，
焦點就是游標，一般情況<input>類表單元素才能獲取，因此這個選擇器也主要針對表單元素來說，
input:focus {
background-color: aqua;
}
| 選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
|---|---|---|---|---|
| 后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 .nav a |
| 子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
| 交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
| 并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體宣告 | 較多 | 符號是逗號 .nav, .header |
| 鏈接偽類選擇器 | 給鏈接更改狀態 | 跟鏈接有關 | 較多 | 重點記住 a{} 和 a:hover 實際開發的寫法 |
| :focus選擇器 | 選擇獲得游標的表單 | 跟表單相關 | 較少 | input:focus |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/397379.html
標籤：其他
下一篇：簡單運用理解webpack