1、層疊樣式表----目的：給html加各種樣式，便於維護更新；語法：選擇器：{屬性名：屬性值；屬性名：屬性值；}

2、四種引入CSS樣式的方法：

行內樣式表（臨時做測試）：

<標籤名 style="屬性：屬性值"> </標籤名>

內嵌樣式表

<style type="text/css">

</style>

外部樣式表

<link rel="stylesheet" href="xxx.css" />【與頁面同時載入，相容好】

匯入樣式表

@import url(xx.css); /*在.css檔案中放入或者在內嵌表中加入；【會等到頁面全部被下載完再被載入，相容差】*/

注：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的

3、文字屬性：

font-size:文字大小

font-weight:bold/normal    /*字型是否粗細*/

font-style:italic/normal    /*字型是否傾斜*/

font-family:隸書... /*預設宋體*/

text-decoration: underline;下劃線、overline;上劃線、line-through;刪除線、none;去掉所以線條

text-indent: 2em;   /*文字首行縮排*/

coolor:文字顏色

letter-spacing:2px;/*字母與字母之間的距離*/

word-spacing:2px;   /*單詞與單詞之間的距離*/

text-align:left/center/righr;   /*文字行內位置*/

text-shadow:水平 垂直 模糊強調 顏色;【可以有多組值用逗號隔開】/*設定文字陰影*/

4、背景屬性：

background-color、background-image:url、background-repeat:no-repeat/repeat-x/repeat-y/repeat（預設平鋪）、background-position:水平【left center right】 垂直【top center bottom】數值【正 負】

簡寫：background:背景顏色 背景圖片 是否平鋪  【附件】水平 垂直

background-attachment:背景附件，背景是否隨上方的內容一起滾動【fixed固定、scroll滾動（預設）】

背景縮放background-size:寬 高 cover【覆蓋上盒子,使背景影象完全覆蓋背景區域，背景影象的某些部分也許無法顯示在背景定位區域中】/contain【把影象影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。】

5、列表屬性：

去掉列表符號 list-style:none;

小圖代替列表前的符號ul,ol{list-style-image:url(路徑);}

6、合併表格邊框線：

table{border-collapse:collapse;}

7、邊框線屬性：

border-top/bottom/right/left-color/style【solid實線 dashed虛線 dotted點狀線】/width

簡寫：border-top:粗細 線型 顏色

8、盒模型【縱向】：

內容區：width/height

邊框：border

內邊距：padding上右下左

外邊距：margin上右下左

盒子陰影box-shadow:2px 2px 2px 2px grayinset;【水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 將外部陰影改為內部】

盒子圓角box-radis:2px 2px 2px 2px【左上 右上 右下 左下】【圓box-radis:50%;】

9、浮動【橫向】：

float:left/right;/*浮動不佔空間*/

clear:left/right/both;/*清除浮動*/

10、定位

position:

static預設 fixed固定 不佔空間，層級比普通標籤高

relative相對定位 佔空間相對自身位置

absolute絕對定位 不佔空間，層級高於普通元素（祖先無定位，往上找，相對於body）

座標的屬性：【偏離目標元素的位置】

left/right/top/bottom:數值

11、行內元素【輸入標籤以後，不是自己佔一行】強轉塊元素display:inline;

12、塊元素【獨佔一行，可設寬高】強轉行內元素display:block;

13、內容溢位處理overflow:hidden【溢位隱藏】/auto【溢位有滾動條】/scroll【無論是否溢位都有滾動條】

14、繼承：外層元素的樣式，會被裡面的元素所繼承

文字的屬性可繼承，不被繼承的有a標籤

15、優先順序：標籤選擇器【權重1】、類選擇器【10、主要用於css】、id選擇器【100、主要用於javascript】

16、縮放旋轉：

-webkit-transform:scale(1.5) rotate(10deg);/*放大到1.5，順時針旋轉10度【負則逆時針】*/ -moz-transform:scale(1.5) rotate(10deg); -o-transform:scale(1.5) rotate(10deg);

17、偽元素：

a標籤：a:link【未訪問時樣式】a:visited【訪問過的連結樣式，:visited 要放在 :link 的後面】a:hover【滑鼠移動到連結上時樣式，儘量放在最後，防止具備其他狀態時，被其他狀態的設定覆蓋掉】a:active【點選一瞬間的樣式，應該放在 :link :hover的後面】

E:first-letter設定第一個文字

E:first-line設定第一行文字

E::after盒子【裡面】後面插入內容

E::before盒子【裡面】前面插入內容

18、偽類結構：

E:only-child

E:nth-child(n)

E:nth-child(2n+1/odd)

E:nth-child(zn/even)

19、屬性選擇器：

E---元素，data---屬性

E[data]：選擇器帶有data屬性的元素物件加樣式

E[data="one"]：選擇帶有data屬性且屬性值為one的元素物件加樣式

E[data^="p"]:選擇帶有data屬性且屬性值以p開頭的元素物件加樣式

E[data$="e"]:選擇帶有data屬性且屬性值以e結尾的元素物件加樣式

E[data*=''n"]:選擇帶有data屬性且屬性值中包含n的元素物件加樣式