<meta charset="utf-8">
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è)選擇器通過
,連接而成的，通常用于集體聲明戒悠。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="#">公司首頁</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)頁的標(biāo)簽非常多硼一，再不同地方會(huì)用到不同類型的標(biāo)簽累澡，以便更好的完成我們的網(wǎng)頁。 - 標(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í)的問題沦泌。
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值淋袖。
作者：method
鏈接：http://www.reibang.com/p/a68391f55b8c
來源：簡(jiǎn)書
著作權(quán)歸作者所有鸿市。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處即碗。
