CSS外觀屬性
color:文本顏色
text-align:文本水平對(duì)齊方式
line-height:行間距
text-indent:首行縮進(jìn)
text-decoration 文本的裝飾
CSS復(fù)合選擇器
- 復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器善延，通過不同的方式組合而成的
1岖寞、后代選擇器（重點(diǎn)）
- 后代選擇器又稱為包含選擇器
- 用來選擇元素或元素組的子孫后代
父級(jí) 子級(jí){屬性:屬性值;屬性:屬性值;}
- 當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代蛮位。
- 子孫后代都可以這么選擇。 或者說价淌，它能選擇任何包含在內(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è)選擇器通過
,連接而成的藏雏，通常用于集體聲明。
- 任何形式的選擇器（包括標(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ú)指定樣式。
標(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è)置是無效的芬失。
（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è)值前后順序無關(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í)的問題摊沉。
CSS盒子模型
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距狐史。 是指 邊框與內(nèi)容之間的距離。
當(dāng)我們給盒子指定padding值之后说墨， 發(fā)生了2件事情：
- 內(nèi)容和邊框 有了距離骏全，添加了內(nèi)邊距。
-
盒子會(huì)變大了尼斧。
外邊距（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值宾添。
