day04-CSS進階

目標：掌握復合選擇器作用和寫法；使用background屬性添加背景效果

01-復合選擇器

定義：由兩個或多個基礎選擇器，通過不同的方式組合而成。

作用：更準確、更高效的選擇目標元素（標簽）。

后代選擇器

后代選擇器：選中某元素的后代元素。

選擇器寫法：父選擇器子選擇器 { CSS 屬性}，父子選擇器之間用空格隔開。

<style>div span {color: red;}
</style>
<span> span 標簽</span>
<div><span>這是 div 的兒子 span</span >
</div>

子代選擇器

子代選擇器：選中某元素的子代元素（最近的子級）。

選擇器寫法：父選擇器 > 子選擇器 { CSS 屬性}，父子選擇器之間用 > 隔開。

<style>div > span {color: red;}
</style><div><span>這是 div 里面的 span</span><p><span>這是 div 里面的 p 里面的 span</span></p>
</div>

并集選擇器

并集選擇器：選中多組標簽設置相同的樣式。

選擇器寫法：選擇器1, 選擇器2, …, 選擇器N { CSS 屬性}，選擇器之間用 , 隔開。

<style>div,p,span {color: red;}
</style><div> div 標簽</div>
<p>p 標簽</p>
<span>span 標簽</span>

交集選擇器

交集選擇器：選中同時滿足多個條件的元素。

選擇器寫法：選擇器1選擇器2 { CSS 屬性}，選擇器之間連寫，沒有任何符號。

<style>p.box {color: red;
}
</style><p class="box">p 標簽，使用了類選擇器 box</p>
<p>p 標簽</p>
<div class="box">div 標簽，使用了類選擇器 box</div>

注意：如果交集選擇器中有標簽選擇器，標簽選擇器必須書寫在最前面。

偽類選擇器

偽類選擇器：偽類表示元素狀態，選中元素的某個狀態設置樣式。

鼠標懸停狀態：選擇器:hover { CSS 屬性 }

<style>a:hover {color: red;}.box:hover {color: green;}
</style><a href="#">a 標簽</a>
<div class="box">div 標簽</div>

超鏈接偽類

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jxAmbbLh-1691943895400)(assets/1680319272736.png)]

提示：如果要給超鏈接設置以上四個狀態，需要按 LVHA 的順序書寫。

經驗：工作中，一個 a 標簽選擇器設置超鏈接的樣式， hover狀態特殊設置

a {color: red;
}a:hover {color: green;
}

02-CSS特性

CSS特性：化簡代碼 / 定位問題，并解決問題

繼承性
層疊性
優先級

繼承性

繼承性：子級默認繼承父級的文字控制屬性。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Yle0Z6hX-1691943895401)(assets/1680319376438.png)]

注意：如果標簽有默認文字樣式會繼承失敗。例如：a 標簽的顏色、標題的字體大小。

層疊性

特點：

相同的屬性會覆蓋：后面的 CSS 屬性覆蓋前面的 CSS 屬性
不同的屬性會疊加：不同的 CSS 屬性都生效

<style>div {color: red;font-weight: 700;}div {color: green;font-size: 30px;}
</style><div>div 標簽</div>

注意：選擇器類型相同則遵循層疊性，否則按選擇器優先級判斷。

優先級

優先級：也叫權重，當一個標簽使用了多種選擇器時，基于不同種類的選擇器的匹配規則。

<style>div {color: red;}.box {color: green;}
</style><div class="box">div 標簽</div>

基礎選擇器

規則：選擇器優先級高的樣式生效。

公式：通配符選擇器 < 標簽選擇器 < 類選擇器 < id選擇器 < 行內樣式 < !important

? （選中標簽的范圍越大，優先級越低）

復合選擇器-疊加

疊加計算：如果是復合選擇器，則需要權重疊加計算。

公式：（每一級之間不存在進位）

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eOi1CaxO-1691943895402)(assets/1680319646205.png)]

規則：

從左向右依次比較選個數，同一級個數多的優先級高，如果個數相同，則向后比較
!important 權重最高
繼承權重最低

03-Emmet 寫法

Emmet寫法：代碼的簡寫方式，輸入縮寫 VS Code 會自動生成對應的代碼。

HTML標簽

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-5YMiGsdT-1691943895403)(assets/1680319897697.png)]

CSS：大多數簡寫方式為屬性單詞的首字母

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wvYPuOvL-1691943895404)(assets/1680319926111.png)]

