CSS外觀屬性
color:文本顏色
text-align:文本水平對齊方式
line-height:行間距
text-indent:首行縮進
text-decoration 文本的裝飾
CSS復合選擇器
- 復合選擇器是由兩個或多個基礎(chǔ)選擇器，通過不同的方式組合而成的
1府树、后代選擇器（重點）
- 后代選擇器又稱為包含選擇器
- 用來選擇元素或元素組的子孫后代
父級 子級{屬性:屬性值;屬性:屬性值;}
- 當標簽發(fā)生嵌套時粮宛，內(nèi)層標簽就成為外層標簽的后代。
- 子孫后代都可以這么選擇馍驯。 或者說寂祥，它能選擇任何包含在內(nèi) 的標簽逐虚。
2、子元素選擇器
子元素選擇器只能選擇作為某元素子元素(親兒子)的元素克伊。
寫法就是把父級標簽寫在前面，子級標簽寫在后面华坦，中間跟一個 > 進行連接
3愿吹、交集選擇器
交集選擇器由兩個選擇器構(gòu)成，找到的標簽必須滿足：既有標簽一的特點惜姐，也有標簽二的特點犁跪。
其中第一個為標簽選擇器，第二個為class選擇器歹袁，兩個選擇器之間不能有空格坷衍，如h3.special
4、并集選擇器（重點）
如果某些選擇器定義的相同樣式条舔，就可以利用并集選擇器枫耳，可以讓代碼更簡潔。
-
-并集選擇器（CSS選擇器分組）是各個選擇器通過
,連接而成的孟抗，通常用于集體聲明迁杨。 任何形式的選擇器（包括標簽選擇器、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>
<!-- 主導航欄 -->
<div class="nav">
<ul>
<li><a href="#">公司首頁</a></li>
<li><a href="#">公司簡介</a></li>
<li><a href="#">公司產(chǎn)品</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
<!-- 側(cè)導航欄 -->
<div class="sitenav">
<div class="site-l">左側(cè)側(cè)導航欄</div>
<div class="site-r"><a href="#">登錄</a></div>
</div>
<!--在不修改以上結(jié)構(gòu)代碼的前提下，完成以下任務：-->
<!--1\. 鏈接 登錄 的顏色為紅色-->
<!--2\. 主導航欄里面的所有的鏈接改為橙色-->
<!--3\. 主導航欄和側(cè)導航欄里面文字都是14像素并且是微軟雅黑帆喇。-->
</body>
</html>
鏈接偽類選擇器（重點）
用于向某些選擇器添加特殊的效果警医。比如給鏈接添加特殊效果， 比如可以選擇 第1個坯钦，第n個元素预皇。
因為偽類選擇器很多，比如鏈接偽類婉刀，結(jié)構(gòu)偽類等等吟温。我們這里先給大家講解鏈接偽類選擇器。
- a:link /* 未訪問的鏈接 */
- a:visited /* 已訪問的鏈接 */
- a:hover /* 鼠標移動到鏈接上 */
- a:active /* 選定的鏈接 */
注意 - 寫的時候突颊，他們的順序盡量不要顛倒 否則可能引起錯誤鲁豪。
- 因為叫鏈接偽類，所以都是 利用交集選擇器 a:link a:hover
-
因為a鏈接瀏覽器具有默認樣式律秃，所以我們實際工作中都需要給鏈接單獨指定樣式爬橡。
標簽顯示模式（display）
- 什么是標簽的顯示模式？
標簽以什么方式進行顯示棒动，比如div 自己占一行糙申， 比如span 一行可以放很多個 - 作用：
我們網(wǎng)頁的標簽非常多，再不同地方會用到不同類型的標簽船惨，以便更好的完成我們的網(wǎng)頁柜裸。 - 標簽的類型(分類)
HTML標簽一般分為塊標簽和行內(nèi)標簽兩種類型缕陕，它們也稱塊元素和行內(nèi)元素。
塊級元素(block-level)
常見的塊元素有<h1>~<h6>疙挺、<p>扛邑、<div>、<ul>铐然、<ol>蔬崩、<li>等，
其中<div>標簽是最典型的塊元素锦爵。
- 塊級元素的特點
（1）比較霸道舱殿，自己獨占一行
（2）高度，寬度险掀、外邊距以及內(nèi)邊距都可以控制沪袭。
（3）寬度默認是容器（父級寬度）的100%
（4）是一個容器及盒子，里面可以放行內(nèi)或者塊級元素樟氢。
注意：只有 文字才 能組成段落 因此 p 里面不能放塊級元素冈绊，特別是 p 不能放div
同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽埠啃，里面不能放其他塊級元素死宣。
行內(nèi)元素(inline-level)
常見的行內(nèi)元素有<a>、<strong>碴开、<b>毅该、<em>、<i>潦牛、<del>眶掌、<s>、<ins>巴碗、<u>朴爬、<span>等，
其中<span>標簽最典型的行內(nèi)元素橡淆。有的地方也成內(nèi)聯(lián)元素
- 行內(nèi)元素的特點：
（1）相鄰行內(nèi)元素在一行上召噩，一行可以顯示多個。
（2）高逸爵、寬直接設(shè)置是無效的具滴。
（3）默認寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素师倔。
注意：
- 鏈接里面不能再放鏈接
- 特殊情況a里面可以放塊級元素
行內(nèi)塊元素（inline-block）
在行內(nèi)元素中有幾個特殊的標簽——<img />构韵、<input />、<td>，
可以對它們設(shè)置寬高和對齊屬性贞绳，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。
行內(nèi)塊元素的特點：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙致稀。一行可以顯示多個
（2）默認寬度就是它本身內(nèi)容的寬度冈闭。
（3）高度，行高抖单、外邊距以及內(nèi)邊距都可以控制萎攒。
三種模式總結(jié)區(qū)別
標簽顯示模式轉(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
- 背景圖片(image)
background-image:none|url(url)
none 代表沒有背景圖片 url()使用地址進行圖片加載
- 背景平鋪(repeat)
background-repeat:repeat|no-repeat|repeat-x|repeat-y
- 背景位置(position)
background-position : length || length
background-position : position || position
注意：
- 必須先指定background-image屬性
- position 后面是x坐標和y坐標矛绘。 可以使用方位名詞或者 精確單位耍休。
- 如果指定兩個值，兩個值都是方位名字货矮，則兩個值前后順序無關(guān)羊精，比如left top和top left效果一致
- 如果只指定了一個方位名詞，另一個值默認居中對齊囚玫。
- 如果position 后面是精確坐標喧锦， 那么第一個，肯定是 x 第二的一定是y
- 如果只指定一個數(shù)值,那該數(shù)值一定是x坐標抓督，另一個默認垂直居中
- 如果指定的兩個值是 精確單位和方位名字混合使用燃少，則第一個值是x坐標，第二個值是y坐標
背景透明(CSS3)
background: rgba(0, 0, 0, 0.3);
- 最后一個參數(shù)是alpha 透明度 取值范圍 0~1之間
- 我們習慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
- 注意： 背景半透明是指盒子背景半透明铃在， 盒子里面的內(nèi)容不受影響
- 因為是CSS3 阵具，所以 低于 ie9 的版本是不支持的。
CSS三大特性
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加定铜。
樣式?jīng)_突阳液，遵循的原則是就近原則。 那個樣式離著結(jié)構(gòu)近宿稀，就執(zhí)行那個樣式CSS繼承性
子標簽會繼承父標簽的某些樣式趁舀，如文本顏色和字號(子元素可以繼承父元素的樣式（text-，font-祝沸，line-這些元素開頭的可以繼承矮烹，以及color屬性）)。CSS優(yōu)先級（重點）
定義CSS樣式時罩锐，經(jīng)常出現(xiàn)兩個或更多規(guī)則應用在同一元素上奉狈，此時，選擇器相同涩惑，則執(zhí)行層疊性
-
選擇器不同仁期，就會出現(xiàn)優(yōu)先級的問題。
CSS盒子模型
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離跛蛋。
當我們給盒子指定padding值之后熬的， 發(fā)生了2件事情：
- 內(nèi)容和邊框 有了距離，添加了內(nèi)邊距赊级。
- 盒子會變大了押框。
外邊距（margin）
margin屬性用于設(shè)置外邊距。 margin就是控制盒子和盒子之間的距離
塊級盒子水平居中
可以讓一個塊級盒子實現(xiàn)水平居中必須：
- 盒子必須指定了寬度（width）
- 然后就給左右的外邊距都設(shè)置為auto理逊，
header{ width:960px; margin:0 auto;}
文字居中和盒子居中區(qū)別
- 盒子內(nèi)的文字水平居中是 text-align: center, 而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對齊
- 塊級盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
margin: 10px auto; /* 塊級盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */
清除元素的默認內(nèi)外邊距(重要)
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
外邊距合并
使用margin定義塊元素的垂直外邊距時橡伞，可能會出現(xiàn)外邊距的合并。
嵌套塊元素垂直外邊距的合并（塌陷)
- 對于兩個嵌套關(guān)系的塊元素晋被，如果父元素沒有上內(nèi)邊距及邊框
- 父元素的上外邊距會與子元素的上外邊距發(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>
相鄰塊元素垂直外邊距的合并
- 當上下相鄰的兩個塊元素相遇時羡洛，如果上面的元素有下外邊距margin-bottom
- 下面的元素有上外邊距margin-top挂脑，則他們之間的垂直間距不是margin-bottom與margin-top之和
- 取兩個值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
- 盡量給只給一個盒子添加margin值翘县。
