CSS作用：
- 快速維護頁面元素的樣式屬性
- 彌補HTML元素的屬性不足
CSS基礎
CSSCascading Style Sheets，層疊樣式表單
CSS的使用方式有三種
1，書寫于標記的內(nèi)部（內(nèi)聯(lián)樣式）
<標記名稱 style="屬性：值；屬性：值"/>
<標記名稱 style="屬性：值；屬性：值">...</標記名稱>
僅對指定的標記有效
2，書寫于文檔的頭部（內(nèi)部樣式）
<style type="text/css">
選擇器{屬性：值;...}
...
</style>
僅對整個文檔的所有標記有效
3，鏈接到外部的CSS文檔
step1，創(chuàng)建css文件
1，CSS文件的擴展名為.css
2，CSS文件的語法結(jié)構(gòu)：選擇器{屬性:值;...}
step2，在網(wǎng)頁文件內(nèi)鏈接到外部的CSS文件
<link type="text/css" rel="stylesheet" href="CSS文檔URL"/>
CSS語法規(guī)范
內(nèi)聯(lián)樣式
<標記名稱 style="屬性：值；屬性：值"/>
<標記名稱 style="屬性：值；屬性：值">...</標記名稱>
外部樣式/內(nèi)部樣式
選擇器{屬性:值;...}
CSS選擇器
1，元素選擇器（只針對指定的元素有效，且自動應用）
元素名稱{屬性:值;...}
2，類選擇器（可手動應用于任何標記，class="類名稱"，多個類名之間以空格分隔）
.類名稱{屬性:值;...}
3，ID選擇器（只能手動應用于唯一的元素，id="ID"）
#id{屬性:值;...}
id的用途
- CSS中的ID選擇器
- JavaScript
- JQuery
4，群組選擇器（實際上是具有相同屬性的選擇器的簡潔寫法）
選擇器,選擇器,...{屬性:值;...}
5，派生選擇器（兩個選擇器之間至少為父子關(guān)系）
選擇器 選擇器 ...{屬性:值;...}
6，偽類選擇器
- :link ：正常顯示狀態(tài)
- :hover ：鼠標放上的狀態(tài)
- :active ：鼠標按下的狀態(tài)
- :visited：訪問過的狀態(tài)
CSS單位
長度單位：px（像素）、%（百分比）、em（文字尺寸的倍數(shù)）
顏色單位：
- A，英文名稱，如red，green，blue等
- B，十六進制表示法，如#ff0000，紅綠藍的順序
- C，簡寫的十六位進制，如#f00
- D，RGB表示法，如rgb（255，0，0）
- E，百分比的RGB表示法，如rgb（100%，0%，0%）
布局樣式
- width，設置寬度
- height，設置高度
邊框樣式
- border-top（right|bottom|left）:寬度 線型（none|solid[實線]|dotted[點劃線]） 顏色;
HTML標記的種類
根據(jù)是否換行，劃分成：
- 塊級對象：可以自然換行（p，div，h1，h2...ul，ol，li等）塊級對象其默認寬度占其父對象的100%
- 內(nèi)聯(lián)對象：不能換行
布局樣式
1，內(nèi)邊距：
- padding-top：上側(cè)的內(nèi)邊距
- padding:value：四個方向內(nèi)邊距相同
- pading:value（上下） value（左右）
- pading:value（上） value（左右） value（下）
- pading:value（上） value（右） value（下） value（左）
2，外邊距
- margin-top：上側(cè)的外邊距
- margin:value|auto：四個方向的外邊距，同內(nèi)邊距的定義方法。
auto只有左右居中，不能上下居中。
控制元素的現(xiàn)實方式
display：none|inline（內(nèi)聯(lián)樣式）|block（塊級對象）
說明：只有塊級元素或者HTML元素中存在width、height屬性的對象（如img，table）才能通過CSS樣式設置寬度/高度
背景樣式
background-color：背景顏色
background-image：url
background-repeat：設置背景圖像的平鋪方式，repeat|no-repeat|repeat-x|repeat-y;
background-position：設置圖像的位置，水平位置（left|center|right）、垂直位置（top|center|bottom）。
background-attachment：scroll（隨文檔滾動）|fixed（背景固定）
background：背景顏色 url 平鋪方式 水平位置 垂直位置。
浮動樣式
float:left|right
文本樣式
line-height：行高
text-indent：首行縮進
text-align：left|center|right 文本的水平對齊方式
cursor：pointer 手型
font-weight：normal|bold（加粗效果）
列表樣式
設置列表樣式
- list-style-type：none|disc|circle|lower-alpha...
- list-style-image：
- list-style-position：
- list-style：樣式 url(圖像的URL) 位置（inside|outside）
border-collapse: collapse/separate;設置是否將表格邊框合并為單一邊框
定位屬性
position：fixed（固定的）|absolute（絕對）|relative（相對）
顏色透明的處理：
- Chrome Firefox等：opacity:Value（0~1）
- IE filter:alpha(opacity=value[0~100]);
left|top|right|bottom:value(設置其余父對象之間的距離);
堆疊順序
z-index：value（設置疊放次序）
CSS選擇器的優(yōu)先級
style，IDs，classes，tags
