備注：部分選擇器見02 教程
## 1畏吓、子元素選擇器
? ? 子元素選擇器只能選擇作為某元素子元素的元素蓉冈，其寫法就是把父級標(biāo)簽寫在前面不皆，子級標(biāo)簽寫在后面迟郎，中間跟一個 > 進行連接源葫， 注意符號左右 兩側(cè)各保留一個空格
```
? ? .box > span{
color:? red;
font-size: 100px;
}
<div class="box">
<p>
<span>前端開發(fā)教學(xué)</span>
</p>
<span>前端開發(fā)教學(xué)第三天</span>
<!--
p 和 span 是同級標(biāo)簽
前端開發(fā)教學(xué)第三天 生效了 子代選擇器些膨，選擇的元素的親兒子
-->
</div>
```
## 2湖笨、并集選擇器
并集選擇器黄刚，是哥哥選擇器通過，逗號 連接而成诫尽，任何形式的選擇器包括標(biāo)簽選擇器涂邀，class類選擇器 id 選擇器，都可以作為并集選擇器的一部分
.box,p,h2{
color: red;
font-size:20px;
}
<div class="box">并集選擇器2</div>
<p>并集選擇器2</p>
<h2>并集選擇器3</h2>
并集選擇器 和的意思箱锐，就是說只要逗號隔開比勉，所有選擇器都會執(zhí)行后面樣式
## 3、鏈接偽類選擇器
鏈接偽類選擇器 (內(nèi)置類)
：link? 未訪問的鏈接
：visited 已訪問的鏈接
: hover 鼠標(biāo)移動到鏈接上
：active 選定的鏈接 超鏈接激活的狀態(tài)
```
他們的書寫順序 一定要是 lvha? 不要顛倒順序
實際開發(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
## 塊元素會獨占一行或者多行浩聋，可以對其設(shè)置寬高對其等屬性，常用于網(wǎng)頁結(jié)構(gòu)的搭建
常見的塊元素有 <h1> -<h6> <p> <div> <ul> <li>等
塊元素特點：
1臊恋、總數(shù)從新行開始
2衣洁、高度，行高抖仅，外邊距坊夫，以及內(nèi)邊距都可以控制
3、寬度默認(rèn)是容器的100%撤卢；
4环凿、可以容納內(nèi)斂元素和其他塊元素
5、是一個容器的盒子放吩，里面可以放行內(nèi)塊或者塊級元素
6智听、獨占一行很重要 **
## 7、沒有設(shè)置寬度渡紫，會默認(rèn)父元素的寬度
? ? ? ? 8到推、可以設(shè)置寬高，內(nèi)容也會撐開高度
2惕澎、行內(nèi)塊 inline-level
? ? 1莉测、內(nèi)聯(lián)元素，不沾油獨立的區(qū)域唧喉，僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)捣卤，一般不可以設(shè)置寬度，高度欣喧，對齊等屬性腌零，常用于控制頁面中文本的樣式
? ? <a> <strong>? <span>
? ? 行內(nèi)元素特點：
? ? ? 1梯找、在一行上顯示
? ? ? ? ? 2唆阿、不能直接設(shè)置寬高，寬高是內(nèi)容撐開的
? ? ? ? ? 3锈锤、不能設(shè)置對齊驯鳖，常用于控制文本
3闲询、行內(nèi)塊元素 inline-block
? ? 1、行內(nèi)塊? img? ? input? td? 可以對他們設(shè)置寬高浅辙，和對齊屬性扭弧，
? ? 行內(nèi)快的特點：
1、和相鄰的行內(nèi)塊元素在一行上记舆，但是之間會有空白縫隙
2鸽捻、默認(rèn)寬度就是它本身內(nèi)容的寬度
3、高度泽腮，行高 御蒲，外邊距以及內(nèi)邊距都可以控制
4、可以在一行上顯示
? ? ? ? ? ? 5诊赊、可以設(shè)置寬高
## 三種模式區(qū)別：
元素模式
元素排列 設(shè)置樣式 默認(rèn)寬度 包含
1厚满、塊元素 一行只能放一個塊元素 可以設(shè)置寬度高度 容器的100% 容器級可以包含任何標(biāo)簽
2、行內(nèi)元素 一行可以放多個行內(nèi)元素 不可以直接設(shè)置寬度高度 它本身內(nèi)容的寬度 容納文本或則其他行內(nèi)元素
3碧磅、行內(nèi)塊元素 一行放多個行內(nèi)塊 元素 可以設(shè)置寬度和高度 它本身內(nèi)容的寬度
## 標(biāo)簽顯示模式轉(zhuǎn)換 display? 重點
? ? 三種類型可以相互轉(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)在來一個小練習(xí)吧：
1. 寫 三個 div? 給定 100 * 100 的紅色盒子? ? --? 寬度 高度? 背景色
2. 三個 span? 也要求? 150 * 150 綠色盒子
3. 三個? a 鏈接? 80 * 20? 藍色 盒子? 要求 必須一行顯示 這三個盒子
4. 鼠標(biāo)經(jīng)過3個a鏈接的時候丰榴， 背景顏色變?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>
```
## ** 行高? 那些事? 重點
瀏覽器默認(rèn)文字是 16
行高的默認(rèn)值? 約等于 1.1-1.3? ? ? line-height:normal? ?
### 不想要行高 line-height:1; 謹(jǐn)記 要是不等于1 哪怕 normal 也不好使
行高的標(biāo)準(zhǔn)定義是基線與基線之間的距離? 可以在ps 中看見 看我下圖
行高分為 四塊? 頂線 中線? 基線? ? 底線
行高我們利用最多的一個地方是秆撮，可以讓一行文本在盒子中垂直居中對齊多艇，
#### 一行文字行高與容器高度一致的時候，這行文字垂直居中
上下距離總是相等的像吻，因此文字看上去是垂直居中的
如果行高等于 height? 高度 文字會垂直居中
如果行高大于高度 文字會偏下
如果行高小于高度 文字會偏上
## C33層疊性
當(dāng)多個 選擇器 作用于一個標(biāo)簽上會發(fā)生樣式?jīng)_突峻黍，誰距離標(biāo)簽更近 會使用誰
層疊性是瀏覽器處理沖突的一個能力，如果一個屬性通過兩個相同選擇器設(shè)置到同一個元素上拨匆，那么這個時候一屬性就會將另外一個屬性層疊掉姆涩，樣式?jīng)_突，遵循的原則是就近原則惭每，那個樣式離著結(jié)果近骨饿，就執(zhí)行那個樣式，樣式不沖突台腥，不會出現(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)簽 不會繼承父元素的文字顏色
H1 標(biāo)題標(biāo)簽 不會繼承父元素的大小
繼承都是來自于瀏覽器? ####? user agent stylesheet
## 優(yōu)先級權(quán)重計算
權(quán)重計算器公式 ? ? ? ? ? ? 計算權(quán)重公式
繼承或者 * 通配符 * 0,0,0,0
每個元素標(biāo)簽選擇器 ? ? ? ? 0,0,0,1
每個類宏赘，偽類 0,0,1,0
每個ID 0,1,0,1
每個行內(nèi)樣式style=‘’ ? ? ? ? 1,0,0,0
每個? ！important 重要 ? ? ? ? 無窮大
當(dāng)多個養(yǎng)生作用于同一個標(biāo)簽的時候黎侈，發(fā)生了樣式?jīng)_突權(quán)重高的樣式優(yōu)先執(zhí)行察署，當(dāng)權(quán)重一樣的時候，就近原則~! 我想靜靜 手記 轉(zhuǎn)載需備注峻汉！
默認(rèn)樣式 < 標(biāo)簽選擇器< 類選擇器<id 選擇器 <行內(nèi)樣式 < !important? 謹(jǐn)記 要帶上嘆號
繼承的權(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? 背景固定還是滾動? fixed 固定 一共兩個值
#### 背景定位
background-position： 20px;
寫2個方位值贴汪，沒有順序要求
寫一個方位值或者數(shù)值脐往，另外一個值默認(rèn)center 寫 2個數(shù)值扳埂，第一個數(shù)值 是距離左邊的距離业簿，第二個數(shù)值是距離頂邊的距離
## 背景屬性連寫 重要
background:#ccc? url() no-repeat? 50px? 100px scroll;
