一、Css2 高階知識（常用）
1. css 優先權
優先權（從低到高）
瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標簽內部）
內聯樣式（在 HTML 元素內部）
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味着它將優先於以下的樣式聲明： 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
2. 背景定位（background-position）
可以利用 background-position 屬性改變圖像在背景中的位置。
body
{
background-image:url('/img/bg_03.png');
background-repeat:no-repeat;
background-position:50px 100px;
}
3. 縮進文本 （text-indent）
把 Web 頁面上的段落的第一行縮進，這是一種最常用的文本格式化效果。
CSS 提供了 text-indent 屬性，該屬性可以方便地實現文本縮進。
p {text-indent: 5em;}
同時也可用做文本信息隱藏（-99999px）
4. 字（單詞）間隔 （word-spacing）
p.spread {word-spacing: 30px;}
5. 字母間隔（letter-spacing）
h1 {letter-spacing: -2px;}
6. 字符大小寫轉換（text-transform）
none（默認無操作）
uppercase（全大寫）
lowercase（全小寫）
capitalize（首字母大寫）
h1 {text-transform: uppercase;}
7. 處理空白符（white-space）
1. 值 nowrap（防止元素中的文本換行）
p{white-space: nowrap;}
2. 單行文本溢出顯示 ...（text-overflow）
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
8. table 表格（border-collapse 單一邊框）
border-collapse 屬性設置是否將表格邊框折疊為單一邊框：
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
9. 選擇子元素（>）
如果您不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。
例如，如果您希望選擇只作為 h1 元素子元素的 strong 元素，可以這樣寫：
h1 > strong {color:red;}
這個規則會把第一個 h1 下面的兩個 strong 元素變為紅色，但是第二個 h1 中的 strong 不受影響：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
10. 選擇相鄰兄弟 （＋）
如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
例如，如果要增加緊接在 h1 元素后出現的段落的上邊距，可以這樣寫：
h1 + p {margin-top:50px;}
11. 偽類 (Pseudo-classes)
CSS 偽類用於向某些選擇器添加特殊的效果。
1. 錨偽類
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
2. CSS2 - :first-child 偽類（第一個子元素）
可以使用 :first-child 偽類來選擇元素的第一個子元素。
<style type="text/css">
p:first-child{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
3. :first-line 偽元素（首行）
"first-line" 偽元素用於向文本的首行設置特殊樣式。
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
"first-line" 偽元素只能用於塊級元素。
4. :first-letter 偽元素（首字母）
"first-letter" 偽元素用於向文本的首字母設置特殊樣式：
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
5. CSS2 - :before 偽元素
":before" 偽元素可以在元素的內容前面插入新內容。
h1:before {
content:url(logo.gif);
}
6. CSS2 - :after 偽元素
":after" 偽元素可以在元素的內容之后插入新內容。
h1:after {
content:url(logo.gif);
}
12. 使用 margin 屬性來水平對齊
可通過將左和右外邊距設置為 "auto"，來對齊塊元素。
.center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
13. 改變光標 （cursor:pointer）
span.pointer {cursor:pointer;}
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
14. 透明度 （opacity）
定義透明效果的 CSS3 屬性是 opacity。
img{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。
15. 顏色透明（RGBA）
background: rgba(0, 0, 0, 0.6) ;
二、Css3 新特性
CSS3 標准
W3C 仍然在對 CSS3 規范進行開發。
不過，現代瀏覽器已經實現了相當多的 CSS3 屬性。
１. CSS3 圓角邊框（border-radius）
div{
text-align:center;
border:2px solid #a1a1a1;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
2. CSS3 邊框陰影（box-shadow）
語法：box-shadow: h-shadow v-shadow blur spread color inset;
div{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
3. CSS3 文本陰影（text-shadow）
您能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：
h1{
text-shadow: 5px 5px 5px #FF0000;
}
4. CSS3 自動換行（word-wrap）
在 CSS3 中，word-wrap 屬性允許您允許文本強制文本進行換行 - 即使這意味着會對單詞進行拆分。
允許對長單詞進行拆分，並換行到下一行：
p {word-wrap:break-word;}
5. CSS3 字體（@font-face）
使用您需要的字體
在新的 @font-face 規則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
<style>
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div {
font-family:myFirstFont;
}
</style>
6. CSS3 2D 轉換
Internet Explorer 10、Firefox 以及 Opera 支持 transform 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
注釋：Internet Explorer 9 需要前綴 -ms-。
通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
1. translate()方法 （位置移動）
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數：
div {
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
2. rotate()方法（順時針旋轉角度）
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
3. scale() 方法（改變尺寸）
通過 scale() 方法，元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數：
div {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
4. skew() 方法（元素翻轉角度）
通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：
div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。
5. matrix() 方法（2D 轉換方法組合）
matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。
7. CSS3 3D 轉換
Internet Explorer 10 和 Firefox 支持 3D 轉換。
Chrome 和 Safari 需要前綴 -webkit-。
Opera 仍然不支持 3D 轉換（它只支持 2D 轉換）。
1. rotateX() 方法（X 軸旋轉）
通過 rotateX() 方法，元素圍繞其 X 軸以給定的度數進行旋轉。
div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
2. rotateY() 方法（Y 軸旋轉）
通過 rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
div {
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
8. CSS3 過渡（transition）
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
1. transition: width
應用於寬度屬性的過渡效果，時長為 2 秒：
div {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover {
width:300px;
}
2. width 2s, height 2s, transform 2s（多項改變）
如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開：
div {
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
所有的轉換屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 | 3 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 | 3 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 | 3 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 | 3 |
3. 使用所有過渡屬性
div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
4. 簡寫的 transition （property，duration，timing-function，delay）
屬性的名稱，花費的時間，時間曲線，何時開始
div {
transition: width 1s ease 2s;
/* Firefox 4 */
-moz-transition:width 1s ease 2s;
/* Safari and Chrome */
-webkit-transition:width 1s ease 2s;
/* Opera */
-o-transition:width 1s ease 2s;
}
9. CSS3 動畫
通過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
CSS3 @keyframes 規則
如需在 CSS3 中創建動畫，您需要學習 @keyframes 規則。
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
1. 關鍵字 “from”“to”
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
/* Firefox */
@-moz-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Opera */
@-o-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：
1. 規定動畫的名稱
2. 規定動畫的時長
把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
2. 0% 和 100% 選擇器
必須定義動畫的名稱和時長。如果忽略時長，則動畫不會允許，因為默認值是 0。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
例：當動畫為 25% 及 50% 時改變背景色，然后當動畫 100% 完成時再次改變：
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Firefox */
@-moz-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Opera */
@-o-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
3. 改變背景色和位置：
@keyframes myfirst{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
瀏覽器兼容代碼省略...
下面的表格列出了 @keyframes 規則和所有動畫屬性：
| 屬性 | 描述 | CSS |
|---|---|---|
| @keyframes | 規定動畫。 | 3 |
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | 3 |
| animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | 3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 |
| animation-fill-mode | 規定對象動畫時間之外的狀態。 | 3 |
4. 使用所有動畫屬性
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
瀏覽器兼容代碼省略...
}
5. 使用簡寫的動畫 animation 屬性
動畫的名稱,一個周期所花費的秒,速度曲線,何時開始,播放的次數
div{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
10. CSS3 多列
通過 CSS3，您能夠創建多個列來對文本進行布局 - 就像報紙那樣！
1. CSS3 創建多列（column-count）
把 div 元素中的文本分隔為三列：
div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
2. CSS3 規定列之間的間隔（column-gap）
規定列之間 40 像素的間隔：
div{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
3. CSS3 列規則（column-rule）
規定列之間的寬度、樣式和顏色規則：
div{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
11. CSS3 用戶界面
在 CSS3 中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。
1. CSS3 Resizing（可調整大小）
規定 div 元素可由用戶調整大小：
div{
resize:both;
overflow:auto;
}
2. CSS3 Box Sizing
box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。
border 或 padding的數值計入父寬高內（意思為不會增加父容器寬度）。
規定兩個並排的帶邊框方框：
div{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
3. CSS3 Outline Offset
outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪制輪廓。
規定邊框邊緣之外 15 像素處的輪廓：
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
三、編寫 CSS 注意事項
1. 修飾選擇器（盡量少用）
能寫.nav{}就盡量不要寫 ul.nav{}。過分修飾選擇器將影響性能，影響 class 復用性，會增加選擇器私有度。這些都應當竭力避免的。
如果想描述我們規划的 class 作用范圍，可以在選擇器前加上注釋，如下寫法：
/*ul*/
.nav{}
這樣我們就能在不影響代碼私有度的前提下獲知 class 作用范圍。
2. 布局（寬度和高度）
所有內部組件都不要聲明寬度，而由其外層父容器塊（格柵系統）來決定。理想情況下，格柵系統應當用百分比設定。
堅決不要聲明高度。高度應當僅用於尺寸已經固定的東西，例如圖片。在 p，ul，div 等元素上不應當聲明高度。如果需要的話可以寫 line-height，這個更加靈活。。
3. 簡寫（謹慎使用）
編寫像
background:red;
這樣的屬性的確很省事，但是你這么寫的意思其實是同時聲明
background-image:none;
background-position:top left;
background-repeat: repeat;
background-color:red;
最優應當改為
background-color:red;
類似的，像 margin:0; 這樣的聲明的確簡潔清爽，但是還是應當盡量寫清楚。如果你只是想修改底邊邊距，就要具體一些，寫成 margin-bottom:0;。
簡寫雖然是好東西，但是注意切勿濫用。
4. ID（CSS 里堅決不要用 ID）
在 HTML 里 ID 可以用於 JS 以及錨點定位，但是在 CSS 里只要用 class，一個 ID 也不要用。
Class 的優勢在於復用性，而且私有度也並不高。私有度非常容易導致問題，所以將其降低就尤為重要。ID 的私有度是 class 的 255 倍，所以在 CSS 中堅決不要使用。
5. 選擇器（保持選擇器簡短高效）
- 結構復雜的選擇器將會影響性能。（如
.sidebar h3 span{}為三層，.content ul p a{}是四層），層級越深瀏覽器的消耗就越大。選擇器應當盡量簡短，更好的辦法是直接給你想要添加樣式的元素直接添加一個 class。 - class 名則不應當過於簡略，例如
.user-avatar就遠比.usr-avt好。
6. !important（優先級高，一般情況不要用）
用 !important 提升優先級也可以，例如如果你要讓某條規則一直生效的話，可以用 .error{ color:red !important; }。
避免主動使用 !important。例如 CSS 寫得很復雜時不要用它來取巧，要好好整理並重構之前的部分，保持選擇器簡短並且避免用 ID 將效果拔群。
7. 魔數與絕對定位（「湊巧有效果」的數字）
魔數（Magic Number）是指那些「湊巧有效果」的數字，這東西非常不好，缺乏拓展性。
例如 .dropdown-nav li:hover ul{ top:37px; } 把下拉菜單移動下來，遠非良策，因為這里的 37px 就是個魔數。37px 會生效的原因是因為這時 .dropbox-nav 碰巧高 37px 而已。
這時你應該用 .dropdown-nav li:hover ul{ top:100%; }，也即無論 .dropbox-down 多高，這個下拉菜單都會往下移動 100%。
每當你要在代碼中放入數字的時候，請三思而行。
8. Debugging（調試）
如果你要解決 CSS 問題的話，先把舊代碼拿掉再寫新的。如果舊的 CSS 中有問題的話，寫新代碼是解決不了的。
把 CSS 代碼和 HTML 部分刪掉，直到沒有 BUG 為止，然后你就知道問題出在哪里了。
有時候寫上一個 overflow:hidden 或者其它能把問題藏起來的代碼的確效果立竿見影，但是 overflow 方面可能根本就沒問題。所以要治本，而不是單純治標。