04-背景屬性

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KzR67gYT-1691943895404)(assets/1680319971861.png)]

背景圖

網頁中，使用背景圖實現裝飾性的圖片效果。

屬性名：background-image（bgi）
屬性值：url(背景圖 URL)

div {width: 400px;height: 400px;background-image: url(./images/1.png);
}

提示：背景圖默認有平鋪（復制）效果。

平鋪方式

屬性名：background-repeat（bgr）

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dMghK1tv-1691943895405)(assets/1680320072292.png)]

div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;
}

背景圖位置

屬性名：background-position（bgp）

屬性值：水平方向位置垂直方向位置

關鍵字

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KZNtxI14-1691943895406)(assets/1680320211424.png)]

坐標
- 水平：正數向右；負數向左
- 垂直：正數向下；負數向上

div {width: 400px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-position: center bottom;background-position: 50px -100px;background-position: 50px center;
}

提示：

關鍵字取值方式寫法，可以顛倒取值順序
可以只寫一個關鍵字，另一個方向默認為居中；數字只寫一個值表示水平方向，垂直方向為居中

背景圖縮放

作用：設置背景圖大小

屬性名：background-size（bgz）

常用屬性值：

關鍵字
- cover：等比例縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見
- contain：等比例縮放背景圖片以完全裝入背景區，可能背景區部分空白
百分比：根據盒子尺寸計算圖片大小
數字 + 單位（例如：px）

div {width: 500px;height: 400px;background-color: pink;background-image: url(./images/1.png);background-repeat: no-repeat;background-size: cover;background-size: contain;
}

提示：工作中，圖片比例與盒子比例相同，使用 cover 或 contain 縮放背景圖效果相同。

背景圖固定

作用：背景不會隨著元素的內容滾動。

屬性名：background-attachment（bga）

屬性值：fixed

body {background-image: url(./images/bg.jpg);background-repeat: no-repeat;background-attachment: fixed;
}

背景復合屬性

屬性名：background（bg）

屬性值：背景色背景圖背景圖平鋪方式背景圖位置/背景圖縮放背景圖固定（空格隔開各個屬性值，不區分順序）

div {width: 400px;height: 400px;background: pink url(./images/1.png) no-repeat right center/cover;
}

05-顯示模式

顯示模式：標簽（元素）的顯示方式。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-w2zrCgAR-1691943895407)(assets/1680320464551.png)]

作用：布局網頁的時候，根據標簽的顯示模式選擇合適的標簽擺放內容。

塊級元素

特點：

獨占一行
寬度默認是父級的100%
添加寬高屬性生效

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0eogXLh5-1691943895407)(assets/1680320578369.png)]

行內元素

特點：

一行可以顯示多個
設置寬高屬性不生效
寬高尺寸由內容撐開

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-i8M5j5qx-1691943895408)(assets/1680320583985.png)]

行內塊元素

特點：

一行可以顯示多個
設置寬高屬性生效
寬高尺寸也可以由內容撐開

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8UDhWnAV-1691943895408)(assets/1680320590005.png)]

轉換顯示模式

屬性：display

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9Q26ONbn-1691943895409)(assets/1680320613034.png)]

06-綜合案例一-熱詞

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Ufyf5ZJI-1691943895409)(assets/1680320664821.png)]

HTML標簽

<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>

CSS樣式

<style>
/* 默認效果 */
a {
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}/* 鼠標懸停的效果 */
a:hover {
background-color: #608dd9;
}
</style>

07-綜合案例二 – banner 效果

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wzkxjxVQ-1691943895410)(assets/1680320758496.png)]

HTML標簽

<div class="banner"><h2>讓創造產生價值</h2><p>我們希望小游戲平臺可以提供無限的可能性，讓每一個創作者都可以將他們的才華和創意傳遞給用戶。</p><a href="#">我要報名</a>
</div>

CSS樣式

<style>.banner {height: 500px;background-color: #f3f3f4;background-image: url(./images/bk.png);background-repeat: no-repeat;background-position: left bottom;/* 文字控制屬性，繼承給子級 */text-align: right;color: #333;}.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}.banner p {font-size: 20px;}.banner a {width: 125px;height: 40px;background-color: #f06b1f;display: inline-block;/* 轉塊級無法右對齊，因為塊元素獨占一行 *//* display: block; */text-align: center;line-height: 40px;color: #fff;text-decoration: none;font-size: 20px;}
</style>