百科簡介
層疊樣式表 (英文全稱：Cascading Style Sheets)是一種用來表現 HTML （ 標準通用標記語言 的一個應用）或 XML （標準通用標記語言的一個子集）等檔案樣式的計算機語言，
CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
1. CSS要怎么寫？寫哪里？
1.1 CSS的三種寫法：
1.1.1 第一種：行內樣式/行內樣式
在標簽內部通過style屬性來設定元素的樣式
問題：使用行內樣式，樣式只能對該標簽生效
1.1.2 第二種：內部樣式表
將樣式撰寫到head中的style標簽里，然后通過CSS的選擇器來選中元素并為其設定各種樣式，可以同時為多個標簽設定樣式，
優點：
內部樣式表更加方便對樣式進行復用
缺點：
內部樣式表只能對一個網頁起作用，不能跨頁面進行復用
1.1.3 第三種：（外部樣式表）
可以將CSS樣式撰寫到一個外部的CSS檔案中，然后通過link標簽來引入外部的CSS檔案，
優點：
- 樣式可以在不同頁面之間進行復用
- 將樣式撰寫到外部的CSS檔案中，可以使用到瀏覽器的快取機制，從而加快網頁的加載速度，提高用戶的體驗
1.2 CSS的基本語法
2. CSS選擇器
2.1 常用選擇器
2.1.1 元素選擇器
根據標簽名來選中指定的元素，語法為：標簽名{}，比如：p{}、h1{}、div{}等
2.1.2 id選擇器
根據元素的id屬性值選中一個元素，語法為：#id屬性值{}，比如：#box{} #red{}等
2.1.3 類選擇器
根據元素的class屬性值選中一組元素，語法為：.class屬性值，
類選擇器和id類似，不同的是class可以重復使用，可以通過class屬性來為元素分組，
可以同時為一個元素指定多個class屬性，
2.1.4 通配選擇器
選中頁面中的所有元素，語法為：*
2.2 復合選擇器
2.2.1 交集選擇器
同時復合多個條件的元素，語法為：選擇器1選擇器2選擇器3選擇器n{}，
注意點：
交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
2.2.2 并集選擇器
同時選擇多個選擇器對應的元素，語法：選擇器1,選擇器2,選擇器3,選擇器n{}
2.3 關系選擇器
2.3.1 后代選擇器
選中指定元素內的指定后代元素，語法：祖先 后代
2.3.2 子代關系選擇器
選中指定父元素的指定子元素，語法：父元素 > 子元素
2.3.3 鄰接兄弟
選擇同一個父類元素下一個兄弟，語法：前一個 + 下一個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div + span {
color: red;
}
</style>
</head>
<body>
<div></div>
<span> 我是div外的span </span>
</body>
</html>
2.3.4 通用兄弟
選擇下邊所有的兄弟，語法：兄 ~ 弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p ~ span {
color: red;
}
</style>
</head>
<body>
<div>
我是一個div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<div></div>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
</body>
</html>
2.4 屬性選擇器
2.4.1 [屬性名] 選擇含有指定屬性的元素
2.4.2 [屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
2.4.3 [屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
2.4.4 [屬性名$=屬性值] 選擇屬性值以指定值結尾的元素
2.4.5 [屬性名*=屬性值] 選擇屬性值中含有某值的元素的元素
2.5 偽類選擇器
偽類（即不存在的類，特殊的類），用來描述一個元素的特殊狀態，比如：第一個子元素、被點擊的元素、滑鼠移入的元素等，
一般情況下都是使用 : 開頭，
2.5.1 :first-child 第一個子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
ul > li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第〇個</li>
<li>第一個</li>
<li>第二個</li>
<li>第三個</li>
<li>第四個</li>
<li>第五個</li>
</ul>
</body>
</html>
2.5.2 :last-child 最后一個子元素
ul > li:last-child {
color: red;
}
2.5.3 :nth-child() 選中第n個子元素
2n+1 或 odd 表示選中奇數位的元素
ul > li:nth-child(odd) {
color: red;
}
2n 或 even 表示選中偶數位的元素
ul > li:nth-child(even) {
color: red;
}
n 第n個 n的范圍0到正無窮
ul > li:nth-child(n) {
color: red;
}
2.5.4 :not() 否定偽類
可以將符合條件的元素從選擇器中去除
ul > li:not(:nth-of-type(3)) {
color: yellowgreen;
}
以下幾個偽類的功能和上述的類似，不同點是以下偽類要在同型別元素中進行排序
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
:empty
2.6 a元素的偽類
2.6.1 :link 用來表示沒訪問過的鏈接（正常的鏈接）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:link {
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">沒訪問過的鏈接</a>
</body>
</html>
點擊后就會從藍色觸發成紅色，再跳轉
2.6.2:visited 用來表示訪問過的鏈接
由于隱私的原因，所以visited這個偽類只能修改鏈接的顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:visited {
color: orange;
font-size: 50px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">訪問過的鏈接</a>
</body>
</html>
2.6.3 :hover 用來表示滑鼠移入的狀態
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:hover {
color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">訪問過的鏈接</a>
</body>
</html>
2.6.4 :active 用來表示滑鼠點擊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:active {
color: yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">鏈接效果跟link一樣</a>
</body>
</html>
2.7 偽元素的選擇器
偽元素：
頁面中一些特殊的并不真實的存在的元素（即在特殊的位置指定顯示渲染效果），偽元素使用 :: 開頭
2.7.1 ::first-letter 表示第一個字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p::first-letter {
font-size: 50px;
}
</style>
</head>
<body>
<p>Lorem</p>
</body>
</html>
2.7.2 ::first-line 表示瀏覽器邊框下的第一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p::first-line {
background-color: yellow;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit
modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio.
Id odit consequatur mollitia excepturi, minus saepe nostrum vel
porro.
</p>
</body>
</html>
2.7.3 ::selection 表示選中的內容
<style>
p::selection {
background-color: greenyellow;
}
</style>
2.7.4 ::before 元素的開始插入內容
<style>
div::before {
content: '『';
}
</style>
2.7.5 ::after 元素的最后插入內容
div::after {
content: '』';
}
注意：
before 和 after 必須結合content屬性來使用
參考：
視頻（P28）：
尚硅谷Web前端零基礎入門HTML5+CSS3基礎教程丨初學者從入門到精通
關系選擇器 - 學習 Web 開發 | MDN
B站學友分享的原始碼
tip:
如果無法上github，可以使用dev-sidecar加速：https://blog.csdn.net/m0_51973551/article/details/120675918
gitee的暫未找到合適的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501112.html
標籤：Html/Css
上一篇：js專項之變數提升和函式提升題目