css樣式全稱為Cascading Style Sheets，“層疊樣式表”，簡稱樣式表。（層疊的意思就是“權重”、“覆蓋”、“繼承”，通過良好的層級命名更好的實現效果，以更少的程式碼實現更多的功能）

引入樣式的三種方式：
1. 內部樣式：在head內部應用
格式：<style type=”text/css”>選擇器 { 屬性：屬性值； }</style>
2. 外部樣式：
新建一個css字尾的檔案並儲存到網站對應目錄
將style中的內容，全部剪下到css檔案中；
將新建的css檔案與html檔案關聯起來，右鍵-css樣式-附加樣式表。（注意檢查圖片路徑）
3. 行內樣式（內聯樣式）：
<div

常規樣式預設：
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,textarea{padding:0;margin:0;}
body{font-family: Arial,”Microsoft YaHei”,”宋體”}
ul,ol,li{list-style:none;}
table { border-collapse:collapse; border-spacing:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration:none;cursor: pointer;}
img,input{border:none;}
i{font-style:normal;}
strong{font-weight: normal;}
.fl{float:left;}（樣式追加）
.fr{float:right;}
.clear{clear:both;}

常規樣式屬性和特點：
1、 width : 數值px； 寬度
2、 height : 數值px； 高度
3、 浮動 float:left | 右浮動 right | 取消浮動 none
原理：
1） 做水平佈局時所有元素都需要設定浮動
2） 元素設定浮動後，本身是不會佔位了，需要給父級盒子固定高度，這樣下面的元素就不會往上跑了
3） 擁有浮動元素的寬度之和不能大於父級盒子寬度，否則最後一個盒子就是會擠下去。
4） 盒子加上浮動屬性後，寬度會從100%變為自適應。
4、 外邊框線：border:1px solid #333；
格式：border：線的粗細 線條型別 顏色值；
線條型別：solid實線 | dashed虛線 | dotted點狀線 | double雙線（3px）
5、 背景色：background-color:#色值； 也可以直接指定顏色單詞
6、 文字顏色：color:#色值； 也可以直接指定顏色單詞
7、 外間距：margin
元素實現居中的條件：給盒子一個固定寬度值，同時寫上margin:0 auto;
8、 背景圖片：background-image：url(路徑地址)； 儲存時命名不能是中文，否則引用時就是亂碼。
a) 背景圖不會佔位，所有背景圖片需要給高度；
b) 預設會在盒子整個範圍內水平和垂直方向重複平鋪；
c) 背景圖是寫在樣式中的，只是起到了修飾的作用。（複合樣式：background）
9、 文字對齊方式：text-align: center; (只會對文字與圖片生效)
left左對齊 | center居中對齊 | right右對齊
10、背景圖重複：background-repeat：
repeat-x水平方向平鋪 | repeat-y垂直方向平鋪 | no-repeat不重複平鋪
11、背景圖定位：background-position: 水平方向 垂直方向；
水平方向X軸：left左 | center中 | right右 | 絕對畫素值
垂直方向Y軸：top上 | center中 | bottom下 | 絕對畫素值
12、 外間距：margin – 盒子邊框與盒子邊框之間的距離
當給一個值時：指的是四個方向；
當給兩個值時：指的是上下 左右；
當給三個值時：指的是 上 左右 下；
當給四個值時：指的是上 右 下 左；
簡寫的同時也可以單獨定義：
margin-top:上間距
margin-righ:右間距
margin-bottom:下間距
margin-left:左間距
13、內填充: padding –盒子邊框與內容之間的距離
當給一個值時：指的是四個方向；
當給兩個值時：指的是上下 左右；
當給三個值時：指的是 上 左右 下；
當給四個值時：指的是上 右 下 左；
簡寫的同時也可以單獨定義：
padding-top:上填充
padding-righ:右填充
padding -bottom:下填充
padding -left:左填充
注意點：如果盒子有固定尺寸應用padding後，需要減去padding值，因為padding值會使自身變大。
經驗：當margin和padding同時生效時，優先使用padding。
14、line-height: 20px; 文字行高；
作用：盒子設定行高後，文字會在行高的範圍內垂直方向居中。
15、字母轉換：text-transform
capitalize 首字母大寫 | uppercase全部大寫 | lowercase全部小寫
16、字號大小：font-size:14px;
17、字型加粗：font-weight:bold;
normal 不加粗 | bolder 加粗 | bold 加粗
18、字型斜體：font-style:normal;
normal 正常 | italic 斜體 ｜oblique 傾斜
19、字型族：
網頁安全字：中文：宋體，微軟雅黑，黑體；
英文：arial，其他羅馬字
Font-family : arial,”微軟雅黑”；
a) 多個字型之間用逗號隔開，後面字型屬於備用字型；
b) 中間有空格的英文字型或中文字型，需要加引號；
c) 中英文混排時，一般英文字型放在前面。
20、文字裝飾線：text-decoration:none;
Underline下劃線 | line-through刪除線 | overline上劃線
21、顯示為（轉換）display:block;
block塊級元素 | inline 行級元素 |
22、css3屬性，相容IE9+以上
background-color:rgba(0,0,0,0.5) 網頁的三原色
r – red 紅；g – green 綠；b – blue 藍
a – alpha 透明度，取值範圍0（完全透明）- 1（完全不透明）
23、position定位：應用場景當網頁出現內容覆蓋時，使用定位技術
absolute 絕對定位
特點：
1、 元素設定絕對定位後，盒子寬度會變成自適應，並且沒有佔位。
2、 預設以遊覽器的四個角為座標原點，通過left，right，top，bottom來定位的。
relative相對定位
特點：
1、 元素設定相對定位後盒子依然是佔位的
2、 絕對定位盒子會以定位的盒子作為參照進行精確定位
fixed固定定位
1、 元素設定固定定位後，盒子寬度會變成自適應，並且沒有佔位；
2、 預設以遊覽器的四個角為座標原點，通過left，right，top，bottom來定位的。
3、不會隨著頁面內容而滾動。
層級關係：z-index 設定定位元素的層疊關係
1、 只對定位元素生效
2、 值越大，元素的級別就越高，可以為（如：-2）負值
3、 注意這裡數值不需要加單位。
23、盒陰影
box-shadow：X軸偏移量 Y軸偏移量 陰影的羽化值 陰影的擴充套件值 顏色 內陰影（inset）；