<meta charset="utf-8">
color:文本顏色
text-align:文本水平對(duì)齊方式
line-height:行間距
text-indent:首行縮進(jìn)
text-decoration 文本的裝飾
CSS復(fù)合選擇器
- 復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器造虎，通過(guò)不同的方式組合而成的
1、后代選擇器（重點(diǎn)）
- 后代選擇器又稱為包含選擇器
- 用來(lái)選擇元素或元素組的子孫后代
父級(jí) 子級(jí){屬性:屬性值;屬性:屬性值;}
- 當(dāng)標(biāo)簽發(fā)生嵌套時(shí)聊训，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代敬肚。
- 子孫后代都可以這么選擇讨跟。 或者說(shuō)告匠，它能選擇任何包含在內(nèi) 的標(biāo)簽盖淡。
2趣苏、子元素選擇器
子元素選擇器只能選擇作為某元素子元素(親兒子)的元素狡相。
寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面食磕，中間跟一個(gè) > 進(jìn)行連接
3尽棕、交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點(diǎn)彬伦，也有標(biāo)簽二的特點(diǎn)滔悉。
其中第一個(gè)為標(biāo)簽選擇器伊诵，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格回官，如h3.special
4曹宴、并集選擇器（重點(diǎn)）
如果某些選擇器定義的相同樣式，就可以利用并集選擇器歉提，可以讓代碼更簡(jiǎn)潔笛坦。
-
-并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過(guò)
,連接而成的，通常用于集體聲明苔巨。image 任何形式的選擇器（包括標(biāo)簽選擇器版扩、class類選擇器id選擇器等），都可以作為并集選擇器的一部分侄泽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.sitenav a{
color: red;
}
.nav a{
color: orange;
}
.nav, .sitenav{
font-size: 14px;
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<!-- 主導(dǎo)航欄 -->
<div class="nav">
<ul>
<li><a href="#">公司首頁(yè)</a></li>
<li><a href="#">公司簡(jiǎn)介</a></li>
<li><a href="#">公司產(chǎn)品</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
<!-- 側(cè)導(dǎo)航欄 -->
<div class="sitenav">
<div class="site-l">左側(cè)側(cè)導(dǎo)航欄</div>
<div class="site-r"><a href="#">登錄</a></div>
</div>
<!--在不修改以上結(jié)構(gòu)代碼的前提下礁芦，完成以下任務(wù)：-->
<!--1\. 鏈接 登錄 的顏色為紅色-->
<!--2\. 主導(dǎo)航欄里面的所有的鏈接改為橙色-->
<!--3\. 主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是微軟雅黑。-->
</body>
</html>
鏈接偽類選擇器（重點(diǎn)）
用于向某些選擇器添加特殊的效果悼尾。比如給鏈接添加特殊效果柿扣， 比如可以選擇 第1個(gè)，第n個(gè)元素诀豁。
因?yàn)閭晤愡x擇器很多窄刘，比如鏈接偽類，結(jié)構(gòu)偽類等等舷胜。我們這里先給大家講解鏈接偽類選擇器娩践。
a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active /* 選定的鏈接 */
注意寫的時(shí)候，他們的順序盡量不要顛倒 否則可能引起錯(cuò)誤烹骨。
因?yàn)榻墟溄觽晤惙牛远际?利用交集選擇器 a:link a:hover
-
因?yàn)閍鏈接瀏覽器具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式沮焕。
image
標(biāo)簽顯示模式（display）
- 什么是標(biāo)簽的顯示模式吨岭？
標(biāo)簽以什么方式進(jìn)行顯示，比如div 自己占一行峦树， 比如span 一行可以放很多個(gè) - 作用：
我們網(wǎng)頁(yè)的標(biāo)簽非常多辣辫，再不同地方會(huì)用到不同類型的標(biāo)簽，以便更好的完成我們的網(wǎng)頁(yè)魁巩。 - 標(biāo)簽的類型(分類)
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型急灭，它們也稱塊元素和行內(nèi)元素。
塊級(jí)元素(block-level)
常見的塊元素有<h1>~<h6>谷遂、<p>葬馋、<div>、<ul>、<ol>畴嘶、<li>等蛋逾，其中<div>標(biāo)簽是最典型的塊元素。
- 塊級(jí)元素的特點(diǎn)
（1）比較霸道窗悯，自己獨(dú)占一行
（2）高度区匣，寬度、外邊距以及內(nèi)邊距都可以控制蟀瞧。
（3）寬度默認(rèn)是容器（父級(jí)寬度）的100%
（4）是一個(gè)容器及盒子沉颂，里面可以放行內(nèi)或者塊級(jí)元素。
注意：只有 文字才 能組成段落 因此 p 里面不能放塊級(jí)元素悦污，特別是 p 不能放div
同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt铸屉，他們都是文字類塊級(jí)標(biāo)簽，里面不能放其他塊級(jí)元素切端。
行內(nèi)元素(inline-level)
常見的行內(nèi)元素有<a>彻坛、<strong>、<b>踏枣、<em>昌屉、<i>、<del>茵瀑、<s>间驮、<ins>、<u>马昨、<span>等竞帽，其中<span>標(biāo)簽最典型的行內(nèi)元素。有的地方也成內(nèi)聯(lián)元素
- 行內(nèi)元素的特點(diǎn)：
（1）相鄰行內(nèi)元素在一行上鸿捧，一行可以顯示多個(gè)屹篓。
（2）高、寬直接設(shè)置是無(wú)效的匙奴。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度堆巧。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。
注意：
- 鏈接里面不能再放鏈接
- 特殊情況a里面可以放塊級(jí)元素
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />泼菌、<input />谍肤、<td>，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性哗伯，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素谣沸。
行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。一行可以顯示多個(gè)
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度笋颤。
（3）高度，行高、外邊距以及內(nèi)邊距都可以控制伴澄。
三種模式總結(jié)區(qū)別
標(biāo)簽顯示模式轉(zhuǎn)換 display
- 塊轉(zhuǎn)行內(nèi)：display:inline;
- 行內(nèi)轉(zhuǎn)塊：display:block;
- 塊赋除、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;
CSS 背景(background)
- 背景顏色
background-color:顏色值; 默認(rèn)的值是 transparent 透明的
- 背景圖片(image)
background-image : none | url (url)
nono 代表沒有背景圖片 url() 使用地址進(jìn)行圖片加載
- 背景平鋪（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
- 背景位置(position)
background-position : length || length
background-position : position || position
注意：
- 必須先指定background-image屬性
- position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位非凌。
- 如果指定兩個(gè)值举农，兩個(gè)值都是方位名字，則兩個(gè)值前后順序無(wú)關(guān)敞嗡，比如left top和top left效果一致
- 如果只指定了一個(gè)方位名詞颁糟，另一個(gè)值默認(rèn)居中對(duì)齊。
- 如果position 后面是精確坐標(biāo)喉悴， 那么第一個(gè)棱貌，肯定是 x 第二的一定是y
- 如果只指定一個(gè)數(shù)值,那該數(shù)值一定是x坐標(biāo)，另一個(gè)默認(rèn)垂直居中
- 如果指定的兩個(gè)值是 精確單位和方位名字混合使用箕肃，則第一個(gè)值是x坐標(biāo)婚脱，第二個(gè)值是y坐標(biāo)
背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
- 最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
- 我們習(xí)慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響
- 因?yàn)槭荂SS3 勺像，所以 低于 ie9 的版本是不支持的障贸。
CSS 三大特性
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
樣式?jīng)_突吟宦，遵循的原則是就近原則篮洁。 那個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行那個(gè)樣式CSS繼承性
子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式殃姓，如文本顏色和字號(hào)(子元素可以繼承父元素的樣式（text-袁波，font-，line-這些元素開頭的可以繼承辰狡，以及color屬性）)锋叨。CSS優(yōu)先級(jí)（重點(diǎn)）
定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上宛篇，此時(shí)娃磺，選擇器相同，則執(zhí)行層疊性
-
選擇器不同叫倍，就會(huì)出現(xiàn)優(yōu)先級(jí)的問題偷卧。
imageimage
CSS盒子模型
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離吆倦。
當(dāng)我們給盒子指定padding值之后听诸， 發(fā)生了2件事情：
內(nèi)容和邊框 有了距離，添加了內(nèi)邊距蚕泽。
-
盒子會(huì)變大了晌梨。
imageimageimage
外邊距（margin）
margin屬性用于設(shè)置外邊距当辐。 margin就是控制盒子和盒子之間的距離
塊級(jí)盒子水平居中
可以讓一個(gè)塊級(jí)盒子實(shí)現(xiàn)水平居中必須：
- 盒子必須指定了寬度（width）
- 然后就給左右的外邊距都設(shè)置為auto，
header{ width:960px; margin:0 auto;}
文字居中和盒子居中區(qū)別
- 盒子內(nèi)的文字水平居中是 text-align: center, 而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對(duì)齊
- 塊級(jí)盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
margin: 10px auto; /* 塊級(jí)盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */
清除元素的默認(rèn)內(nèi)外邊距(重要)
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
外邊距合并
使用margin定義塊元素的垂直外邊距時(shí)顿涣，可能會(huì)出現(xiàn)外邊距的合并思恐。
嵌套塊元素垂直外邊距的合并（塌陷)
- 對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框
- 父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并
- 合并后的外邊距為兩者中的較大者
解決方案：
- 可以為父元素定義上邊框敛惊。
- 可以為父元素定義上內(nèi)邊距
- 可以為父元素添加overflow:hidden渊鞋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: greenyellow;
/*border-top: 1px solid transparent;*/
/*padding-top: 1px;*/
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
相鄰塊元素垂直外邊距的合并
- 當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom
- 下面的元素有上外邊距margin-top瞧挤，則他們之間的垂直間距不是margin-bottom與margin-top之和
- 取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）锡宋。
- 盡量給只給一個(gè)盒子添加margin值。
