1. 什么是CSS镇眷？
**CSS** 層疊樣式表波桩，英文全稱**Cascading Style Sheets**是一種用來表現(xiàn)HTML或者XML等文件樣式的計(jì)算機(jī)語言鹅巍。CSS不僅可以靜態(tài)地修飾網(wǎng)頁音同，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化词爬。
2. 為什么要用CSS？
雖然HTML標(biāo)簽?zāi)承傩钥梢栽O(shè)置樣式效果权均，但是細(xì)節(jié)處理的不好顿膨。
3. CSS基本使用
3.1 CSS基本語法
**選擇器 { 屬性:值; 屬性:值; }**
一個(gè)選擇器有若干條樣式聲明，每條聲明央視包含一個(gè)CSS屬性和其對應(yīng)的屬性值叽赊。一個(gè)選擇器由大括號開始和結(jié)束恋沃。
3.2 CSS的使用
1. 行內(nèi)式
將樣式定義在html標(biāo)簽上的style屬性中
例:
<p style = "color: red; font-family:楷體;"}>這是一段文本測試</p>
注：以行內(nèi)樣式寫得CSS耦合度較高，不利于代碼可讀必指。
*2. 內(nèi)部樣式
一般寫在title標(biāo)簽上囊咏，定義在head標(biāo)簽中的sty標(biāo)簽上
例：
<style type = "text/css">
p{
color:red;
font-family:楷體;
}
</style>
*3. 外部樣式
通過link標(biāo)簽引入外部css文件
例:
<link rel = "stylesheet" type="text/css" href="css/style.css"/>
rel: 當(dāng)前文件與引入文件之間的關(guān)系
type: 類型：css類型
href: 引入的資源路徑
css優(yōu)先級：就近原則
行內(nèi)樣式 style屬性中 權(quán)重是1000
3.3 基本選擇器
1. 通用選擇器
用“”*做選擇器會選中所有元素
*2. 元素選擇器
指定元素名
*3. id選擇器
+選擇指定id屬性值的元素
注：id定義規(guī)則：由字母、數(shù)字塔橡、下劃線匆笤、中劃線組成，但是不能以數(shù)字開頭谱邪！
*4. 類選擇器
選擇設(shè)置指定class屬性值的元素
.class屬性值 {}
5. 分組選擇器
選擇指定選擇器選中的元素
選擇器1. 炮捧，選擇器2.，選擇器3.... {}
選擇器的優(yōu)先級（權(quán)重值）：
id選擇器 100 > 類選擇器10 > 元素選擇器1 > 通用選擇器0
3.4 組合選擇器
*1. 后代選擇器
選擇指定元素的所有的后代元素(用空格分隔)
指定元素 指定子代元素 {
屬性:屬性值
...
}
*2. 子代選擇器
選擇指定元素的第一代元素（用大于號分隔）
指定元素 > 指定子代元素 {
屬性:屬性值
...
}
3. 相鄰兄弟選擇器
選擇指定元素相鄰的下一個(gè)指定元素（只會向下找一個(gè)）（用加號分隔）
指定元素 + 指定同級元素 {
屬性:屬性值
...
}
4. 普通兄弟選擇器
選擇指定元素后的指定同級元素（只會向下找）（用波浪號分隔）
指定元素 ~ 指定同級元素 {
屬性:屬性值
...
}
3.5 CSS常用屬性設(shè)置
1. 背景
設(shè)置元素背景顏色: background-color: #六個(gè)十六進(jìn)制數(shù);
設(shè)置元素背景圖片: background-image:url(路徑/文件名);
-
設(shè)置背景圖片是否重復(fù)鋪滿屏幕*(默認(rèn)全屏重復(fù))： background-repeat:repeat-x;
不重復(fù) no-repeat
橫縱重復(fù) repeat-x repeat-y
設(shè)置背景圖片大械胍： background-size:數(shù)字px
2. 文本
-
color
- color: 英語顏色
- color: #六個(gè)十六進(jìn)制數(shù)
- color: rgb(a,b,c) (abc都是255以內(nèi)的整數(shù))
-
對齊方式（默認(rèn)左對齊）
- 居中 text-align: center
- 右對齊 text-align: right
- 左對齊 text-align: left
- 左右對齊 text-align: justify
-
文本修飾
- 設(shè)置上劃線： text-decoration: overline
- 設(shè)置下劃線： text-decoration: underline
- 設(shè)置中劃線： text-decoration: line-through
- 去除文本修飾: text-decoration:none
- 注：可以通過在屬性值之間用空格分隔的形式同時(shí)使用不同位置的劃線
-
設(shè)置首行縮進(jìn)
text-indent: 數(shù)字em
3. 字體
-
字體形式: font-family: 字體名
- 注：
- 當(dāng)字體的屬性值包含空格或特殊字符時(shí)咆课，需要將font-family屬性值用引號括起來
- font-family有“后備“機(jī)制，為元素設(shè)置多種字體扯俱，當(dāng)瀏覽器不識別第一種字體時(shí)书蚪，會嘗試找下一個(gè)字體
字體大小: font-size: 數(shù)字px
-
字體風(fēng)格: font-style
- 正常體 normal
- 斜體 italic
- 強(qiáng)制斜體 oblique
-
字體粗細(xì): font-weight
- 粗體 bold
- 粗細(xì)值 100~900之間的整數(shù) 400為正常字體 700為標(biāo)準(zhǔn)粗體
4. display屬性
- block 元素會被顯示，且會變成塊級元素迅栅，元素前后有換行符
- none 元素會被隱藏
- inline 元素會顯示為行內(nèi)元素殊校，元素前后沒有換行符
- inline-block 行內(nèi)塊級元素
5. 浮動
float的屬性值有none、left读存、right
- 只有橫向浮動为流，沒有縱向浮動
- 會將元素的display屬性變更為block
- 浮動元素的后一元素會圍繞該浮動元素（比如文字圍繞圖片）
- 浮動元素的前一元素不會受到任何影響（若想讓兩個(gè)塊狀元素并排顯示，必須讓兩個(gè)塊狀元素都用float）
4. 盒子模型
盒子模型由margin让簿、border敬察、padding組成（藍(lán)色區(qū)域?yàn)閮?nèi)容）。
4.1 border
- 在一行內(nèi)設(shè)置元素邊框的寬度尔当、顏色莲祸、類型，語法為：
- border: 數(shù)字px #顏色 類型
- 單獨(dú)設(shè)置邊框的顏色、寬度锐帜、類型：
- border-color
- border-width
- border-style
- 單獨(dú)設(shè)置四條邊框線的效果：在屬性值之間用空格隔開田盈，順序是上右下左
4.2 padding
表示內(nèi)容和邊框之間的區(qū)域
- 設(shè)置內(nèi)邊距，在屬性值之間用空格隔開缴阎，順序是上右下左
- padding: 數(shù)字px
- 單獨(dú)設(shè)置一邊的距離
- padding-left: 數(shù)字px
- padding-right: 數(shù)字px
- padding-top: 數(shù)字px
- padding-bottom: 數(shù)字px
4.3 margin
-
設(shè)置內(nèi)邊距允瞧，在屬性值之間用空格隔開，順序是上右下左
- padding: 數(shù)字px
-
單獨(dú)設(shè)置一邊的距離
- margin-left: 數(shù)字px
- margin-right: 數(shù)字px
- margin-top: 數(shù)字px
- margin-bottom: 數(shù)字px
