備注：部分選擇器見02 教程
## 1、子元素選擇器
? ? 子元素選擇器只能選擇作為某元素子元素的元素，其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接， 注意符號(hào)左右 兩側(cè)各保留一個(gè)空格
```
? ? .box > span{
color:? red;
font-size: 100px;
}
<div class="box">
<p>
<span>前端開發(fā)教學(xué)</span>
</p>
<span>前端開發(fā)教學(xué)第三天</span>
<!--
p 和 span 是同級(jí)標(biāo)簽
前端開發(fā)教學(xué)第三天 生效了 子代選擇器，選擇的元素的親兒子
-->
</div>
```
## 2、并集選擇器
并集選擇器，是哥哥選擇器通過，逗號(hào) 連接而成，任何形式的選擇器包括標(biāo)簽選擇器，class類選擇器 id 選擇器，都可以作為并集選擇器的一部分
.box,p,h2{
color: red;
font-size:20px;
}
<div class="box">并集選擇器2</div>
<p>并集選擇器2</p>
<h2>并集選擇器3</h2>
并集選擇器 和的意思，就是說只要逗號(hào)隔開，所有選擇器都會(huì)執(zhí)行后面樣式
## 3、鏈接偽類選擇器
鏈接偽類選擇器 (內(nèi)置類)
：link? 未訪問的鏈接
：visited 已訪問的鏈接
: hover 鼠標(biāo)移動(dòng)到鏈接上
：active 選定的鏈接 超鏈接激活的狀態(tài)
```
他們的書寫順序 一定要是 lvha? 不要顛倒順序
實(shí)際開發(fā) hover 最多
<style type="text/css">
a:link{
color: pink;
text-decoration: none;
}
a:visited{
color: orange;
}
a:hover{
color: red;
text-decoration: underline;
}
a:active{
color: blue;
}
</style>
<a href="#">人生如夢</a>
```
## 標(biāo)簽顯示模式 （display ）
1、塊元素? block-level
## 塊元素會(huì)獨(dú)占一行或者多行，可以對(duì)其設(shè)置寬高對(duì)其等屬性，常用于網(wǎng)頁結(jié)構(gòu)的搭建
常見的塊元素有 <h1> -<h6> <p> <div> <ul> <li>等
塊元素特點(diǎn)：
1、總數(shù)從新行開始
2、高度，行高，外邊距，以及內(nèi)邊距都可以控制
3、寬度默認(rèn)是容器的100%；
4、可以容納內(nèi)斂元素和其他塊元素
5、是一個(gè)容器的盒子，里面可以放行內(nèi)塊或者塊級(jí)元素
6、獨(dú)占一行很重要 **
## 7、沒有設(shè)置寬度，會(huì)默認(rèn)父元素的寬度
? ? ? ? 8、可以設(shè)置寬高，內(nèi)容也會(huì)撐開高度
2、行內(nèi)塊 inline-level
? ? 1、內(nèi)聯(lián)元素，不沾油獨(dú)立的區(qū)域，僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度，高度，對(duì)齊等屬性，常用于控制頁面中文本的樣式
? ? <a> <strong>? <span>
? ? 行內(nèi)元素特點(diǎn)：
? ? ? 1、在一行上顯示
? ? ? ? ? 2、不能直接設(shè)置寬高，寬高是內(nèi)容撐開的
? ? ? ? ? 3、不能設(shè)置對(duì)齊，常用于控制文本
3、行內(nèi)塊元素 inline-block
? ? 1、行內(nèi)塊? img? ? input? td? 可以對(duì)他們?cè)O(shè)置寬高，和對(duì)齊屬性，
? ? 行內(nèi)快的特點(diǎn)：
1、和相鄰的行內(nèi)塊元素在一行上，但是之間會(huì)有空白縫隙
2、默認(rèn)寬度就是它本身內(nèi)容的寬度
3、高度，行高 ，外邊距以及內(nèi)邊距都可以控制
4、可以在一行上顯示
? ? ? ? ? ? 5、可以設(shè)置寬高
## 三種模式區(qū)別：
元素模式
元素排列 設(shè)置樣式 默認(rèn)寬度 包含
1、塊元素 一行只能放一個(gè)塊元素 可以設(shè)置寬度高度 容器的100% 容器級(jí)可以包含任何標(biāo)簽
2、行內(nèi)元素 一行可以放多個(gè)行內(nèi)元素 不可以直接設(shè)置寬度高度 它本身內(nèi)容的寬度 容納文本或則其他行內(nèi)元素
3、行內(nèi)塊元素 一行放多個(gè)行內(nèi)塊 元素 可以設(shè)置寬度和高度 它本身內(nèi)容的寬度
## 標(biāo)簽顯示模式轉(zhuǎn)換 display? 重點(diǎn)
? ? 三種類型可以相互轉(zhuǎn)換
塊元素轉(zhuǎn)行內(nèi) ： display： inline
行內(nèi)轉(zhuǎn)塊 ：? display ： block；
塊、行內(nèi)元素轉(zhuǎn)為行內(nèi)塊： display：inline-block；
## 讓我們現(xiàn)在來一個(gè)小練習(xí)吧：
1. 寫 三個(gè) div? 給定 100 * 100 的紅色盒子? ? --? 寬度 高度? 背景色
2. 三個(gè) span? 也要求? 150 * 150 綠色盒子
3. 三個(gè)? a 鏈接? 80 * 20? 藍(lán)色 盒子? 要求 必須一行顯示 這三個(gè)盒子
4. 鼠標(biāo)經(jīng)過3個(gè)a鏈接的時(shí)候， 背景顏色變?yōu)? 橙色?
如果自己寫不出來可以參照我的寫法，代碼就得寫加上練習(xí)與檢測
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height:100px;
background-color: red;
}
span{
width: 150px;
height: 150px;
background-color: green;
/*display: block;*/
display:inline-block;
}
a{
width: 80px;
height: 20px;
display: inline-block;
background-color: blue;
}
a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
1111111111111
<br>
<span></span>
<span></span>
<span></span>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</body>
</html>
```
## ** 行高? 那些事? 重點(diǎn)
瀏覽器默認(rèn)文字是 16
行高的默認(rèn)值? 約等于 1.1-1.3? ? ? line-height:normal? ?
### 不想要行高 line-height:1; 謹(jǐn)記 要是不等于1 哪怕 normal 也不好使
行高的標(biāo)準(zhǔn)定義是基線與基線之間的距離? 可以在ps 中看見 看我下圖
行高分為 四塊? 頂線 中線? 基線? ? 底線
行高我們利用最多的一個(gè)地方是，可以讓一行文本在盒子中垂直居中對(duì)齊，
#### 一行文字行高與容器高度一致的時(shí)候，這行文字垂直居中
上下距離總是相等的，因此文字看上去是垂直居中的
如果行高等于 height? 高度 文字會(huì)垂直居中
如果行高大于高度 文字會(huì)偏下
如果行高小于高度 文字會(huì)偏上
## C33層疊性
當(dāng)多個(gè) 選擇器 作用于一個(gè)標(biāo)簽上會(huì)發(fā)生樣式?jīng)_突，誰距離標(biāo)簽更近 會(huì)使用誰
層疊性是瀏覽器處理沖突的一個(gè)能力，如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一屬性就會(huì)將另外一個(gè)屬性層疊掉，樣式?jīng)_突，遵循的原則是就近原則，那個(gè)樣式離著結(jié)果近，就執(zhí)行那個(gè)樣式，樣式不沖突，不會(huì)出現(xiàn)層疊
## 繼承性
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
color: red;
font-size: 100px;
font-style: italic;
font-weight: 800;
font-family: 'simsun';
text-indent: 2em;
text-decoration: underline;
text-align:right;
line-height: 150px;
}
</style>
</head>
<body>
<div class="father">
<p>繼承性</p>
</div>
</body>
</html>
```
a 標(biāo)簽 不會(huì)繼承父元素的文字顏色
H1 標(biāo)題標(biāo)簽 不會(huì)繼承父元素的大小
繼承都是來自于瀏覽器? ####? user agent stylesheet
## 優(yōu)先級(jí)權(quán)重計(jì)算
權(quán)重計(jì)算器公式 ? ? ? ? ? ? 計(jì)算權(quán)重公式
繼承或者 * 通配符 * 0,0,0,0
每個(gè)元素標(biāo)簽選擇器 ? ? ? ? 0,0,0,1
每個(gè)類，偽類 0,0,1,0
每個(gè)ID 0,1,0,1
每個(gè)行內(nèi)樣式style=‘’ ? ? ? ? 1,0,0,0
每個(gè)? ！important 重要 ? ? ? ? 無窮大
當(dāng)多個(gè)養(yǎng)生作用于同一個(gè)標(biāo)簽的時(shí)候，發(fā)生了樣式?jīng)_突權(quán)重高的樣式優(yōu)先執(zhí)行，當(dāng)權(quán)重一樣的時(shí)候，就近原則~! 我想靜靜 手記 轉(zhuǎn)載需備注！
默認(rèn)樣式 < 標(biāo)簽選擇器< 類選擇器<id 選擇器 <行內(nèi)樣式 < !important? 謹(jǐn)記 要帶上嘆號(hào)
繼承的權(quán)重為0
? ? 權(quán)重是可以疊加的
div ul li? ? ? ? ? ? 0,0,0,3
? ? .nav? ul li 00,1,2
a:hover 0,0,1,1
.nav a 0,0,1,1
#nav p 0,1,0,1
## Css 背景 background
background-color ：transparent;? 背景顏色透明?
background-image ：url() 背景圖片地址
background-position： top bottom center left right 背景位置. 可以寫 像素 10px? 100px? 10是距離左面? 100 是上面
background-repeat：no-repeat 背景是否平鋪
background-attachement:scroll? 背景固定還是滾動(dòng)? fixed 固定 一共兩個(gè)值
#### 背景定位
background-position： 20px;
寫2個(gè)方位值，沒有順序要求
寫一個(gè)方位值或者數(shù)值，另外一個(gè)值默認(rèn)center 寫 2個(gè)數(shù)值，第一個(gè)數(shù)值 是距離左邊的距離，第二個(gè)數(shù)值是距離頂邊的距離
## 背景屬性連寫 重要
background:#ccc? url() no-repeat? 50px? 100px scroll;
