一尘喝、選擇器進階
目標：能夠理解復(fù)合選擇器的規(guī)則均唉，并使用復(fù)合選擇器在HTML中選擇元素
（一）復(fù)合選擇器
1.后代選擇器：空格
（1）作用：根據(jù)HTML標簽的嵌套關(guān)系寸谜，選擇父元素后代中滿足條件的元素
（2）選擇器語法：選擇器1 選擇器2{css}
（3）結(jié)果：在選擇器1所找到標簽的后代（兒子、孫子躺坟、重孫子...）中沦补，找到滿足選擇器2的標簽，設(shè)置樣式
（4）注意點：后代包括：兒子咪橙、孫子策彤、重孫子
后代選擇器中，選擇器與選擇器之間通過空格隔開
<style>
/* 找到div的兒子p設(shè)置文字顏色是紅色 */
/* 父選擇器 后代選擇器{} */
div p{
color: red;
}
</style>
</head>
<body>
<!-- 后代:兒子,孫子,重孫子 -->
<p>這是一個p標簽</p>
<div>
<p>這是div的兒子p</p>
</div>
</body>
2.子代選擇器：>
（1）作用：根據(jù)HTML標簽的嵌套關(guān)系匣摘，選擇父元素子代中滿足條件的元素
（2）選擇器語法：選擇器1>選擇器2{css}
（3）結(jié)果：在選擇器1所找到標簽子代（兒子）中店诗，找到滿足選擇器2的標簽，設(shè)置樣式
（4）注意點：
子代只包括兒子
子代選擇器中音榜，選擇器與選擇器之間通過>隔開
<style>
/* 空格隔開的是后代,兒子,孫子,重孫子 */
/* div a{
color: red;
} */
/* 只想選中兒子a */
/* div的兒子a顏色是紅色 */
div>a{
color: red;
}
</style>
</head>
<body>
<div>
父級
<a href="#">這是div里面的a</a>
<p>
<a href="#">這是div里面的p里面的a</a>
</p>
</div>
</body>
3.并集選擇器：,
（1）作用：同時選擇多組標簽庞瘸，設(shè)置相同的樣式
（2）選擇器語法：選擇器1，選擇器2{css}
（3）結(jié)果：找到選擇器1和選擇器2選中的標簽赠叼，設(shè)置樣式
（4）注意點：
<1>并集選擇器中的每組選擇器之間通過擦囊，分隔
<2>并集選擇器中的每組選擇器可以是基礎(chǔ)選擇器或者復(fù)合選擇器
<3>并集選擇器中的每組選擇器通常一行寫一個违霞，提高代碼的可讀性
<style>
/* p div span h1 文字顏色是紅色 */
/* 選擇器1,選擇器2{} */
p,
div,
span,
h1{
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
</body>
4、交集選擇器
（1）作用：選中頁面中同時滿足多個選擇器的標簽
（2）選擇器的語法：選擇器1選擇器2{css}
（3）結(jié)果：（既又原則）找到頁面中既能被選擇器1選中瞬场，又能被選擇器2選中的標簽买鸽，設(shè)置樣式
（4）注意點：
<1>交集選擇器中的選擇器之間是緊挨的，沒有東西分隔
<2>交集選擇器中如果有標簽選擇器贯被，標簽選擇器必須寫在最前面
5眼五、hover偽類選擇器
（1）作用：選中鼠標懸停在元素上的狀態(tài)，設(shè)置樣式
（2）選擇器語法：選擇器：hover{css}
（3）注意點：偽類選擇器選中的元素的某種狀態(tài)
<style>
a:hover{
color: red;
background-color: green;
}
div:hover{
color: red;
}
</style>
</head>
<body>
<a href="#">這是超鏈接</a>
<!-- 任何標簽都可以添加偽類彤灶，任何一個標簽都可以鼠標懸停 -->
<!-- 用戶鼠標懸停到div的時候看幼，文字是綠色 -->
<div>div</div>
</body>
6、emmet語法
（1）作用：通過簡寫語法幌陕，快速生成代碼
（2）語法：類似于剛剛學(xué)習(xí)的選擇器的寫法
| 記憶 | 示例 | 效果 |
|---|---|---|
| 標簽名 | div | <div></div> |
| 類選擇器 | .red | <div class="red"></div> |
| id選擇器 | #one | <div id="one"></div> |
| 交集選擇器 | p.red#one | <p class="red" id="one"></p> |
| 子代選擇器 | ul>li | <ul><li></li></ul> |
| 內(nèi)部文本 | ul>li{我是li的內(nèi)容} | <ul><li>我是li的內(nèi)容</li></ul> |
| 創(chuàng)建多個 | ul>li*3 | <ul><li></li><li></li><li></li></ul> |
<style>
div{
font-size: 12px;
/* 提示css屬性：單詞的首字母 */
font-weight: 700;
width: 20px;
/* 寬度300诵姜，高度200，背景色粉色 */
/* w300+h200+bgc */
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<h1></h1>
<!-- 生成div 帶類名 -->
<div class="box"></div>
<p class="box"></p>
<p id="box"></p>
<p class="red" id="id"></p>
<!-- div 同級 P -->
<div></div>
<p></p>
<!-- 父子級 -->
<div>
<p></p>
</div>
<ul>
<li></li>
</ul>
<!-- ul 有3個li *稱號 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul 有3個li搏熄， li里面有文字111 {文字}-->
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<!-- ul 有3個li, li里面有文字1棚唆，2，3 {$} ul>li{$}*3 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
二心例、背景相關(guān)屬性
目標：能夠使用背景相關(guān)屬性裝飾元素的背景樣式
1瑟俭、背景顏色
（1）屬性名：background-color(bgc)
（2）屬性值：顏色取值：關(guān)鍵字、rgb表示法契邀、rgba表示法摆寄、十六進制
（3）注意點：
<1>背景顏色默認值是透明：rgba(0,0,0,0)、transparent
<2>背景顏色不會影響盒子大小坯门，并且還能看清盒子的大小和位置微饥，一般的布局中會習(xí)慣先給盒子設(shè)置背景顏色
2、背景圖片
（1）屬性名：background-image（bgi）
（2）屬性值：background-image:url('圖片的路徑')古戴；
（3）注意點：
<1>背景圖片中url中可以省略引號
<2>背景圖片默認是在水平和垂直方向平鋪的
<3>背景圖片僅僅是指給盒子起到裝飾效果欠橘，類似于背景顏色，是不能撐開盒子的
background-image: url(../../cat.jpg);
3现恼、背景平鋪
（1）屬性名：background-repeat(bgr)
（2）屬性值：
| 取值 | 效果 |
|---|---|
| repeat | （默認值）水平和垂直方向平鋪 |
| no-repeat | 不平鋪 |
| repeat-x | 沿這水平方向（x軸）平鋪 |
| repeat-y | 沿著垂直方向（y軸）平鋪 |
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(../../rescours/day04/01-案例/images/1.jpg);
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
</style>
4肃续、背景位置
（1）屬性名：background-position(bgp)
（2）屬性值：background-position:水平方向位置 垂直方向位置；
屬性值：
<1>方向名詞（最多只能表示9個位置）：
水平方向：left叉袍、center始锚、right
垂直方向：top、center喳逛、bottom
<2>數(shù)字+px(坐標)：
坐標系：
a.原點（0瞧捌，0）盒子的左上角
b.x軸：水平向右
c.y軸：垂直向下
操作：將圖片左上角與坐標點重合即可
正數(shù)：向右向下移動；負數(shù)：向左向上移動
背景色和背景圖只顯示在盒子里面
（3）注意點：方向名詞取值和坐標取值可以混使用，第一個取值表示水平姐呐，第二個取值表示垂直
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(../../rescours/day04/01-案例/images/1.jpg);
background-repeat: no-repeat;
/* background-position: right bottom; */
/* background-position: 0 0; */
/* background-position:center; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
5殿怜、背景相關(guān)屬性的連寫形式
（1）屬性名：background(bg)
（2）屬性值：單個屬性值的合寫，取值之間以空格隔開
（3）書寫順序：推薦：background:color image repeat position（可以交換順序）
背景圖位置如果是英文單詞可以顛倒順序
背景圖位置如果是數(shù)值 不要顛倒順序
（4）省略問題：
a.可以按照需求省略
b.特殊情況：在pc端曙砂，如果盒子大小和背景圖片大小一樣头谜，此時可以直接寫background：ur()
（5）注意點：
如果需要設(shè)置單獨的樣式和連寫
<1>要么把單獨的樣式寫在連寫的下面
<2>要么把單獨的樣式寫在連寫的里面
<style>
div{
width: 400px;
height: 400px;
/* background: pink url(../../images/car.jpg) no-repeat center bottom; */
/* background: pink url(../../images/car.jpg) no-repeat bottom center; */
/* 背景圖位置如果是英文單詞可以顛倒順序 */
/* 測試背景圖位置如果是數(shù)值 不要顛倒順序*/
/* 水平50px 垂直100px */
/* background: pink url(../../images/car.jpg) no-repeat 50px 100px; */
background: pink url(../../images/car.jpg) no-repeat 100px 50px;
}
</style>
6、（拓展）img標簽和背景圖片的區(qū)別
需求：需要在網(wǎng)頁中展示一張圖片的效果
方法一：直接寫img標簽即可（重要的鸠澈、產(chǎn)品類的）
img標簽是一個標簽柱告，不設(shè)置寬高默認會以原尺寸顯示
方法二：div標簽+背景圖片（裝飾性的，讓網(wǎng)頁變漂亮）
需要設(shè)置div的寬高款侵，因為背景圖片只是裝飾的CSS樣式，不能撐開div標簽
三侧纯、元素顯示模式
目標：能夠認識三種常見的元素顯示模式新锈，并通過代碼實現(xiàn)不同元素顯示模式的轉(zhuǎn)換
1、塊級元素
（1）顯示特點：
a.獨占一行（一行只能顯示一個）
b.寬度默認是父元素的寬度眶熬，高度默認由內(nèi)容撐開
c.可以設(shè)置寬高
（2）代表標簽：div妹笆、h系列、ul娜氏、li拳缠、dl、dt贸弥、dd窟坐、form、header绵疲、nav哲鸳、footer......
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
</body>
2、行內(nèi)元素
（1）顯示特點：
a.一行可以顯示多個
b.寬度和高度默認由內(nèi)容撐開
c.不可以設(shè)置寬高
（2）代表標簽：a盔憨、span徙菠、b、u郁岩、i婿奔、s、strong问慎、ins萍摊、em、del......
<style>
/* 行內(nèi)：不換行如叼；設(shè)置寬高不生效记餐；尺寸和內(nèi)容的大小相同 */
span{
width: 300px;
height: 300px;
background-color:pink;
}
</style>
</head>
<body>
<span>span</span>
<span>span</span>
</body>
3、行內(nèi)塊元素
（1）顯示特點：
a.一行可以顯示多個
b.可以設(shè)置寬高
（2）代表標簽
- input薇正、textarea片酝、buttom囚衔、select......
- 特殊情況：img標簽有行內(nèi)塊元素特點，但是Chrome調(diào)試工具中顯示結(jié)果是inline
<style>
/* 行內(nèi)塊：一行顯示多個雕沿；加寬高生效 */
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="../../cat.jpg" alt="">
<img src="../../cat.jpg" alt="">
</body>
</html>
4练湿、元素顯示模式轉(zhuǎn)換
（1）目的：改變元素默認的顯示特點，讓元素符合布局要求
（2）語法：
| 屬性 | 效果 | 使用頻率 |
|---|---|---|
| display:block | 轉(zhuǎn)換成塊級元素 | 較多 |
| display:inline-block | 轉(zhuǎn)換成行內(nèi)塊元素 | 較多 |
| display:inline | 轉(zhuǎn)換成行內(nèi)元素 | 極少 |
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 行內(nèi)塊 */
/* display: inline-block; */
/* 行內(nèi) */
display: inline;
}
</style>
</head>
<body>
<div>111</div>
<div>222</div>
</body>
5审轮、拓展1：HTML嵌套規(guī)范注意點
（1）塊級元素一般作為大容器肥哎，可以嵌套：文本、塊級元素疾渣、行內(nèi)元素篡诽、行內(nèi)塊元素等等
但是：p標簽中不要嵌套div、p榴捡、h等塊級元素
p和h不能相互嵌套
（2）a標簽內(nèi)部可以嵌套任意元素
但是：a標簽不能嵌套a標簽
錯誤代碼示范：
<body>
<!-- p 和 h標題 不能相互嵌套 -->
<p>
<h1>一級標題</h1>
</p>
<!-- p里面不能包含div -->
<p>
<div>div</div>
</p>
</body>
四杈女、CSS特性
目標：能夠認識CSS的繼承和層疊特性
1、繼承性的介紹
（1）特性：子元素有默認繼承元素樣式的特點（子承父業(yè)）
（2）可以繼承的常見屬性（文字控制屬性都可以繼承 控制標簽本身的都不能繼承）
1.color
2吊圾、font-style达椰、font-weight、font-size项乒、font-family
3啰劲、text-indent、text-align
4檀何、line-height
5蝇裤、......
（3）注意點：可以通過調(diào)試工具判斷是否可以繼承
如果元素有瀏覽器默認樣式，此時繼承性依然存在频鉴，但是優(yōu)先顯示瀏覽器的默認樣式
（4）（拓展）繼承失效的特殊情況
我沒有就繼承猖辫，我有就按我自己的
<1>a標簽的color會繼承失效
其實color屬性繼承下來了，但是被瀏覽器默認設(shè)置的樣式給覆蓋掉了
<2>h系列標簽的font-size會繼承失效
其實font-size屬性繼承下來了砚殿，但是被瀏覽器默認設(shè)置的樣式給覆蓋掉了
2啃憎、層疊性的介紹
（1）特性：
- 給同一個標簽設(shè)置不同的樣式 → 此時樣式會層疊疊加 → 會共同作用在標簽上
- 給同一個標簽設(shè)置相同的樣式 → 此時樣式會層疊覆蓋 → 最終寫在最后的樣式會生效
（2）注意點： - 當(dāng)樣式?jīng)_突時，只有當(dāng)選擇器優(yōu)先級相同時似炎，才能通過層疊性判斷結(jié)果
<style>
div{
color: red;
color: green;
}
.box{
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
運行結(jié)果：
ps:選多行加內(nèi)容刪除：alt+shift+鼠標左鍵單擊
五辛萍、綜合案例
綜合案例1 普通導(dǎo)航-效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a顯示模式是行內(nèi)，加寬高默認不生效羡藐，轉(zhuǎn)顯示模式：行內(nèi)塊 */
a{
width: 100px;
height: 50px;
background-color: red;
color: white;
text-decoration: none;
display: inline-block;
text-align: center;
line-height: 50px;
}
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<!-- a{導(dǎo)航$}*5 -->
<!-- 選中多行加內(nèi)容刪除：alt+shift+鼠標左鍵單擊 -->
<a href="#">導(dǎo)航1</a>
<a href="#">導(dǎo)航2</a>
<a href="#">導(dǎo)航3</a>
<a href="#">導(dǎo)航4</a>
<a href="#">導(dǎo)航5</a>
</body>
</html>
鼠標選中懸停時：
綜合案例2 五彩導(dǎo)航-效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a{
text-decoration: none;
width: 120px;
height: 58px;
background-color: pink;
display: inline-block;
text-align: center;
line-height: 50px;
color: white;
}
/* 每個a的背景圖不同贩毕，單獨找到每個a,設(shè)置不同的背景圖片 */
.one{
background-image: url(../../rescours/day04/01-案例/images/bg1.png);
}
.two{
background-image: url(../../rescours/day04/01-案例/images/bg2.png);
}
.three{
background-image: url(../../rescours/day04/01-案例/images/bg3.png);
}
.four{
background-image: url(../../rescours/day04/01-案例/images/bg4.png);
}
.one:hover{
background-image: url(../../rescours/day04/01-案例/images/bg5.png);
}
.two:hover{
background-image: url(../../rescours/day04/01-案例/images/bg6.png);
}
.three:hover{
background-image: url(../../rescours/day04/01-案例/images/bg7.png);
}
.four:hover{
background-image: url(../../rescours/day04/01-案例/images/bg8.png);
}
</style>
</head>
<body>
<a href="#" class="one">五彩導(dǎo)航</a>
<a href="#" class="two">五彩導(dǎo)航</a>
<a href="#" class="three">五彩導(dǎo)航</a>
<a href="#" class="four">五彩導(dǎo)航</a>
</body>
</html>
鼠標懸停時：
