第一章 CSS入門
CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10以后也開始全面支持CSS3了。
在編寫CSS3樣式時，不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的。
| 前綴 | 瀏覽器 |
|---|---|
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
第2章 邊框
2-1 圓角效果 border-radius
使用方法：border-radius:10px; /* 所有角都使用半徑為10px的圓角 */
border-radius: 5px 4px 3px 2px; /*四個半徑值分別是左上角、右上角、右下角和左下角，順時針 */
單位：還可以用百分比或者em，但兼容性目前還不太好。
2-2 陰影 box-shadow（一）
box-shadow是向盒子添加陰影。支持添加一個或者多個。
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴展半徑] [陰影顏色] [投影方式];
注意：inset 可以寫在參數的第一個或最后一個，其它位置是無效的。
2-3 陰影 box-shadow（二）
1、陰影模糊半徑與陰影擴展半徑的區別
陰影模糊半徑：此參數可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；
陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；
2、X軸偏移量和Y軸偏移量值可以設置為負數
2-4 為邊框應用圖片 border-image
第3章 顏色相關
3-1 顏色之RGBA
RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。
語法：
color：rgba(R,G,B,A)
//以上R、G、B三個參數，正整數值的取值范圍為：0 - 255。
//百分數值的取值范圍為：0.0% - 100.0%。
//超出范圍的數值將被截至其最接近的取值極限
//并非所有瀏覽器都支持使用百分數值。
//A為透明度參數，取值在0~1之間，不可為負值。
//代碼實例:
background-color:rgba(100,120,60,0.5);
3-2 漸變色彩
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。
線性漸變：
例子
background-image:linear-gradient(to left, red, orange,
yellow,green,blue,indigo,violet);
第4章 文字與字體
4-1 text-overflow 與 word-wrap
text-overflow用來設置是否使用一個省略標記（...）標示對象內文本的溢出。
但是text-overflow只是用來說明文字溢出時用什么方式顯示，要實現溢出時產生省略號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略號的效果，代碼如下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
word-wrap也可以用來設置文本行為，當前行超過指定容器的邊界時是否斷開轉行。
4-2 嵌入字體@font-face
@font-face能夠加載服務器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。
語法：
@font-face {
font-family : 字體名稱;
src : 字體文件在服務器上的相對或絕對路徑;
}
這樣設置之后，就可以像使用普通字體一樣在（font-*）
中設置字體樣式。
比如：
p {
font-size :12px;
font-family : "My Font";
/*必須項，設置@font-face中font-family同樣的值*/
}
4-3 文本陰影text-shadow
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離，其值為正值時陰影向右偏移，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反之向上偏移；
Blur：是指陰影的模糊程度，其值不能是負值，如果值越大，陰影越模糊，反之陰影越清晰，如果不需要陰影模糊可以將Blur值設置為0；
Color：是指陰影的顏色，其可以使用rgba色。
第5章 與背景相關的樣式
5-1 background-origin
設置元素背景圖片的原始起始位置。
語法：
background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從**邊框**，
還是**內邊距（默認值）**，
或者是**內容區域**開始顯示。
5-2 background-clip
用來將背景圖片做適當的裁剪以適應實際需要。
語法：
background-clip ： border-box |
padding-box |
content-box |
no-clip
5-3 background-size
設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size: auto |
<長度值> | <百分比> |
cover | contain
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
5-4 multiple backgrounds
第6章 征服CSS3選擇器（上）
靈活運用強大的CSS3選擇器，學會選擇器的使用，可以直接將樣式與元素綁定起來，
之前我們需要使用JavaScrip實現的功能，現在只需要用CSS3就能輕松搞定。
6-1 屬性選擇器
6-2 結構性偽類選擇器—root
:root
選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
6-3 結構性偽類選擇器—not
:not
選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫成：
input:not([type="submit"]){
border:1px solid red;
}
6-4 結構性偽類選擇器—empty
:empty選擇器表示的就是空。
6-5 結構性偽類選擇器—target
:target選擇器稱為目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素。
html代碼：
<h2><a href="#brand">Brand</a></h2>
<div id="brand"> content for Brand</div>
<h2><a href="#jake">Brand</a></h2>
<div id="jake"> content for jake</div>
<h2><a href="#aron">Brand</a></h2>
<div id="aron"> content for aron</div>
css代碼：
#brand:target {
background: orange; color: #fff;
}
#jake:target {
background: blue; color: #fff;
}
#aron:target {
background: red; color: #fff;
}
6-6 結構性偽類選擇器—first-child
6-7 結構性偽類選擇器—last-child
6-8 結構性偽類選擇器—nth-child(n)
6-9 結構性偽類選擇器—nth-last-child(n)
6-10 first-of-type選擇器
“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。
6-11 nth-of-type(n)選擇器
當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數也一樣，可以是具體的整數，也可以是表達式，還可以是關鍵詞。
6-12 last-of-type選擇器
6-13 nth-last-of-type(n)選擇器
6-14 only-child選擇器
通過“:only-child”選擇器，來控制僅有一個子元素的背景樣式
6-15 only-of-type選擇器
“:only-of-type”選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素
第7章 征服CSS3選擇器（下）
UI元素狀態偽類選擇器也是CSS3選擇器模塊組中的一部分，
此類選擇器主要運用于form表單元素上，
用來提高網頁的人機交互、操作邏輯以及頁面的整體美觀。
7-1 :enabled選擇器
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態，比如輸入框，密碼框，復選框等。在默認情況之下，這些表單元素都處在可用狀態。
7-2 :disabled選擇器
<input type="text" name="name" id="name"
placeholder="我是不可用輸入框" disabled />
7-3 :checked選擇器
:checked”表示的是選中狀態。
7-4 ::selection選擇器
::selection{
background: orange;
color: white;
}
::-moz-selection{
background: orange;
color: white;
}
7-5 :read-only選擇器
“:read-only”偽類選擇器用來指定處于只讀狀態元素的樣式。
<label for="address">地址:</label>
<input type="text" name="address" id="address"
placeholder="中國上海" readonly="readonly" />
//CSS代碼：
input[type="text"]:read-only{
border-color: #ccc;
}
7-6 :read-write選擇器
“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處于非只讀狀態時的樣式。
7-7 ::before和::after
::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
.clearfix::before,
.clearfix::after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
第8章 CSS3中的變形與動畫（上）
徹底分清 Transform 、Transition、 Animations 三兄弟
8-1 變形--旋轉 rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
寫法
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
8-2 變形--扭曲 skew()
Skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3、skewY(y)僅使元素在垂直方向扭曲變形**（Y軸扭曲變形）
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg) ;
transform:skew(45deg);
8-3 變形--縮放 scale()
**縮放 scale()函數 **讓元素根據中心原點對對象進行縮放。
縮放 scale 具有三種情況：
1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5);
transform: scale(1.5,0.5);
8-4 變形--位移 translate()
translate()函數可以將元素向指定的方向移動，類似于position中的relative。或以簡單的理解為，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
translate我們分為三種情況：
1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
2、translateX(x)僅水平方向移動（X軸移動）
3、translateY(Y)僅垂直方向移動（Y軸移動）
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
8-5 變形--矩陣 matrix()
**matrix() **是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。
-webkit-transform:matrix(1,0,0,1,100,100);
transform: matrix(1,0,0,1,100,100);
8-6 變形--原點 transform-origin
任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。
transform-origin取值和元素設置背景中的background-position取值類似
origin.jpg
-webkit-transform-origin: left top;
transform-origin: left top;
8-7 動畫--過渡屬性 transition-property
8-8 動畫--過渡所需時間 transition-duration
8-9 動畫--過渡函數 transition-timing-function
8-10 動畫--過渡延遲時間 transition-delay
早期在Web中要實現動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標的單擊、獲得焦點，被點擊或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。
transition: all 3s ease-in-out .8s;
(所有屬性，持續3秒，
先加速再減速變化，延遲0.8秒再執行變化，對于零可以省略)
第9章 CSS3中的變形與動畫（下）
animation實現動畫效果主要由兩個部分組成：首先通過類似Flash動畫中的關鍵幀來聲明一個動畫，
然后在animation屬性中調用關鍵幀聲明的動畫，從而實現一個更為復雜的動畫效果。
9-1 Keyframes介紹
Keyframes
被稱為關鍵幀，其類似于Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
9-2 調用動畫
animation-name屬性主要是用來調用** @keyframes** 定義好的動畫。
9-3 設置動畫播放時間
animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒
9-4 設置動畫播放方式
animation-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推進來改變屬性值的變換速率
它和transition中的transition-timing-function一樣，
具有以下幾種變換方式：
ease,ease-in,ease-in-out,ease-out,
linear和cubic-bezier。
9-5 設置動畫開始播放的時間
animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點
9-6 設置動畫播放次數
animation-iteration-count屬性主要用來定義動畫的播放次數。
語法規則：
animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常為整數，但也可以使用帶有小數的數字，其默認值為1，這意味著動畫將從開始到結束只播放一次。
2、如果取值為infinite，動畫將會無限次的播放。
9-7 設置動畫播放方向
animation-direction屬性主要用來設置動畫播放方向
9-8 設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態。
9-9 設置動畫時間外屬性
第10章 布局樣式相關
10-1 多列布局——Columns
10-2 多列布局——column-width
10-3 多列布局——column-count
10-4 列間距column-gap
10-5 列表邊框column-rule
10-6 跨列設置column-span
10-7 盒子模型
10-8 伸縮布局（一）
10-9 伸縮布局（二）
第11章 Media Queries 與Responsive 設計
傳說中的響應式設計，根據瀏覽器的窗口大小選擇使用不同的樣式。
11-1 Media Queries——媒體類型（一）
11-2 media queries——媒體類型（二）
11-3 Media Queries使用方法
11-4 Responsive設計（一）
11-5 Responsive設計（二）
11-6 Responsive布局技巧
11-7 Responsive設計——meta標簽
11-8 Responsive設計——不同設備的分辨率設置
第12章 用戶界面與其它重要屬性
輪廓相關樣式、resize屬性、initial屬性
12-1 自由縮放屬性resize
12-2 CSS3外輪廓屬性
12-3 CSS生成內容
12-4 制作3D旋轉視頻展示區
