1.作用：美化和修飾HTML。又叫層疊樣式表，樣式表，級聯樣式表。
2.優點：
1.可以更好的將格式與結構分離。
2.可以更好的控制頁面的佈局。
3.可以製作體積更小，下載更快的網頁。
4.可以將多個網頁同時更新，比以前更快更容易。
3.使用CSS的三種方式：
1.內聯式，即將樣式定義在單個HTML元素中。
語法：<ANY style="樣式聲明1：值1；樣式聲明2：值2；-----">。
2.內部樣式表，將樣式定義在<head><style>選擇器（即標記名如p.div）{ 若干樣式聲明 }</style></head>標記中。
3.外部樣式表，將樣式聲明定義在獨立的css文件（.css）中，在網頁中使用。語法：<head><link rel="Stylesheet" href=".css"><head>
4.CSS的特徵：
1.繼承性，即父元素的一些樣式，可以繼承給子元素直接使用。
2.層疊性，一個元素聲明多個不衝突的樣式規則，可以全部應用。
3.優先性，瀏覽器的缺省設置（User Agent Stylesheet）<內部樣式表和外部樣式表（後定義者優先）<內聯方式。
4.!important，在屬性值後面添加!important強調其最優先。
5.選擇器：
1）.定義作用：規範哪些元素可以用聲明好的樣式。
2）.基礎選擇器的分類：
1.通用選擇器：語法：*{若干樣式聲明}。
2.元素選擇器：某標記對應的所有元素。語法：標記名{若干樣式聲明}。
3.類選擇器：標記元素的class屬性值加上前面的 . 號作爲選擇器。語法： .類名{若干樣式聲明}。用法：1.運行一個元素同時又多個類選擇器<ANY class="class1 class2class3">。2.元素名 . 類名{若干樣式聲明} 。
4.ID選擇器：元素的ID值作爲選擇器。語法：#ID值{若干樣式聲明}。
5.羣組選擇器：多個或多種選擇器放在一起，用逗號隔開一起聲明。語法：選擇器1，選擇器2，選擇器3---{若干樣式聲明}。
6.後代選擇器： 語法：選擇器1 選擇器2{若干樣式聲明}。
7.子代選擇器： 語法：選擇器1>選擇器2{若干樣式聲明}。
8.僞類選擇器：匹配某些元素的不同狀態，如超鏈接單擊前中後字體顏色效果。
語法： （選擇器）：僞類選擇器{若干樣式聲明}。
分類：
1、鏈接僞類：專門控制 a 標記效果的僞類選擇器
（1）、:link：定義超鏈接未被訪問時的樣式效果
（2）、:visited：定義超鏈接訪問後的樣式效果。
2、動態僞類：
（1）、:hover：定義鼠標懸停在元素上的時候的效果。
（2）、:active：定義元素被激活的瞬間的樣式效果(被點擊的一瞬間)。
（3）、:focus：定義元素獲取焦點時的樣式效果。
9.複雜的選擇器；
（1）兄弟選擇器：兄弟元素——具備相同父元素的平級元素稱之爲“兄弟元素”。
注意：兄弟選擇器，只能向後找，不能向前找。
1）.相鄰兄弟選擇器：作用——獲取緊緊挨在某元素後的兄弟元素。語法：選擇器1+選擇器 2{ 若干樣式聲明 }。
2）.通用兄弟選擇器：作用——獲取某元素後所有滿足條件的兄弟元素。語法：選擇器1~選 擇器2 { 若干樣式聲明 }。
（2）屬性選擇器：作用——允許通過元素所附帶的屬性及其值來匹配元素。語法：
1.[attr ] attr表示頁面中所有元素的任意屬性名稱。如[id] [class],表示匹配頁面 中所有附帶id ，class屬性的元素。
2.選擇器[ attr ],表示匹配附帶attr屬性並滿足指定選擇器的元素。 如div[id], .ipc[name]。
3.[attr2][attr1],表示匹配同時附帶attr1,attr2屬性的頁面元素。
4.[attr=value],表示匹配attr屬性值爲value的元素，其中這個value,可以用引號也可不用引號。
5.[attr&=val][attr^=val][attr*=val]，分別表示屬性值以val開頭，以val結尾，包含val；
（3）僞類選擇器：作用——爲了匹配元素不同的狀態。
1.目標僞類；突出顯示獲得的html錨點元素。即跳到錨點記號上時，記號的樣式，匹配被激活的錨點。語法： ：target{} ，如：div:target{}.
2.結構僞類：作用——通過元素之間的結構關係來匹配元素。
1）. ：first-child;表示匹配的元素是屬於父元素的第一個子元素。
2）. ：last-child;表示匹配的元素是屬於父元素的最後一個子元素。
3）. ：nth-child(n),表示匹配元素是屬於其父元素中的第n個子元素，如 :nth-child(1) ===first-child;
4）.empty 匹配沒有子元素的元素。
5）.only-child,匹配只有其父元素只有唯一一個子元素的元素。
3.否定僞類：作用——將滿足指定選擇器的元素給排除出去。語法： ：not(元素選擇器 )。如 tr:not(:first-child){};
4.僞元素選擇器：僞類——匹配的是完整的元素；僞元素——某元素中的部分內容。語法：1.:first-letter(::first-tletter),匹配某個元素的首字符。
2. :first-line(::first-line),匹配某個元素的首行。
3. ::selection,匹配被用戶選取的內容。注意：此選擇器只能修改背景顏色和文本顏色,需要2個冒號。
5.內容生成；:after/:before{content:""}使用css向某元素內插入一段內容。content:該屬性也可應用於div中添加圖片content:url(...);
6.:enabled/:disabled/:checked/;分別表示被激活，被禁用，被選中（單選/複選按鈕）；
7.新增一個屬性值initial:可直接取消某個元素的指定樣式使其變爲默認值；如color:initial;
（4）僞元素選擇器：
1. : before(::before)，匹配到某元素內容區域之前。
2. :after(::after)，匹配到某元素內容區域之後。
3.屬性——content,向匹配到的位置處增加內容。如： div:before{ content:"字符串"/url();} 在:after/before{這裏面的屬性都是針對content}。
4.解決浮動元素父元素高度的問題，解決外邊距的溢出問題。
（5）.彈性佈局（Flexible Layout ,又叫可伸縮佈局，常用來替換<frame>）；
1）.爲了解決某元素中子元素的佈局方式，爲佈局提供最大的靈活性。
2）.彈性佈局的容器，即父元素。彈性佈局的項目，即要實現佈局效果的元素，簡稱爲項目。
主軸（Aain Axsis），決定項目們排列順序的一根軸，如果按X（Y）軸排列，那X（Y）就是主軸。交叉軸（Cross Axsis），與主軸相交叉的那根軸。
3）.語法：
1.彈性佈局的容器，只有將元素變爲彈性佈局的容器後，子元素們才能按照彈性佈局的方式進行排列。將該父元素添加一個屬性display:flex/inline-flex;分別表示將塊級元素邊彈性容器，將行內元素邊彈性容器。注意：元素變彈性容器後，子元素的float,clear,vertical-align將全部失效，且子元素變爲塊級元素，可以修改尺寸，且容器的text-align也會失效。
2.容器的屬性，該組屬性加載容器上，負責控制所有項目的特徵的。屬性——
1）.flex-direction;指定容器的主軸及其排列方向，X軸爲默認主軸。取值：row/row-reverse/column/columu-reverse分別表示默認值主軸爲X軸且從左到右排列，主軸爲X軸且從右向左排列，主軸爲Y軸且起點在頂端，主軸爲Y軸且起點在底端。
2）.flex-wrap;當一個主軸排列顯示不了所有子元素（項目）時，可以指定換行方式。取值：nowrap/wrap/wrap-reverse/;分別表示默認值不換行直接壓縮子元素（項目）寬度，向下左邊換行，向上左邊換行。
3）.flex-flow;是flex-direction和flex-wrap的縮寫；取值：row nowrap/direction wrap;分別表示默認值，分別取值。
4）.justify-content;作用——定義項目在主軸上對齊方式。取值：flex-start/flex-end/center/space-between/space-around;分別表示在主軸的起點對齊，在主軸的終點對齊，在 主軸的居中對齊，兩端對齊，讓每個項目兩端的距離是相等的。
5）.align-items,定義項目在交叉軸上的對齊方式。取值：flex-start/flex-end/center/baseline/strentch;分別表示在交叉軸的起點對齊，終點對齊，居中對齊，基線對齊，將在交叉軸上佔滿所有的空間。
6.尺寸；
（1）.尺寸單位：px,pt(磅/點 1pt=1/72英寸),%,cm,mm,em(佔父元素倍數),rem（佔根元素倍數）,in（1英寸=2.54cm）。
1）.顏色單位：rgb,rgba,#rrggbb,#rgb,英文單詞。
2）.尺寸的屬性：width/height,max-width/height,min-width/height。
（2）.允許修改尺寸的元素：所有的塊級元素（div,p,h#---），除單複選外的控件，img和table。
（3）.溢出處理：屬性——overflow，overflow-x，overflow-y。
取值——visible(默認值，溢出可見)，hidden（溢出隱藏），scroll（顯示滾動條），auto（溢出才顯示滾動條）。
7.邊框：邊框的屬性語法：border：width style(solid/dotted/dashed) color; 表示四邊的設置線寬，線類型，線顏色。
（1）.邊框的細分：單邊多屬性（border-方向：width style color），單邊單屬性（border-方向-屬性：屬性值），多邊單屬性（border-屬性：屬性值）。
（2）.特殊情況：不顯示邊框，邊框矩形由4個三角形組成。
（3）.邊框倒角：屬性——border-(某個角)-radius: 表示4個角（某個角）的倒角。取值——以px，或百分比爲單位的數值。
（4）.邊框的陰影：屬性——box-shadow;取值——h-shadow v-shadow blur spread color insert; 分別表示水平，垂直位移（正負，以px,或百分比爲單位），模糊大小，陰影大小，陰影顏色，內陰影。
（5）.邊框輪廓：指在邊框外加一層輪廓。屬性——outline:width style color;
8.框模型：頁面元素皆爲框，框模型（Box-Model）定義了內容，內邊距，外邊距的一種方式。
（1）.外邊距：屬性——margin-(某個方向)；表示四個方向（某個方向的外邊距距離），多個方向取值可以簡寫。取值——1.以px,百分比爲單位的正負數字。其中正負表示上下左右移動。2.auto，必須是塊級元素設置了寬度下，水平居中。
（2）.默認具有外邊的元素——body,h#,p,pre,ol,ul,dd,dl; 可以通過margin:0px設置外邊距爲0。
（3）.外邊距的合併以及外邊距的溢出。
（4）.內邊距：屬性——padding;與外邊一樣的用法。
（5）.重置框模型的計算方式：屬性——box-sizding:content-box(默認值)/border-box;
9.背景屬性：
（1）.背景顏色——background-color :顏色值;
（2）.背景圖片——background-image: url(圖片的路徑);
（3）.背景圖片重複——background-repeat: repeat/repeat-x/repeat-y/no-repeat;分別表示默認值，橫向，縱向，不平鋪。
（4）.背景圖片大小——background-size: x y/x% y%/cover/contain; 分別表示以px爲單位，百分爲單位，全覆蓋，不一定全覆蓋。
（5）.背景圖片的固定——background-attachment: scroll/fixed; 分別表示默認值隨滾動條滾動，固定不隨滾動條滾動。
（6）.背景圖片位置——background-position: x y/x% y% / 關鍵字 關鍵字； 分別表示以x y 方向的pt爲單位的位置，百分比爲單位的位置，左右上下中關鍵字。
（7）.背景圖片的簡寫——background: color url() repeat attachment position;定義多背景圖，即在一個元素中顯示多個背景圖像，還可以將背景圖像進行重疊，即將上面屬性依次賦值多個並用逗號隔開；
10.漸變：
（1）.漸變的主要因素——色標：即顏色和位置。
（2）.漸變的三種方式——線性，徑向，二者組合。
（3）.線性漸變：屬性——background-image: linear-gradient(angle,color- point1,...);angle-填充方向，取值爲to top/to right/toleft/tobottom或者以deg爲單位的0~360度。color-point:色標，即顏色和位置。如red 0%,blue 50% 。
（4）.瀏覽器的兼容——在linear-gradient前加瀏覽器前綴。
11.文字格式化屬性：
1）.字體屬性——
1.字體類型——font-family:取值爲字體類型，中文類型需要加引號。
2.字體大小——font-size: 取值爲以 px 或 pt 或em 或 rem 爲單位的數字。
3.字體加粗——font-weight: normal/bold/value; 分別表示默認值正常，加粗，無單位數字。
4.字體樣式——font-style: normal/italic; 分別表示默認值正常，斜體。
5.字體小型大寫字母—font-variant: normal/small-caps; 分別表示默認正常，小型大寫字母。
6.字體屬性的簡寫——font: style variant weight sizefamily;注意:簡寫時是必須有font-family。
7.自定義字體——@font-face{....}:是由以上屬性及值組成的對象；
2）.文本屬性——
1.文本顏色——color:顏色值；
2.文本水平排列方式——text-align:left/right/center/justify;
3.文本的劃線修飾——text-decoration:none/underline/line-through/overline; 表示無劃線，下劃線，刪除線，上劃線。
4.文本的行高——line-height: 取值爲以px爲單位的數值或無單位的字體倍數。
5.文本首行縮進——text-indent: 取值以px 爲單位的數值。
6.文本陰影——text-shadow: h-shadow v-shadow blurcolor;文本陰影屬性接收一個以逗號分隔的陰影效果的列表，陰影效果按照給的的順序，可以出現相互覆蓋的效果。
7.文本溢出——text-overflow:clip/ellipsis/ellipsis-word;表示文本超出顯示框的處理，取值分別表示不顯示（...）直接裁剪/顯示（...）省略標記插入的位置是最後一個字符/顯示（...）省略標記插入的位置是最後一個詞。
3）.文本多列布局——適合純文本設計
1.column-width:表示一篇文字中定義文本每列寬度；
2.column-count:表示將一篇文字分成幾列顯示；
3.column-gap:定義相鄰列之間的距離；
4.column-rule:style width color;表示相鄰列之間的分割線的樣式(dashed/dotted/solid/none等)，寬度，顏色；
5.column-span:none/all表示標題只在本欄顯示/橫跨所有欄顯示；
6.column-fill:auto/balance表示欄的高度是否統一。Auto表示隨內容變化，balance表示以內容最多的那列高度統一；
12.表格的屬性：
1）.表格的常用屬性——
1.邊框屬性——border; css中只有table,td纔有邊框屬性。
2.尺寸屬性——width,height;
3.框模型——padding;
4.文本屬性——1.font-*; 2.text-*;3.line-height;
5.單元格的數據垂直對齊方式——vartical-align:top/center/bottom;
2）.表格的特有屬性——
1.邊框合併；即將雙線邊框合併成單線邊框。屬性——border-collspase: sparate/collspase; 表示默認值，合併成單線邊框。
2.邊框邊距；相鄰邊框的距離。屬性——border-spading:x y; 表示水平，垂直間距，需要在邊框合併默認值下纔能有效。
3.表格標題的位置——caption-side:top/bottom;
4.顯示規則，即td寬高由內容還是設定值決定——table-layout:auto/fixed; 分別表示默認值以內容決定，有設定tr值決定。
13.定位：定位的分類：
1.普通流定位（即文檔流定位），默認定位方式。
2.浮動定位（專門解決多個塊級元素在一行顯示）。
3.相對定位。
4.絕對定位。
5.固定定位。
1）.普通流定位：特點：
1、每個元素在頁面上都有自己的空間。
2、每個元素都是從其父元素的左上角開始排列。
3、頁面中的塊級元素，都是按照從上到下的方式逐個排列，每個元素獨佔一行。
4、頁面中的每個行內元素 和 行內塊元素都是按照從左到右的方式來排列的。
2）.浮動定位：屬性——float: left/right/none;特徵——
1、元素會被排除在文檔流之外(即脫離文檔流),元素就不再佔據頁面空間，其它未浮動元素要上前佔位。
2、浮動元素會停靠在其父元素的左邊或右邊，或其它已浮動元素的邊緣上。
3、浮動元素只能在當前行浮動。
4、浮動定位解決的問題:讓多個塊級元素在一行內顯示。
效果——
1、父元素顯示不下所有浮動子元素時，最後一個將換行，但是，有可能被卡住。
2、元素一旦浮動起來之後，寬度將以內容爲準(未指定寬度的情況下)。
3、元素一旦浮動起來之後，將變成塊級元素（允許修改尺寸，能正常處理外邊距）行內元素 和 行內塊元素 浮動起來之後，就變成塊級元素。
4、文本，行內元素，行內塊元素是採用環繞的方式來排列的，是不會被浮動元素壓在底下的，而是會巧妙的避開浮動元素。
清除浮動——清除前面元素浮動對本元素產生的位置的影響。
1. 屬性：clear:none/left/right/both;分別表示默認值不清
除，清除前面元素左浮動帶來的影響，右浮動帶來的影響，清除浮動帶來的影響。
2. 浮動元素對父元素高度的影響及其解決方案。顯示方式——屬性——display:none/block/inline/inline-block/table;分別表示默認值不顯示，將元素邊塊級，將元素邊行內級，將元素邊行內塊級，將元素邊table一樣的表現形式。
顯示效果——
（1）顯示/隱藏屬性——visibility;不脫離文檔流，仍然佔據空間。取值——visible(默認值，可見的) / hidden (隱藏);
（2）透明度屬性——opacity;改變整個元素的透明度。取值——0.0~1.0之間的小數。
（3）垂直對齊屬性——vertical-align;設置td,img,行內塊級元素2端的文本相對於它們的垂直對齊方式。img後垂直對齊取值——top/middle/bottom/baseline(默認值，基線對齊)；在網頁開發過程中，通常會將頁面所有圖片的。默認值baseline修改成其他值，消除基線對齊。用於圖片後面文字的對齊方式。
光標——鼠標懸停在元素上時，鼠標的表現形式，如小手，沙漏，旋轉，十字----屬性—cursor:default(默認值)/pointer(小手)/crosshair(十字)/text(I)/wait(等待旋轉圖形)/help(幫助)。
3）.相對/絕對/固定定位：
1.屬性——position:static(默認值)/relative/absolute/fixed;分別表示默認值，相對定位，絕對定位，固定定位。
2.偏移屬性——top/bottom/right/left:取值以px爲單位的正負數值。並以其爲基準線的移動。
3.相對定位——元素會相對於它自己原來的位置，偏移某個距離。相對定位的元素，原位置（空間）會被保留，不允許被其他元素所佔據。語法： position:relative;top/right/left/bottom: 正負值。
4.絕對定位——
（1）.特證：脫離文檔流，不佔頁面空間，後面元素上前補位。絕對定位的元素會相對於離它最近的，已定位的祖先元素去實現位置的初始化和偏移。如果不存在已定位的祖先的元素，那麼就相對於body取實現位置的初始化和偏移（其top/right/bottom/left都是相對於祖先已定位元素或body左上角的偏移位 置）。
（2）.語法：position:absolute;top/right/left/bottom: 正負值。
（3）.特點：絕對定位的元素會脫離文檔流，所有會壓在其他元素之上。絕對元素會變成塊級元素。絕對定位的元素，margin可以正常使用，在正常下，margin:0 auto; 會失
效，但是在該絕對元素top/right/left/bottom:取值全都是0的非正常情況下下margin:auto;有效。
5.固定定位——
1）.讓元素始終固定在頁面的某個位置處，不受到滾動條滾動而範式位置的影響。
2）.語法：position:fixed;配合top/right/left/bottom實現位置的改變。
3）.特點：脫離文檔流，固定元素會變塊級。可修改尺寸。永遠都是相對於body實現位置的固定。
6堆疊順序：
1）.改變元素定位方式之後，有可能會發生堆疊效果，實際上是由堆疊順序來決定排位效果的。如紙牌遊戲出牌那張高出其他張。
2）.語法：屬性——z-index:取值爲沒有單位的數值，數值越大，越靠前，越面向用戶更近。前後移動，取值爲負表示正常之下。
3）.注意：必須是已定位元素才能用z-index。如果z-index相同的話，則後出現的在上面。在父子級元素中，永遠都是子壓在父元素之上，不受到z-index控制的。
