前端 CSS 樣式書寫與選擇器基礎知識

1.CSS介紹

CSS是Cascading Style Sheet的縮寫，中文意思為"層疊樣式表"，它是網頁的裝飾者，用來修飾各標簽排版(大小、邊距、背景、位置等)、改變字體的樣式(字體大小、字體顏色、對齊方式等)。

2.CSS書寫位置

2.1 樣式表特征

? ?層疊性:多組不同的css樣式可以共同作用于同一個元素
? ?繼承性:有些css樣式會自動從父元素傳給子元素 ?大部分文字樣式屬性都會被繼承
? ?優先級: 顯示哪個樣式,瀏覽器默認樣式和繼承下來的樣式優先級最低

2.2 行內樣式

借助了所有標簽都有的屬性style，為當前的元素添加樣式聲明。

<標簽名 style="樣式聲明">

CSS樣式聲明: 由CSS屬性和值組成

CSS屬性：希望給HTML標簽設置的樣式名字
值：使用值來控制某個屬性顯示的效果

style="css屬性名:值;css屬性名:值;"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 書寫位置:1.行內樣式/內聯樣式:通過style屬性直接寫在標簽中語法:<標簽名 style="樣式聲明">  樣式聲明:css屬性和屬性值組成--><p style="font-weight: bold;">學習前端</p><p style="color: red;">學習CSS</p></body>
</html>

?運行結果：

2.3?內嵌樣式

借助于style標簽，在HTML文檔中嵌入 CSS 樣式代碼，可以實現 CSS 樣式與HTML標簽之間的分離。同時需借助于CSS選擇器到HTML中匹配元素并應用樣式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* css代碼 */p{color: green;} div{font-size: 40px;}</style>
</head>
<body><!-- 2.內嵌樣式/內部樣式:通過style標簽來寫,style標簽放在head標簽中語法:<style>選擇器{css屬性名:值;css屬性名2:值;}</style>選擇器:選擇元素(標簽) --><p>學習前端</p><p>學習CSS</p><div>666</div></body>
</html>

?運行結果：

2.4 外鏈樣式表

創建外部樣式表文件后綴使用 .css ，在HTML文件中使用<link> 標簽引入外部樣式表?

<!-- rel：引入文件資源類型    href：引入文件資源的路徑  --><link rel="stylesheet" href="外部樣式表的地址">

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./outpre.css"> </head>
<body><!-- 書寫位置:3.外部樣式:新建一個樣式文件(后綴名為.css)引入樣式文件:link標簽(寫在head標簽中)rel:文件的類型href:css文件的路徑(相對路徑,和img標簽中的相對路徑同理)--><p>學習前端</p><p>學習CSS</p><div>666</div>
</body>
</html>

運行結果：

3.CSS簡單選擇器

3.1 標簽選擇器?

一個完整的HTML文檔由各式各樣的標簽組成，而標簽選擇器可以通過具體的標簽名稱來匹配文檔內所有同名的標簽。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: aqua;}div{color: red;}</style>
</head>
<body><!-- css選擇器:用了查找元素簡單選擇器:1.標簽選擇器:通過標簽名找到某個元素  可以選中頁面中的所有這個標簽名的元素語法:標簽名{屬性:值} --><p>p標簽</p><div>容器標簽</div></body>
</html>

運行結果：

3.2 類選擇器

?類選擇器可以根據標簽的 class 屬性，找到具體的HTML標簽。類選擇器的定義需要用到一個英文的句號‘.’，后面緊跟 class 屬性的值。

命名規范：

類名應該反映元素的用途或內容，而不僅僅是樣式。這有助于提高代碼的可讀性。
推薦使用連字符而不是駝峰命名法來分隔單詞，因為連字符在HTML和CSS中更為普遍。
類名不應以數字開頭。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text-box {font-size: 20px; /* 設置字體大小 */}.text-red {color: red; /* 設置文本顏色為紅色 */}.text-green {color: green; /* 設置文本顏色為綠色 */}</style></head>
<body>
<!-- css選擇器:用了查找元素2.class選擇器(類選擇):通過類名找到具體某個標簽語法:.類名{屬性:值}類名可以不唯一(可以重復),允許不同的標簽,使用相同的類名一個元素可以有多個類名,類名之間空格隔開--><div class="text-red">紅色</div><div class="text-green">綠色</div><div class="text-box text-red">紅色</div>
</body>
</html>

運行結果：

3.3?ID選擇器

