CSS: 級聯樣式表
優勢：
内容與表現分離
網頁的表現統一，容易修改
豐富的樣式，使得頁面布局更加靈活
減少網頁的代碼量，增加網頁的浏覽速度，節省網絡帶寬
運用獨立于頁面的CSS，有利于網頁被搜尋引擎收錄
行内樣式：
<p style="color: red;">我叫 xxx</p>
内部樣式表(一般書寫在head标簽内部)：
<style type="text/css">
p{ color: red;}
</style>
外部樣式:
<link href="css/index.css" rel="stylesheet" type="text/css">
優先級别：
行内樣式 > 内部樣式表 >外部樣式表
标簽選擇器：
P{ color:red;}
類選擇器（class）:
.xxx{ …}
ID選擇器(id):
#xxx{ …}
優先級：
ID選擇器>類選擇器>标簽選擇器
字型樣式
font-family 設定字型類型 font-family:"隸書";
font-size 設定字型大小 font-size:12px;
font-weight 設定字型的粗細 font-weight:bold;
font 在一個聲明中設定所有字型屬性 font: bold 36px "宋體";
文本屬性
屬性 含義 舉例
color 設定文本顔色 color:#00C;
text-align 設定元素水準對齊方式 text-align:right;
text-indent 設定首行文本的縮進 text-indent:20px;
line-height 設定文本的行高 line-height:25px;
text-decoration 設定文本的裝飾 text-decoration:underline;
text-shadow 設定文本陰影 text-shadow:30px -10px 2px red;
//4個參數分别表示陰影向右偏移、向下偏移、陰影模糊度、陰影顔色
行級元素：
1.與其他行内元素共享一行
2.不能修改width、height屬性，大小由内容撐開
3.padding屬性 top、right、botto、left設定都有效；margin屬性隻有left、right設定有效
a 、 img 、 span …
塊級元素：
1.獨占一行，在不設定自己的寬度的情況下，塊級元素會預設填滿父級元素的寬度
2.可以修改width、height屬性
3.padding、margin四個方向的值設定均有效
div 、p 、h1~h6 …
display：
none： 隐藏元素，不顯示
block：以塊級元素的特點顯示
inline：以行級元素特點顯示
inline-block：使元素變成行内塊級元素，結合了行内元素和塊級元素的特性（不獨占一行的塊級元素），即
1.與其他行内元素共享一行
2.可以修改width、height屬性
3.padding、margin四個方向的值設定均有效
僞類樣式：
僞類名稱 含義 示例
a:link 未單擊通路時超連結樣式 a:link{color:#9ef5f9;}
a:visited 單擊通路後超連結樣式 a:visited {color:#333;}
a:hover 滑鼠懸浮其上的超連結樣式 a:hover{color:#ff7300;}
a:active 滑鼠單擊未釋放的超連結樣式 a:active {color:#999;}
設定僞類的順序：a:link->a:visited->a:hover->a:active
設定滑鼠樣式：
cursor:pointer /設定滑鼠樣式為手指/
清單樣式：
List-style-type：設定清單格式（清單每一項前面的符号），設定（實心圓、空心圓、正方形…），如果設定為none，表示清單項沒有符号
list-style-image:設定清單項為自定義圖檔（需注意圖檔的路徑）
背景：
background-color：背景顔色
background-image:設定背景圖檔
background-repeat:設定背景圖檔是否重複
background-position:設定背景圖檔位置
background-size：設定背景圖檔大小（拉伸…）
背景顔色漸變：
線性漸變
徑向漸變
CSS動畫
translate()：平移函數，基于X、Y坐标重新定位元素的位置
右平移20像素：
transform: thranslate(20px,0px)
scale()：縮放函數，可以使任意元素對象尺寸發生變化
縮放0.8倍：
transform: scale(0.8)
rotate()：旋轉函數，取值是一個度數值
旋轉45度：
transform: rotate(45deg)
skew()：傾斜函數，取值是一個度數值
水準傾斜45度：
transform: skew(45deg,0deg)
合在一起寫：空格隔開
transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等
CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡
過渡動畫速度：
ease：速度由快到慢（預設值）
linear：速度恒速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隐效果）
ease-in-out：速度先加速再減速（漸顯漸隐效果）
設定過渡步驟：
在預設樣式中聲明元素的初始狀态樣式
聲明過渡元素最終狀态樣式，如懸浮狀态
在預設樣式中通過添加過渡函數，添加一些不同的樣式
animation實作動畫主要由兩個部分組成
1.通過類似Flash動畫的關鍵幀來聲明一個動畫
2.在animation屬性中調用關鍵幀聲明的動畫實作一個更為複雜的動畫效果
盒子模型
Border 邊框
border: solid 1px red
;` 邊框類型 邊框粗細 邊框顔色
margin：外邊距 （網頁居中）
設定他的上外邊距15px 左外邊距 10px 右外邊距 20px 下外邊距5px；
margin：15px 20px 5px 10px
； 順時針（上右下左）
margin： 15px 20px；
上下外邊距 15px ，左右外邊距20px；
margin： 0px auto；
設定盒子居中（必須要有寬度）
padding：内邊距
設定他的上内邊距15px 左内邊距 10px 右内邊距 20px 下内邊距5px；
padding：15px 20px 5px 10px；
順時針（上右下左）
padding： 15px 20px；
上下内邊距 15px ，左右内邊距20px；
盒子模型總尺寸=border+padding+margin+内容寬度
圓角邊框
border-radius: 15px;
四個角都設定15px
border-radius: 15px 10px 20px 5px
;`順序依次為左上、右上、右下、左下（順時針）
盒子陰影（用法同text-shadow）：