ID選擇器用來找到HTML文檔中具有指定ID屬性的標簽，ID選擇器的定義需要用到井號#，后面緊跟ID 屬性的值。ID選擇器的使用方式和類選擇器的使用方式是非常像，但是ID選擇器的主要作用是結合js用于確定頁面上的唯一元素。單個標簽不允許擁有多個id名，同頁面中不存出現重復的id名(id重名會影響 js代碼獲取標簽)。并不是主要用來設置css的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#qq2{color: purple;font-size: 30px;}</style>
</head>
<body><!-- css選擇器:用了查找元素3.id選擇器:通過類名精準找到某個標簽,主要用來結合js確定頁面的唯一元素語法:.類名{語法:#id名{屬性:值}id名具有唯一性(不能重復),會影響js獲取代碼--><div id="qq2">帶有id的容器標簽</div><div>容器標簽</div>
</body>
</html>

3.4 通配符選擇器?

通配符選擇器用星號*表示，它不匹配某個特定的HTML元素，而是匹配 HTML文檔中的每個元素。我們通常使用通用選擇器來清除HTML元素中默認的內外邊距。通配符選擇器在開發中不會使用，一般我們頁面的標簽的樣式不會長的都完全一樣。在平常的練習去除標簽默認的 margin 和 padding 。

<style>* {margin: 0;padding: 0;}
</style>

4.CSS復雜選擇器

兩個或兩個以上的選擇器配合使用

4.1?交集選擇器

找到頁面中既能被選擇器1選中，又能被選擇器2選中的標簽，設置樣式
交集選擇器中的選擇器之間是緊挨著的，沒有東西分隔

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p.one{color: red;}</style>
</head>
<body><!-- 復雜選擇器1.組合選擇器(交集選擇器):兩個或者兩個以上的選擇器配合使用,兩個選擇器之間緊密相連語法:選擇器1選擇器2{}例如:p.one{}需求:只要學習兩個字改變顏色,但是不添加任何東西注意:標簽選擇器和類選擇器一起使用的時候,標簽在前,類在后 --><p class="one">學習</p><div><span class="one">認真學習</span><p>認真學習前端</p></div>
</body>
</html>

運行結果：

4.2?后代選擇器

在選擇器1所找到標簽的后代（后代包括：兒子、孫子、重孫子……）中，找到滿足選擇器2的標簽，設置樣式?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#one p {color: orange;}
</head>
<body><!-- 2.后代選擇器:選擇所有后代,選擇器之間空格隔開語法:選擇器1 選擇器2{屬性:值;
}找到選擇器1的所有后代(直接后代,間接后代),在這些后代中找到滿足選擇器2的標簽 --><div id="one"><p>111</p><p>333<span>222</span></p><div><p>666</p></div><span>444</span></div><div id="two">555</div>
</body></html>

運行結果：

4.3?子代選擇器

在選擇器1所找到標簽的子代（子代只包括：兒子）中，找到滿足選擇器2的標簽，設置樣式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>     #one>p {color: green;} </style>
</head><body><!-- 3.子代選擇器:選擇所有直接后代,選擇器之間>隔開語法:選擇器1>選擇器2{屬性:值;
}找到選擇器1的所有直接后代,在這些后代中找到滿足選擇器2的標簽 --><div id="one"><p>111</p><p>333<span>222</span></p><div><p>666</p></div><span>444</span></div><div id="two">555</div></body></html>

運行結果：

222?雖然不屬于子代，但由于繼承性仍會變色

4.4?相鄰兄弟選擇器

相鄰兄弟選擇器用于匹配某個元素之后緊鄰的另一個元素，這兩個元素擁有同一個父級元素并且不存在嵌套關系。相鄰兄弟選擇器的定義需要用到加號+，加號兩邊為相鄰的兩個元素，選擇器會匹配加號后面的元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    .three+p {color: green;}.four+p {color: red;}</head>
<body><!-- 4.相鄰兄弟選擇器:匹配某個元素后面緊鄰的元素,這兩個元素擁有同一個父級并且不存在嵌套關系語法:選擇器1+選擇器2{屬性:值;
} --><div id="one"><p class="three">111</p><p>222</p><p>555</p><p class="four">333</p><p>666<span>444</span></p></div></body></html>

運行結果：

4.5?通用兄弟選擇器

通用兄弟選擇器同樣會匹配同一父級元素下的兄弟元素，但兄弟元素之間無需緊鄰。定義通用兄弟選擇器需要用到波浪號~，波浪號兩邊為同一父級元素下的兩個元素，選擇器會匹配波浪號后面的元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.two~p {color: blue;margin: 0;}</style>
</head>
<body><!-- 5.通用(所有)兄弟選擇器:匹配某個元素后面的所有兄弟,兄弟不需要緊鄰,這些元素擁有同一個父級并且不存在嵌套關系語法:選擇器1~選擇器2{屬性:值;
} --><div id="one"><p>111</p><p class="two">222</p><div>333</div><p>444<span>555</span></p><span>666</span><p>777</p><div><p>888</p></div></div></body>
</html>

運行結果：

4.6?分組選擇器

結構：選擇器1,選擇器2 {css屬性名:屬性值;}
同時選擇多組標簽，設置相同的樣式
并集選擇器中的每組選擇器之間通過 , 分隔
選擇器中的每組選擇器通常一行寫一個，提高代碼的可讀性

  <style>p,h1,h2,h3,div,span {padding: 0;margin: 0;}</style>

5.層疊性與優先級

層疊性：所謂的層疊即疊加的意思，表示樣式可以一層一層的層疊覆蓋。多個選擇器給同一個標簽設置不同的樣式，會共同作用在標簽上。

優先級：如果同一個標簽被多個選擇器賦予了相同的屬性且值不一樣時，會按照選擇器的優先級來決定以哪個樣式為準

!important > 行內 > id選擇器 > 類選擇器 > 標簽 > 繼承
先比較級別，級別一樣比較各級別選擇器出現的次數
當兩個選擇器權重一樣時，以最后出現的為準

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#red{color: red;}p{color: green !important;font-size: 20px ;}.blue{color: blue;}</style>
</head>
<body><!-- 選擇器優先級:頁面通過選擇器查找元素時的速度來決定的,速度越快,優先級越高,以權重來表示各類選擇器的權重大小：通配符:0標簽:1類:10id:100行內:1000!important:10000選擇器權重越大,優先級越高復雜選擇器,選擇器權重是所有選擇器權重之和并集選擇器以每個選擇器單獨的權重為準,不進行相加強制提升優先級  !important寫在分號里面,和樣式屬性之間空格隔開!important > 行內 > id選擇器 > 類選擇器 > 標簽  > 繼承--><p id="red" class="blue" style="color: purple; font-size: 40px ;">我愛中國</p><div id="red" class="blue" style="color: purple; font-size: 20px;">I love china</div>
</body>
</html>

運行結果：