做爲通往前端大神之路的普通的一隻學鳥，最近接觸了同樣稍微高逼格一點的神器，特與你們分享~css
他是誰？html
做爲前端開發人員，你確定對css很熟悉，可是你知道css能夠自定義嗎？你們都知道，js中能夠自定義變量，css僅僅是一個標記語言，不是編程語言，所以不能夠自定義變量，也不能夠引用等等。做爲一名程序員，不能編程怎麼能忍受，這就是sass存在的意義，工業化生產，讓CSS程序範兒。前端
主要目的就是讓你寫CSS時不在重複。html5
SASS優勢能夠簡單的規納爲如下幾點：node
- 增長了一些編程特性
- 簡少CSS代碼的重複性與代碼的冗餘
- 維護方便
- 適應性更強，可讀性更強
代碼從層次不清楚？css不夠靈活？開發繁雜而痛苦？開發費時費力？css3
有了SASS，麻麻不再用擔憂我敲代碼了git
安裝程序員
SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，而後再安裝SASS。github
1. 安裝rubyweb
若是你是WINDOWS 猛戳這裏
下載rubyinstaller.exe 安裝就能夠了。
若是你是MAC
|
1
2
3
4
5
6
7
8
9
|
$ curl -L https://get.rvm.io | bash -s stable
$ source ~/.rvm/scripts/rvm
$ rvm -v
$ rvm install 2.0.0
$ gem -v
|
能夠看到版本號，說明安裝成功！
假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：
|
1
|
gem install sass
|
好啦，大神必備輕鬆帶回家。
若gem命令出行錯誤，猛戳這裏
2. 使用
俗話說，簡單的纔是最好的，SASS其實就是一普通的文本文件，支持CSS的全部格式，固然後綴名不一樣哦，他的後綴名是.scss，意思爲Sassy CSS。 下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲crtest）
|
1
|
sass crtest.scss
|
若是要將顯示結果保存成文件，後面再跟一個.css文件名。
|
1
|
sass crtest.scss crtest.css
|
怎麼樣，很簡單吧
SASS提供四個編譯風格的選項：
|
1
2
3
4
|
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮後的css代碼。
|
生產環境當中，通常使用最後一個選項。
|
1
|
sass --style compressed test.sass test.css
|
你也可讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。
|
1
2
3
4
|
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
|
SASS的官方網站，提供了一個在線轉換器。你能夠在那裏，試運行下面的各類例子。
用法
1. 變量
在SASS中使用美圓符號定義一個變量，在這個例子裏，一個美圓自負，變量名字加上一個冒號定義一個變量。
$blue : #1875e7;
div {
color : $blue;
}
固然，在SASS中有一些內建的功能，例如，darken，lighten來幫助你修改變量。下面例子裏，咱們使用lighten方法來生成段落中更亮的紅色：
$red: #FF4848 $fontsize: 12px h1 color: $red p color: lighten($red, 10%)
在SASS中你還能夠使用加減的方式來修改變量的值，以下：
p.addition_and_subtraction color: $red - #101 font-size: $fontsize + 10px
若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2. 計算
SASS容許在代碼中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3. 嵌套
SASS容許選擇器嵌套。好比，下面的CSS代碼：
div h1 {
color : red;
}
//能夠寫成：
div {
hi {
color:red;
}
}
//屬性也能夠嵌套，好比border-color屬性，能夠寫成：
p {
border: {
color: red;
}
}
//注意，border後面必須加上冒號。
在嵌套的代碼塊內，能夠使用&引用父元素。好比a:hover僞類，能夠寫成：
a {
&:hover { color: #ffb3ff; }
}
4 註釋
SASS共有兩種註釋風格。
標準的CSS註釋 / comment / ，會保留到編譯後的文件。
單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。
在/*後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。
/*! 重要註釋！ */
福利來了！
CSS也能夠重用了
5. 繼承
當咱們須要爲多個元素定義相一樣式的時候，咱們能夠考慮使用繼承的作法。
SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：
.class1 {
border: 1px solid #ddd;
}
class2要繼承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
6. mixin
Mixin有點像C語言的宏（macro），是能夠重用的代碼塊。
使用@mixin命令，定義一個代碼塊。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，調用這個mixin。
div {
@include left;
}
7. 顏色函數
若是你在爲顏色的單調用法而煩惱，趕快mark
CSS 預處理器通常都會內置一些顏色處理函數用來對顏色值進行處理，例如加亮、變暗、顏色梯度等。
lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c
8. 插入文件
@import命令，用來插入外部文件。
不少 CSS 開發者對導入的作法都不太感冒，由於它須要屢次的 HTTP 請求。可是在 CSS 預處理器中的導入操做則不一樣，它只是在語義上包含了不一樣的文件，但最終結果是一個單一的 CSS 文件，若是你是經過 @ import "file.css"; 導入 CSS 文件，那效果跟普通的 CSS 導入同樣。注意：導入文件中定義的混入、變量等信息也將會被引入到主樣式文件中，所以須要避免它們互相沖突。
@import "path/filename.scss";
若是插入的是.css文件，則等同於css的import命令。
@import "foo.css";
9. 高級用法
神奇的在這裏
9.1 條件語句
@if能夠用來判斷：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的還有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
9.2 循環語句
SASS支持for循環：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循環：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，做用與for相似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
9.3 自定義函數
SASS容許用戶編寫本身的函數。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
看到這裏，是否是感受又重見天日了，你們應該瞭解了它的簡單用法，你們若是有什麼見解或看法，歡迎交流~
靈異留白事件——圖片下方無端留白
本人在實踐過程當中偶爾碰見此等不解的情況，但每每睜一隻眼閉一隻眼，採起另外的方式了，而今看到原博主的一篇文章，大受啓發，但願對各位博友也有所幫助~
① 基本現象
要八卦vertical-align和line-height之間的關係，咱們不妨從一個極其簡單的現象入手。假設，咱們有一個<div>標籤，而後，裏面有一張<img>圖片，咱們的HTML代碼就是這樣子：
<div><img src="mm1.jpg"></div>
而後，表現就是一張圖片呈現，相似下面這樣：
恩，看上去很正常，一切都是理所固然。然而，若是咱們給這個<div>元素增長一個背景色，例如淡藍色：
<div style=""><img src="mm1.jpg"></div>
則會是下面這樣：
會發現圖片下面有一段空白空間：
想必你們都遇到過相似問題，不知你們有沒有思考過，爲何圖片下面有留有一段間隙呢？
實際上，這段空白間隙就是vertical-align和line-height攜手搞的鬼！
首先，你們必定要意識到這麼一點：對於內聯元素，vertical-align與line-height雖然看不見，但實際上「處處都是」！
所以，對於內聯元素各類想得通或者想不通的行爲表現，基本上均可以用vertical-align和line-height來解釋，以及進行行爲矯正，然而，要深刻理解這些行爲表現，仍是須要狠花一番功夫的，所以，下面的內容，請確保你有半小時充足時間細細閱讀，別的地方但是看不到的。
② 幽靈空白節點
「幽靈空白節點」這個概念我本身命名的，注意，是我我的YY出來的，是我本身便於理解某些行爲特徵提出的概念。規範可能有相似的概念，但名稱並不是這個。 W3C規範雖然有不少行爲的解釋和說明，可是，畢竟官方的東西，要求嚴謹正式，可是，也會有太乾太澀的感受。若是快速掌握和理解這些行爲表現呢？就我我的而言，從兩方面入手：1.情感化認知；2. 具象化思惟。
例如，我稱vertical-align和line-height爲好基友（包括之前稱浮動和絕對定位是兄弟），就是「情感化認知」；而這裏的「幽靈空白節點」就是「具象化思惟」。
那「幽靈空白節點」是個什麼意思呢？
在HTML5文檔聲明下，塊狀元素內部的內聯元素的行爲表現，就好像塊狀元素內部還有一個（更有可能兩個-先後）看不見摸不着沒有寬度沒有實體的空白節點，這個假想又彷佛存在的空白節點，我稱之爲「幽靈空白節點」。//zxx: 本身搗騰的概念，不是權威，歡迎其餘小夥伴反饋權威解釋
抽象了這個概念，絕對定位與text-align的一些行爲表現，以及這裏的行爲表現，就好理解了。
仍是上面的圖片下邊緣留空隙的例子，實際上，這種行爲表現，就跟圖片前面或者後面有一個寬度爲0的空格元素表現是一致的。可是，空格是透明的，爲了便於你們理解，我就直接使用很明顯的匿名inline box, 也就是字符代替。以下，你們會發現，圖片下面的間隙，依舊是那個間隙。
zxx
下面要解釋這個間隙就好解釋了。下面，咱們讓新增的文本inline-block化，而後弄個白色背景，顯示其佔據的高度。
zxx
會發現，圖片下面的間隙，依舊是那個間隙。可是，咱們的理解就好理解了。回答下面幾個問題，咱們就知道表現的緣由了：
vertical-align默認的對齊方式是？- 後面zxx文字的高度從何而來？
上面2個問題就很簡單了：
vertical-align默認值是baseline, 也就是基線對齊。而基線是什麼，基線就是字母X的下邊緣（參見「字母’x’在CSS世界中的角色和故事」一文）。因此，妹子圖片的下邊緣就和後面zxx中的字母x下邊緣對齊（見下圖）。而字符zxx自己是有高度的，對吧，因而，圖片下面就留空了。- 而
zxx文字的高度是由行高決定的。
所以，簡單的圖片下面留白行爲表現，本質上，就是vertical-align和line-height背地裏搞基形成的。
知道了問題的緣由，咱們就能夠對症下藥，準確搞定圖片下面咱們不但願看到的間隙。怎麼搞呢？一對基友，vertical-align和line-height咱們隨便搞定一個就能夠了。
比方說vertical-align.
1. 讓vertical-align失效
圖片默認是inline水平的，而vertical-align對塊狀水平的元素無感。所以，咱們只要讓圖片display水平爲block就能夠了，咱們能夠直接設置display或者浮動、絕對定位等（若是佈局容許）。例如：
img { display: block; }
則妹子就會變這樣：
下面的空隙不見了。
2. 使用其餘vertical-align值
告別baseline, 取用其餘屬性值，比方說bottom/middle/top都是能夠的。
zxx
3. 直接修改line-height值
下面的空隙高度，其實是文字計算後的行高值和字母x下邊緣的距離。所以，只要行高足夠小，實際文字佔據的高度的底部就會在x的上面，下面沒有了高度區域支撐，天然，圖片就會有容器底邊貼合在一塊兒了。比方說，咱們設置行高5像素：
div { line-height: 5px; }
zxx
4. line-height爲相對單位，font-size間接控制
若是line-height是相對單位，例如line-height:1.6或者line-height:160%之類，也能夠使用font-size間接控制，比方說來個狠的，font-size設爲大雞蛋0, 本質上仍是改變line-height值.
div { font-size: 0; }
zxx
③ 基本現象衍生：垂直居中
因爲「幽靈空白節點」的存在，所以，咱們能夠進一步衍生，實現其餘更實用的效果，比方說任意尺寸的圖片（或者內聯塊狀化的多行文字）的垂直居中效果。就是藉助本文的兩位男主角，vertical-align和line-height。
你想啊，圖片後面（前面）有個相似空格字符的節點，而後就能響應line-height造成高度，此時，圖片再來個vertical-align:middle，噹噹噹當，就能夠和這個被行高撐高的「幽靈空白節點」(近似)垂直對齊了。
例如：
div { line-height: 240px; }
img { vertical-align: middle; }
而後就會這樣子：
不過上面的效果並非徹底的垂直居中，只是近似（稍微仔細看能夠看出來）。爲何只是近似呢？那是由於「幽靈空白節點」高度行高撐開，其垂直中心是字符content area的中心，而對於字符x而言，都是比絕對中心位置要下沉的（不一樣字體下沉幅度不同），換句更易懂的描述就是x的中心位置都是在字符內容區域高度中心點的下方，而這上下的誤差就是這裏圖片上下間距的誤差。
我特地把字符x使用大字號演示了下：
換句更簡單的話說就是：middle中線位置(字符x的中心)並非字符內容的絕對居中位置。兩個位置的誤差就是圖片近似居中的誤差。
嘛嘛，單純的文字仍是太蒼白了，截個圖示意下吧：
所以，要想徹底垂直居中，最早想到的方法就是讓後面的「幽靈字符」也是vertical-align:middle，然而，呵呵，既然稱之爲「幽靈」就表示不會受非繼承特性的屬性影響，因此，根本無法設置vertical-align:middle，除非你本身建立一個顯示的內聯元素。
咱們就沒有辦法了嗎？固然不是，「幽靈字符」能夠受具備繼承特性的CSS屬性影響，因而，咱們能夠經過其餘東西來作調整，讓字符的中線和字符內容中心線在一塊兒，或者說在一個位置上就能夠了。有人可能要疑問了，這能行嗎？啊，是能夠的。
怎麼搞？很簡單，font-size:0, 所以此時content area高度是0，各類亂七八糟的線都在高度爲0的這條線上，絕對中心線和中線重合。天然全垂直居中：
div { line-height: 240px; font-size: 0; }
img { vertical-align: middle; }
結果是：
處女座的你，是否是看過去舒服多啦！？
這種經過line-height定高，元素vertical-align:middle垂直居中的方法不只適用於現代瀏覽器，連IE7瀏覽器也是支持的：
不過和其餘瀏覽器再使用上仍是有些須要注意的地方，就是，HTML不能這樣：
<div><img src="mm1.jpg"></div>
而是須要在圖片標籤結束處留下空格後者換行：
<div><img src="mm1.jpg"><!-- 這裏要折行或空格 --> </div>
④ 複雜現象
多年前曾分享過「text-align:justify下列表的兩端對齊佈局」的技術，其中，爲了讓任意個數的列表最後一行也是對齊排列，在列表最後會輔助列表等寬的空標籤元素來佔位，相似下面紅色高亮HTML代碼：
.justify-fix { display: inline-block; width: 128px; }
<div style="text-align: justify;">
<img src="img/mm1.jpg" width="128">
<img src="img/mm1.jpg" width="128">
<img src="img/mm1.jpg" width="128">
<img src="img/mm1.jpg" width="128">
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
</div>
爲了節約空間，我就使用小圖示意：
一樣的，在白色背景下，彷佛看上去效果還不賴，可是，若是給div容器加個背景色~~
會驚訝的發現，下面多了很大一塊間隙（以下截圖）：
爲了便於你們看其究竟，我把佔位i元素outline高亮下，因而，效果以下：
結果會發現，上面巨大的空隙是由佔位i元素上面和下面的間隙共同組成的。
下面問題來了：上面的間隙是如何產生的？下面的間隙是如何產生的？若是去除這些間隙呢？
不少時候，複雜問題是由簡單問題組合而成的，實際上，這裏的間隙現象的始做俑者和上面的簡單現象同樣，都是vertical-align和line-height搞基帶來的很差的影響。
按照以前問題解決方法，咱們能夠直接來個line-height:0解決垂直間隙問題：
div { line-height: 0; }
結果圖片和圖片之間的間隙是沒有了，可是，圖片和最後的佔位元素之間依然有個幾像素的間距，，啊啊啊啊，這到底是什麼鬼？
簡單現象的背後每每有大的學問，接下來是本文的高潮了，究其緣由，要說到inline-block元素和基線baseline之間的一些糾纏的關係。
⑤ inline-block和baseline
CSS2的可視化格式模型文檔中有一麼一段話：
The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.
英文看得眼睛大，因而我中文直譯了下：
‘inline-block’的基線是正常流中最後一個line box的基線, 除非，這個line box裏面既沒有line boxes或者自己’overflow’屬性的計算值而不是’visible’, 這種狀況下基線是margin底邊緣。
這段文檔中出現了不少專有名詞line box, line boxes等，這些是內聯盒子模型中的概念，是CSS進階必備知識。我在「浮動深刻理解(一)」一文的中間穿插介紹了該模型。//zxx: 我如今後悔了，內聯盒子模型當初應該直接獨立成一篇文章，這樣其餘文章能夠很乾淨地引用，所謂文章的模塊化書寫
若是你們沒有足夠精力去學習之，能夠先看下面這張圖：
因爲上面的譯文是直譯的，理解起來仍是有些拗口，我使用通俗的話描述就是：一個inline-block元素，若是裏面沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣，不然，其基線就是元素裏面最後一行內聯元素的基線。
納尼，仍是沒反應過來？
那咱們看下面這個例子，應該就知道什麼意思了。
兩個同尺寸的inline-block水平元素，惟一區別就是一個空的，一個裏面有字符，代碼以下：
.dib-baseline {
display: inline-block; width: 150px; height: 150px;
border: 1px solid #cad5eb; background-color: #f0f3f9;
}
<span class="dib-baseline"></span> <span class="dib-baseline">x-baseline</span>
結果，科科：
x-baseline
會發現，明明尺寸、display水平都是同樣的，結果呢，兩個卻不在一個水平線上對齊，爲何呢？哈哈，上面的規範已經說明了一切。第一個框框裏面沒有內聯元素，所以，基線就是容器的margin下邊緣，也就是下邊框下面的位置；而第二個框框裏面有字符，純正的內聯元素，所以，第二個框框就是這些字符的基線，也就是字母x的下邊緣了。因而，咱們就看到了框框1下邊緣和框框2裏面字符x底邊對齊的好戲。框框2有個小彩蛋，點擊能夠toggle其innerHTML，會發現，若是框框2裏面沒文字，就和框框1舉案齊眉了。
下面咱們要作一件頗有必要的事情，用來幫助咱們理解上面複雜例子在line-height值爲0後的表現，什麼事情呢？哈，同境界模擬，咱們也設置框框2的line-height值爲0，因而，就會是下面這樣的表現：
x-baseline
知道框框2爲什麼又下沉了一點嗎？
由於字符實際佔據的高度是由行高決定的，當行高變成0的時候，字符佔據的高度也是0，此時，高度的起始位置就變成了字符content area的垂直中心位置，因而，文字就一半落在看看2的外面了。
因爲文字字符上移了，天然基線位置(字母x的底邊緣)也往上移動了，因而，兩個框框的垂直落差就更大了。
OK，明白了上面的簡單例子，也就能明白上面的複雜例子。緊接着，若是咱們在最後一個佔位的<i>元素後面新增一樣的x-baseline字符，則：
x-baseline
你們是否是就能夠明白緣由所在啦！
額~竟然還有小夥伴皺眉頭，那我再用文字解釋下：
如今行高line-height是0, 則最後的x-baseline的垂直中線就和上面一列的圖片對齊，而基線呢，就在中線下面差很少半個x的高度地方，而這個高度落差就是最後圖片和容器的間隙高度值，由於前面的<i class="justify-fix">是個空元素，基線是自身的底部，哈哈，造業啊！
OK，一旦知道了現象的本質，咱們就能輕鬆對症下藥了！要麼改造佔位<i>元素的基線、要麼改造「幽靈空白節點」的基線位置、要麼使用其餘vertical-align對齊方式~
首先，來個最有意思的方法，對吧，改造佔位<i>元素的基線。這個很簡單，對吧，只要在空的<i>元素裏面隨便放幾個字符就能夠了，例如，裏面有個x：
xx-baseline
會發現，間隙沒有了！ 爲何呢？哈哈，由於<i>元素的基線和「幽靈空白節點」的基線位置如今一致了，沒有了錯位，天然就不會有間隙啦！
改造「幽靈空白節點」的基線位置，哈哈，使用font-size，字體足夠小時，基線和中線會重合在一塊兒，何時字體足夠小呢，就是0. 因而，CSS代碼(line-height若是是相對值，line-height:0也能夠省掉)：
div { font-size: 0; }
使用其餘vertical-align對齊方式，就是讓兩端對齊的列表元素vertical-align:top/bottom/...之類。
div { line-height: 0; }
.justify-fix { display: inline-block; width: 128px; vertical-align: top; }
最後的效果是：
恩恩，各類方法都完美解決了垂直間隙的問題，來，各個大大的贊！
至此，vertical-align和line-height的斷背基友關係算是完全暴露了，並且，從行爲表現上來看，line-height是攻，vertical-align是個受。而不少內聯元素的行爲表現，就是這對基友搞七搞八一塊兒搞出來的。
之前，關係處於地下的時候，咱們可能不會明白，爲什麼男廁所的捲紙用得比女廁所還快；可是，如今關係暴露了，不少之前咱們想不明白的事情一會兒就豁然開朗了。
所以，咱們要以正確地心態去看待這對好基友，畢竟，他們能夠CSS屆很是重要的兩個主力大將。
本文牽扯的知識點甚多，建議你們若是想在重構領域有所造詣，不少基本的卻很深刻的東西是頗有必要弄透的。篇幅有限，有很多知識點都是一筆帶過的，你們如有疑問，能夠本身去檢索與研究，例如，vertical-align各個值的規範解釋，內聯盒子模型，等等。也歡迎各類方式交流。
原文地址：http://www.zhangxinxu.com/wordpress/?p=4925
你會用::before、::after嗎
::before和::after僞元素的用法
1、介紹
css3爲了區分僞類和僞元素，僞元素採用雙冒號寫法。
常見僞類——:hover,:link,:active,:target,:not(),:focus。
常見僞元素——::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部添加內容。
這些添加不會出如今DOM中，不會改變文檔內容，不可複製，僅僅是在css渲染層加入。
因此不要用:before或:after展現有實際意義的內容，儘可能使用它們顯示修飾性內容，例如圖標。
舉例：網站有些聯繫電話，但願在它們前加一個icon☎，就能夠使用:before僞元素，以下：
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
.phoneNumber::before {
content:'\260E';
font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>
Note:這些特殊字符的html，js和css的寫法是不一樣的，具體可查看html特殊字符的html，js，css寫法彙總。
2、content屬性
::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認狀況下，僞類元素的display是默認值inline，能夠經過設置display:block來改變其顯示。
content可取如下值。
一、string
使用引號包一段字符串，將會向元素內容中添加字符串。如：a:after{content:""}
舉例：
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
</style>
<p>平凡的世界</p>
二、attr()
經過attr()調用當前元素的屬性，好比將圖片alt提示文字或者連接的href地址顯示出來。
<style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>
三、url()/uri()
用於引用媒體文件。
舉例：「百度」前面給出一張圖片，後面給出href屬性。
<style>
a::before{
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
content:"("attr(href)")";
}
a{
text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com">百度</a>
</body>
效果：
四、counter()
調用計數器，能夠不使用列表元素實現序號功能。
配合counter-increment和counter-reset屬性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
代碼:
<style>
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment:section;
content:counter(section) "、";
}
h2:before{
counter-increment:subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
------------------------------------------------
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
效果：
瞭解更多可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
3、使用
一、清除浮動
清除浮動方法有多種，如今最經常使用的就是下面這種方法，僅須要如下樣式便可在元素尾部自動清除浮動
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
二、模擬float:center的效果
float沒有center這個取值，可是能夠經過僞類來模擬實現。
這個效果實現頗有意思，左右經過::before float各自留出一半圖片的位置，再把圖片絕對定位上去。
核心css以下：
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
完整代碼以下：
View Code
出自：https://css-tricks.com/float-center/
三、作出各類圖形效果
舉例：一個六角星
#star-six的div是一個正三角行，#star-six::after是一個倒三角形，經過絕對定位，調整其位置便可實現六角星的效果。
點我查看更多。
四、不使用圖片建立小圖標
舉例：好比一個電話
很巧妙的應用一個div左border加圓角當機身，::before和::after配合圓角當聽筒。
<style type="text/css">
#phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
#phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
#phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
</style>
<div id="wraper">
<div id="phone"></div>
</div>
更多圖標：
<!doctype html>
<html>
<head>
<title>僞類標籤使用</title>
</head>
<style type="text/css">
#wraper{padding:10px;width:380px;height:380px;border:3px solid #ccc;margin:auto;}
#power{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position: relative;display: inline-block;}
#power:before{width:7px;height:22px;background:#EEB422;position: absolute;left:8px;top:-13px;content: "";border: 3px solid #fff;}
#play{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
#play:before{border:11px solid transparent;border-left:17px solid #fff;content: "";position: absolute;left:9px;top: 3px;}
#pause{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
#pause:before{height:20px;width:5px;border:0px solid transparent;border-left:8px solid #fff;border-right:8px solid #fff;content: "";position: absolute;left:4px;top: 5px;}
#stop{width: 30px;height: 30px;margin:20px;border: 6px solid #EEB422;border-radius: 50%;position:relative;display: inline-block;background: #EEB422;}
#stop:before{height:17px;width:17px;background:#fff;content: "";position: absolute;left:6px;top: 6px;}
#comment{width: 50px;height: 25px;margin:20px;border: 6px solid #EEB422;border-radius: 20%;position:relative;display: inline-block;background: #EEB422;}
#comment:before{border:10px solid transparent;border-top:10px solid #EEB422;content: "";position: absolute;left:28px;top: 28px;}
#comment:after{content: "....";position: absolute;color: #fff;font-size: 26px;top: -10px;left: 2px;}
#like{width: 50px;height: 30px;margin:20px;border-radius: 55%;transform:rotate(55deg);-webkit-transform:rotate(55deg);position:relative;display: inline-block;background: #EEB422;}
#like:before{width:50px;height:30px;border-radius: 55%;transform:rotate(-110deg);-webkit-transform:rotate(-110deg);background:#EEB422;content: "";position: absolute;left:8px;top: -12px;}
#search{width: 20px;height: 20px;border:4px solid #EEB422;border-radius:50%;margin:20px;position:relative;display: inline-block;top: -5px;left: -5px;}
#search:before{width:20px;height:5px;background:#EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:15px;top: 22px;}
#home{width: 30px;height: 30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#home:before{width:6px;height:12px;background:#fff;content: "";position: absolute;left:12px;top: 20px;}
#home:after{border:25px solid transparent;border-bottom:20px solid #EEB422;content: "";position: absolute;top: -38px;left:-10px;}
#photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#photo:before{width:13px;height:13px;border:4px solid #fff;border-radius:50%;background:#EEB422;content: "";position: absolute;left:10px;top: 5px;}
#photo:after{width:15px;height:10px;background:#EEB422;content: "";position: absolute;top: -7px;left:13px;}
#photo{width:40px;height:30px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#email{width:50px;height:35px;background:#EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#email:before{border:25px solid transparent;border-top:20px solid #fff;content: "";position: absolute;left:0px;top: 2px;}
#email:after{border:25px solid transparent;border-top:20px solid #EEB422;content: "";position: absolute;top:0px;}
#file{width:30px;height:45px;border:4px solid #EEB422;margin:20px;position:relative;display: inline-block;top: 5px;}
#file:before{border:10px solid #fff;border-right:10px solid #EEB422;border-bottom:10px solid #EEB422;content: "";position: absolute;left:-4px;top: -4px;}
#file:after{width:20px;height:5px;border-top:3px solid #EEB422;border-bottom:3px solid #EEB422;content: "";position: absolute;left: 5px;top: 25px;}
#history{width:35px;height:35px;border:4px solid #EEB422;border-radius: 50%;margin:20px;position:relative;display: inline-block;top: 5px;}
#history:before{width:14px;height:14px;border-bottom:4px solid #EEB422;border-left:4px solid #EEB422;content: "";position: absolute;left:14px;top: 3px;}
#video{width:50px;height:35px;background:#EEB422;border-radius: 20%;margin:20px;position:relative;display: inline-block;top: -5px;}
#video:before{width:6px;height:6px;border:11px solid transparent;border-right:11px solid #EEB422;content: "";position: absolute;left:35px;top: 4px;}
#video:after{width:10px;height:10px;border:6px solid transparent;border-top:6px solid #EEB422;border-left:6px solid #EEB422;transform:rotate(45deg);-webkit-transform:rotate(45deg);content: "";position: absolute;left:13px;top: 35px;}
#tags{width:50px;height:25px;background:#EEB422;border-radius: 35% 0% 0% 35%;transform:rotate(45deg);-webkit-transform:rotate(45deg);margin:20px;margin-left:35px;position:relative;display: inline-block;top: -5px;}
#tags:before{width:10px;height:10px;border-radius:50%;background:#fff;content: "";position: absolute;left:7px;top: 7px;}
#phone{width:50px;height:50px;border-left:6px solid #EEB422;border-radius:20%;transform:rotate(-30deg);-webkit-transform:rotate(-30deg);margin:20px;margin-right:0px;position:relative;display: inline-block;top: -5px;}
#phone:before{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-2px;top: 1px;}
#phone:after{width:15px;height:15px;background:#EEB422;border-radius: 20%;content: "";position: absolute;left:-3px;top: 34px;}
#profile{width: 40px;height:15px;background:#EEB422;border-radius: 45% 45% 0 0;margin:20px;position:relative;display: inline-block;top: 0px;}
#profile:before{width: 20px;height:22px;background:#EEB422;border-radius:40%;content: "";position: absolute;left: 10px;top: -22px;}
</style>
<body>
<div id="wraper">
<div id="power"></div>
<div id="play"></div>
<div id="pause"></div>
<div id="stop"></div>
<div id="comment"></div>
<div id="like"></div>
<div id="search"></div>
<div id="home"></div>
<div id="photo"></div>
<div id="email"></div>
<div id="file"></div>
<div id="history"></div>
<div id="video"></div>
<div id="tags"></div>
<div id="phone"></div>
<div id="profile"></div>
</div>
</body>
</html>
這個效果來自：http://www.w3cfuns.com/blog-5444604-5402127.html
有大神用僞元素建立了84種小圖標，具體可查看http://nicolasgallagher.com/pure-css-gui-icons/
五、顯示打印網頁的URL
<style>
@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}
</style><body>
<a href="http://www.baidu.com">百度</a>
</body>
六、給blockquote添加引號
常常用到給blockquote 引用段添加巨大的引號做爲背景，能夠用 ：:before 來代替 background 。好處是便可以給背景留下空間，還能夠直接使用文字而非圖片：
<meta charset="utf-8"/>
<style type="text/css">
blockquote::before {
content: open-quote;
color: #ddd;
z-index: -1;
font-size:80px;
}
</style>
<blockquote>引用一個段落,雙引號用::before僞元素實現</blockquote>
七、超連接特效
舉例：配合 CSS定位實現一個鼠標移上去，超連接出現方括號的效果
<meta charset="utf-8" />
<style type="text/css">
body{
background-color: #425a6c;
}
a {
position: relative;
display: inline-block;
outline: none;
color: #fff;
text-decoration: none;
font-size: 32px;
padding: 5px 20px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -10px; }
a:hover::after { content: "\5D"; right: -10px; }
</style>
<a>鼠標移上去出現方括號</a>
更多創意連接特效可參考： Creative Link Effects 。
八、::before和::after實現多背景圖片
舉例：一個標籤應用5張背景圖
View Code
原效果來自：Multiple Backgrounds and Borders with CSS 2.1
這個效果看的真的是腦洞大開，雖然多背景圖用css3的background-image很容易就能實現。可是這篇文章是10年寫的，已通過去5年了，想一想也正是他們這樣的嘗試和努力才加速了css3標準的制定，讓今天的開發更easy。今天的咱們又能爲5年後的開發人員作些什麼貢獻呢？
本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4459991.html有問題歡迎與我討論，共同進步。
link 與 @import之對比
頁面中使用CSS的方式主要有3種：行內添加定義style屬性值，頁面頭部內嵌調用和外面連接調用，其中外面引用有兩種：link和@import。外部引用CSS兩種方式link和@import的方式分別是：
XML/HTML代碼
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代碼
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
二者都是外部引用CSS的方式，可是存在必定的區別：
區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
補充：@import最優寫法
@import的寫法通常有下列幾種：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優的選擇，兼容的瀏覽器最多。從字節優化的角度來看@import url(style.css)最值得推薦。
轉自http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
學習前端前必知的——HTTP協議詳解
前端人士必備的知識點，不管你是否有經驗，看了此文絕對有收穫
此文針對前端愛好者，前端求職者（話說面試時很容易考到哦）
原文參考博客園http://kb.cnblogs.com/page/130970/#statecode
什麼是HTTP協議
協議是指計算機通訊網絡中兩臺計算機之間進行通訊所必須共同遵照的規定或規則，超文本傳輸協議(HTTP)是一種通訊協議，它容許將超文本標記語言(HTML)文檔從Web服務器傳送到客戶端的瀏覽器
目前咱們使用的是HTTP/1.1 版本
Web服務器，瀏覽器，代理服務器
當咱們打開瀏覽器，在地址欄中輸入URL，而後咱們就看到了網頁。 原理是怎樣的呢？
實際上咱們輸入URL後，咱們的瀏覽器給Web服務器發送了一個Request, Web服務器接到Request後進行處理，生成相應的Response，而後發送給瀏覽器， 瀏覽器解析Response中的HTML,這樣咱們就看到了網頁，過程以下圖所示
咱們的Request 有多是通過了代理服務器，最後纔到達Web服務器的。
過程以下圖所示
代理服務器就是網絡信息的中轉站，有什麼功能呢？
1. 提升訪問速度， 大多數的代理服務器都有緩存功能。
2. 突破限制， 也就是FQ了
3. 隱藏身份。
URL詳解
URL(Uniform Resource Locator) 地址用於描述一個網絡上的資源， 基本格式以下
schema://host[:port#]/path/.../[;url-params][?query-string][#anchor]
scheme 指定低層使用的協議(例如：http, https, ftp)
host HTTP服務器的IP地址或者域名
port# HTTP服務器的默認端口是80，這種狀況下端口號能夠省略。若是使用了別的端口，必須指明，例如 http://www.cnblogs.com:8080/
path 訪問資源的路徑
url-params
query-string 發送給http服務器的數據
anchor- 錨
URL 的一個例子
http://www.mywebsite.com/sj/test;id=8079?name=sviergn&x=true#stuffSchema: http
host: www.mywebsite.com
path: /sj/test
URL params: id=8079
Query String: name=sviergn&x=true
Anchor: stuff
HTTP協議是無狀態的
http協議是無狀態的，同一個客戶端的此次請求和上次請求是沒有對應關係，對http服務器來講，它並不知道這兩個請求來自同一個客戶端。 爲了解決這個問題， Web程序引入了Cookie機制來維護狀態.
HTTP消息的結構
先看Request 消息的結構， Request 消息分爲3部分，第一部分叫請求行， 第二部分叫http header, 第三部分是body. header和body之間有個空行， 結構以下圖
第一行中的Method表示請求方法，好比"POST"，"GET"， Path-to-resoure表示請求的資源， Http/version-number 表示HTTP協議的版本號
當使用的是"GET" 方法的時候， body是爲空的
好比咱們打開博客園首頁的request 以下
GET http://www.cnblogs.com/ HTTP/1.1Host: www.cnblogs.com
咱們用Fiddler 捕捉一個博客園登陸的Request 而後分析下它的結構， 在Inspectors tab下以Raw的方式能夠看到完整的Request的消息， 以下圖
咱們再看Response消息的結構， 和Request消息的結構基本同樣。 一樣也分爲三部分，第一部分叫request line, 第二部分叫request header，第三部分是body. header和body之間也有個空行， 結構以下圖
HTTP/version-number表示HTTP協議的版本號， status-code 和message 可另行了解
咱們用Fiddler 捕捉一個博客園首頁的Response而後分析下它的結構， 在Inspectors tab下以Raw的方式能夠看到完整的Response的消息， 以下圖
Get和Post方法的區別
Http協議定義了不少與服務器交互的方法，最基本的有4種，分別是GET,POST,PUT,DELETE. 一個URL地址用於描述一個網絡上的資源，而HTTP中的GET, POST, PUT, DELETE就對應着對這個資源的查，改，增，刪4個操做。 咱們最多見的就是GET和POST了。GET通常用於獲取/查詢資源信息，而POST通常用於更新資源信息.
咱們看看GET和POST的區別
1. GET提交的數據會放在URL以後，以?分割URL和傳輸數據，參數之間以&相連，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的數據放在HTTP包的Body中.
2. GET提交的數據大小有限制（由於瀏覽器對URL的長度有限制），而POST方法提交的數據沒有限制.
3. GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值。
4. GET方式提交數據，會帶來安全問題，好比一個登陸頁面，經過GET方式提交數據時，用戶名和密碼將出如今URL上，若是頁面能夠被緩存或者其餘人能夠訪問這臺機器，就能夠從歷史記錄得到該用戶的帳號和密碼.
狀態碼
Response 消息中的第一行叫作狀態行，由HTTP協議版本號， 狀態碼， 狀態消息 三部分組成。
狀態碼用來告訴HTTP客戶端，HTTP服務器是否產生了預期的Response.
HTTP/1.1中定義了5類狀態碼， 狀態碼由三位數字組成，第一個數字定義了響應的類別
1XX 提示信息 - 表示請求已被成功接收，繼續處理
2XX 成功 - 表示請求已被成功接收，理解，接受
3XX 重定向 - 要完成請求必須進行更進一步的處理
4XX 客戶端錯誤 - 請求有語法錯誤或請求沒法實現
5XX 服務器端錯誤 - 服務器未能實現合法的請求
看看一些常見的狀態碼
200 OK
最多見的就是成功響應狀態碼200了， 這代表該請求被成功地完成，所請求的資源發送回客戶端
以下圖， 打開博客園首頁
302 Found
重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。
例如在IE中輸入http://www.google.com. HTTP服務器會返回304， IE取到Response中Location header的新URL, 又從新發送了一個Request.
304 Not Modified
表明上次的文檔已經被緩存了， 還能夠繼續使用，
例如打開博客園首頁， 發現不少 Response 的status code 都是304
提示： 若是你不想使用本地緩存能夠用Ctrl+F5強制刷新頁面
400 Bad Request 客戶端請求與語法錯誤，不能被服務器所理解
403 Forbidden 服務器收到請求，可是拒絕提供服務
404 Not Found
請求資源不存在（輸錯了URL）
好比在IE中輸入一個錯誤的URL， http://www.cnblogs.com/tesdf.aspx
500 Internal Server Error 服務器發生了不可預期的錯誤
503 Server Unavailable 服務器當前不能處理客戶端的請求，一段時間後可能恢復正常
HTTP Request header
使用Fiddler 能很方便的查看Reques header, 點擊Inspectors tab -> Request tab -> headers 以下圖所示.
header 有不少，比較難以記憶，咱們也按照Fiddler那樣把header 進行分類，這樣比較清晰也容易記憶。
Cache 頭域
If-Modified-Since
做用： 把瀏覽器端緩存頁面的最後修改時間發送到服務器去，服務器會把這個時間與服務器上實際文件的最後修改時間進行對比。若是時間一致，那麼返回304，客戶端就直接使用本地緩存文件。若是時間不一致，就會返回200和新的文件內容。客戶端接到以後，會丟棄舊文件，把新文件緩存起來，並顯示在瀏覽器中。
例如：If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT
實例以下圖
If-None-Match
做用: If-None-Match和ETag一塊兒工做，工做原理是在HTTP Response中添加ETag信息。 當用戶再次請求該資源時，將在HTTP Request 中加入If-None-Match信息(ETag的值)。若是服務器驗證資源的ETag沒有改變（該資源沒有更新），將返回一個304狀態告訴客戶端使用本地緩存文件。不然將返回200狀態和新的資源和Etag. 使用這樣的機制將提升網站的性能
例如: If-None-Match: "03f2b33c0bfcc1:0"
實例以下圖
Pragma
做用： 防止頁面被緩存， 在HTTP/1.1版本中，它和Cache-Control:no-cache做用如出一轍
Pargma只有一個用法， 例如： Pragma: no-cache
注意: 在HTTP/1.0版本中，只實現了Pragema:no-cache, 沒有實現Cache-Control
Cache-Control
做用: 這個是很是重要的規則。 這個用來指定Response-Request遵循的緩存機制。各個指令含義以下
Cache-Control:Public 能夠被任何緩存所緩存（）
Cache-Control:Private 內容只緩存到私有緩存中
Cache-Control:no-cache 全部內容都不會被緩存
還有其餘的一些用法， 我沒搞懂其中的意思， 請你們參考其餘的資料
Client 頭域
Accept
做用： 瀏覽器端能夠接受的媒體類型,
例如： Accept: text/html 表明瀏覽器能夠接受服務器回發的類型爲 text/html 也就是咱們常說的html文檔,
若是服務器沒法返回text/html類型的數據，服務器應該返回一個406錯誤(non acceptable)
通配符 * 表明任意類型
例如 Accept: */* 表明瀏覽器能夠處理全部類型，(通常瀏覽器發給服務器都是發這個)
Accept-Encoding：
做用： 瀏覽器申明本身接收的編碼方法，一般指定壓縮方法，是否支持壓縮，支持什麼壓縮方法（gzip，deflate），（注意：這不是隻字符編碼）;
例如： Accept-Encoding: gzip, deflate
Accept-Language
做用： 瀏覽器申明本身接收的語言。
語言跟字符集的區別：中文是語言，中文有多種字符集，好比big5，gb2312，gbk等等；
例如： Accept-Language: en-us
User-Agent
做用：告訴HTTP服務器， 客戶端使用的操做系統和瀏覽器的名稱和版本.
咱們上網登錄論壇的時候，每每會看到一些歡迎信息，其中列出了你的操做系統的名稱和版本，你所使用的瀏覽器的名稱和版本，這每每讓不少人感到很神奇，實際上，服務器應用程序就是從User-Agent這個請求報頭域中獲取到這些信息User-Agent請求報頭域容許客戶端將它的操做系統、瀏覽器和其它屬性告訴服務器。
例如： User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)
Accept-Charset
做用：瀏覽器申明本身接收的字符集，這就是本文前面介紹的各類字符集和字符編碼，如gb2312，utf-8（一般咱們說Charset包括了相應的字符編碼方案）；
例如：
Cookie/Login 頭域
Cookie:
做用： 最重要的header, 將cookie的值發送給HTTP 服務器
Entity頭域
Content-Length
做用：發送給HTTP服務器數據的長度。
例如： Content-Length: 38
Content-Type
做用：
例如：Content-Type: application/x-www-form-urlencoded
Miscellaneous 頭域
Referer:
做用： 提供了Request的上下文信息的服務器，告訴服務器我是從哪一個連接過來的，好比從我主頁上連接到一個朋友那裏，他的服務器就可以從HTTP Referer中統計出天天有多少用戶點擊我主頁上的連接訪問他的網站。
例如: Referer:http://translate.google.cn/?hl=zh-cn&tab=wT
Transport 頭域
Connection
例如： Connection: keep-alive 當一個網頁打開完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接不會關閉，若是客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經創建的鏈接
例如： Connection: close 表明一個Request完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接會關閉， 當客戶端再次發送Request，須要從新創建TCP鏈接。
Host（發送請求時，該報頭域是必需的）
做用: 請求報頭域主要用於指定被請求資源的Internet主機和端口號，它一般從HTTP URL中提取出來的
例如: 咱們在瀏覽器中輸入：http://www.guet.edu.cn/index.html
瀏覽器發送的請求消息中，就會包含Host請求報頭域，以下：
Host：http://www.guet.edu.cn
此處使用缺省端口號80，若指定了端口號，則變成：Host：指定端口號
HTTP Response header
一樣使用Fiddler 查看Response header, 點擊Inspectors tab ->Response tab-> headers 以下圖所示
咱們也按照Fiddler那樣把header 進行分類，這樣比較清晰也容易記憶。
Cache頭域
Date
做用: 生成消息的具體時間和日期
例如： Date: Sat, 11 Feb 2012 11:35:14 GMT
Expires
做用: 瀏覽器會在指定過時時間內使用本地緩存
例如: Expires: Tue, 08 Feb 2022 11:35:14 GMT
Vary
做用：
例如: Vary: Accept-Encoding
Cookie/Login 頭域
P3P
做用: 用於跨域設置Cookie, 這樣能夠解決iframe跨域訪問cookie的問題
例如: P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR
Set-Cookie
做用： 很是重要的header, 用於把cookie 發送到客戶端瀏覽器， 每個寫入cookie都會生成一個Set-Cookie.
例如: Set-Cookie: sc=4c31523a; path=/; domain=.acookie.taobao.com
Entity頭域
ETag
做用: 和If-None-Match 配合使用。 （實例請看上節中If-None-Match的實例）
例如: ETag: "03f2b33c0bfcc1:0"
Last-Modified:
做用： 用於指示資源的最後修改日期和時間。（實例請看上節的If-Modified-Since的實例）
例如: Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT
Content-Type
做用：WEB服務器告訴瀏覽器本身響應的對象的類型和字符集,
例如:
Content-Type: text/html; charset=utf-8
Content-Type:text/html;charset=GB2312
Content-Type: image/jpeg
Content-Length
指明實體正文的長度，以字節方式存儲的十進制數字來表示。在數據下行的過程當中，Content-Length的方式要預先在服務器中緩存全部數據，而後全部數據再一古腦兒地發給客戶端。
例如: Content-Length: 19847
Content-Encoding
WEB服務器代表本身使用了什麼壓縮方法（gzip，deflate）壓縮響應中的對象。
例如：Content-Encoding：gzip
Content-Language
做用： WEB服務器告訴瀏覽器本身響應的對象的語言者
例如： Content-Language:da
Miscellaneous 頭域
Server:
做用：指明HTTP服務器的軟件信息
例如:Server: Microsoft-IIS/7.5
X-AspNet-Version:
做用：若是網站是用ASP.NET開發的，這個header用來表示ASP.NET的版本
例如: X-AspNet-Version: 4.0.30319
X-Powered-By:
做用：表示網站是用什麼技術開發的
例如： X-Powered-By: ASP.NET
Transport頭域
Connection
例如： Connection: keep-alive 當一個網頁打開完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接不會關閉，若是客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經創建的鏈接
例如： Connection: close 表明一個Request完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接會關閉， 當客戶端再次發送Request，須要從新創建TCP鏈接。
Location頭域
Location
做用： 用於重定向一個新的位置， 包含新的URL地址
實例請看304狀態實例
HTTP協議是無狀態的和Connection: keep-alive的區別
無狀態是指協議對於事務處理沒有記憶能力，服務器不知道客戶端是什麼狀態。從另外一方面講，打開一個服務器上的網頁和你以前打開這個服務器上的網頁之間沒有任何聯繫。
HTTP是一個無狀態的面向鏈接的協議，無狀態不表明HTTP不能保持TCP鏈接，更不能表明HTTP使用的是UDP協議（無鏈接）。
從HTTP/1.1起，默認都開啓了Keep-Alive，保持鏈接特性，簡單地說，當一個網頁打開完成後，客戶端和服務器之間用於傳輸HTTP數據的TCP鏈接不會關閉，若是客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經創建的鏈接。
Keep-Alive不會永久保持鏈接，它有一個保持時間，能夠在不一樣的服務器軟件（如Apache）中設定這個時間。
深刻了解——CSS3新增屬性
CSS3 選擇器（Selector）
寫過 CSS 的人應該對 CSS 選擇器不陌生，咱們所定義的 CSS 屬性之因此能應用到相應的節點上，就是由於 CSS 選擇器模式。參考下述代碼：
清單 1. CSS 選擇器案例
Body > .mainTabContainer div > span[5]{
Border: 1px solod red;
Background-color: white;
Cursor: pointer;
}
此處的 CSS 選擇器即：「body > .mainTabContainer div span[5]」 表明這這樣一條路徑：
1. 「body」標籤直接子元素裏 class 屬性值爲「mainTabContainer」的全部元素 A
2. A 的後代元素（descendant）裏標籤爲 div 的全部元素 B
3. B 的直接子元素中的第 5 個標籤爲 span 的元素 C
這個 C 元素（可能爲多個）即爲選擇器定位到的元素，如上的 CSS 屬性也會所有應用到 C 元素上。
以上爲 CSS2 及以前版本所提供的主要定位方式。如今，CSS3 提供了更多更加方便快捷的選擇器：
清單 2. CSS3 選擇器案例
1 Body > .mainTabContainer tbody:nth-child(even){
2 Background-color: white;
3 }
4
5 Body > .mainTabContainer tr:nth-child(odd){
6 Background-color: black;
7 }
8
9
10 :not(.textinput){
11 Font-size: 12px;
12 }
13
14 Div:first-child{
15 Border-color: red;
16 }
如上所示，咱們列舉了一些 CSS3 的選擇器，在咱們平常的開發中可能會常常用到，這些新的 CSS3 特性解決了不少咱們以前須要用 JavaScript 腳本才能解決的問題。
1. tbody: nth-child(even), nth-child(odd)：此處他們分別表明了表格（tbody）下面的偶數行和奇數行（tr），這種樣式很是適用於表格，讓人能很是清楚的看到表格的行與行之間的差異，讓用戶易於瀏覽。tbody爲語義化標籤
2. : not(.textinput)：這裏即表示全部 class 不是「textinput」的節點。同時:not（也可包含僞元素如：empty）
div:first-child：這裏表示全部 div 節點下面的第一個直接子節點。
除此以外，還有不少新添加的選擇器：
E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty E:checked E:enabled E:disabled E::selection E:not(s)
這裏不一一介紹。深刻了解
@Font-face 特性
Font-face 能夠用來加載字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
先來看一個客戶端字體簡單的案例：
清單 3. Font-face 客戶端字體案例
<p><font face="arial">arial courier verdana</font></p>
咱們能夠經過這種方式直接加載字體樣式，由於這些字體（arial）已經安裝在客戶端了。清單 3 這種寫法的做用等同於清單 4：
清單 4. 字體基本寫法
<p><font style="font-family: arial">arial courier verdana</font></p>
相信這種寫法你們應該再熟悉不過了。
接下來咱們看看如何使用服務端字體，即：未在客戶端安裝的字體樣式。
參看以下代碼：
清單 5. Font-face 服務端字體案例
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
清單 5 中聲明的兩個服務端字體，其字體源指向「BORDERW0.eot」和「RUNICMT0.eot」文件，並分別冠以「BorderWeb」和「Runic」的字體名稱。聲明以後，咱們就能夠在頁面中使用了：「 FONT-FAMILY: "BorderWeb" 」 和 「 FONT-FAMILY: "Runic" 」。
這種作法使得咱們在開發中若是須要使用一些特殊字體，而又不肯定客戶端是否已安裝時，即可以使用這種方式。
Word-wrap & Text-overflow 樣式
Word-wrap
先來看看 word-wrap 屬性，參考下述代碼：
清單 6. word-wrap 案例
<div style="width:300px; border:1px solid #999999; overflow: hidden"> wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword </div> <div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword </div>
比較上述兩段代碼，加入了「word-wrap: break-word」，設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，文字此時已被打散。因此可見以下的差異：
圖 1. 沒有 break-word
圖 2. 有 break-word
Text-overflow
知道了 word-wrap 的原理，咱們再來看看 text-overflow，其實它與 word-wrap 是協同工做的，word-wrap 設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，而 text-overflow 則設置或檢索噹噹前行超過指定容器的邊界時如何顯示，見以下示例：
清單 7. Text-overflow 案例
.clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
width:200px;background:#ccc;}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
width:200px; background:#ccc;}
<div class="clip">
不顯示省略標記，而是簡單的裁切條
</div>
<div class="ellipsis">
當對象內文本溢出時顯示省略標記
</div>
如清單 7 所示，這裏咱們均使用「overflow: hidden」，對於「text-overflow」屬性，有「clip」和「ellipsis」兩種可供選擇。見圖 3 的效果圖。
圖 3. Text-overflow 效果圖
這裏咱們能夠看到，ellipsis 的顯示方式比較人性化，clip 方式比較傳統，咱們能夠依據需求進行選擇。
文字渲染（Text-decoration）
CSS3 裏面開始支持對文字的更深層次的渲染，咱們來看看下面的例子：
清單 8. Text-decoration 案例
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.75px;
}
這裏咱們主要以 webkit 內核瀏覽器爲例，清單 8 的代碼效果如圖 4：
圖 4. Text-decoration 效果圖
Text-fill-color: 文字內部填充顏色
Text-stroke-color: 文字邊界填充顏色
Text-stroke-width: 文字邊界寬度
CSS3 的多列布局（multi-column layout）
CSS3 如今已經能夠作簡單的佈局處理了，這個 CSS3 新特性又一次的減小了咱們的 JavaScript 代碼量，參考以下代碼：
清單 9. CSS3 多列布局
.multi_column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}
<div class="multi_column_style">
.................
.................
</div>
這裏咱們仍是以 webkit 內核瀏覽器爲例：
Column-count：表示佈局幾列。
Column-rule：表示列與列之間的間隔條的樣式
Column-gap：表示列於列之間的間隔
清單 9 的代碼效果圖如圖 5：
圖 5. 多列布局效果圖
顏色
css1和css2只能經過如下三種方式來表示顏色
- 顏色名稱
eg:color:red
- HEX方式
（語法：#RRGGBB或#RGB 各點的取值範圍爲00-FF）
- RGB方式
（語法：RGB(R,G,B) 各點的取值範圍爲0~255或者0%~200%）
css3針對上述模式不能表示透明，增長了以下表示方法
- RGBA模式
語法：RGBA(R,G,B,A) R紅色 G綠色 B藍色 A透明
各點取值跟RGB相似 A的取值爲0~1之間
eg:rgba(255,0,0,0.5)表示半透明紅色
- HSL模式（色輪模式）
語法：HSL(H,S,L) H色調 S飽合度 L亮度
H取值爲0~360之間 其中0或者360表示紅色 120表示綠色 240表示藍色
S和L取值都是0%到100%之間
- HSLA模式
語法及各點取值跟HSL模式一下，惟一不一樣在於後面的A表示透明度
eg:hsl(360,50%,50%,0.5) 紅色
其次在css3中能夠使用color:transparent和使用濾鏡filter:alpha(opacity=50) （不過濾鏡僅僅限於IE）
清單 10. 圓角案例
border-radius: 15px;
參見下面圓角效果：
Figure xxx. Requires a heading
CSS3 的漸變效果（Gradient）
線性漸變
左上（0% 0%）到右上（0% 100%）即從左到右水平漸變：
清單 13. 左到右的漸變
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
這裏 linear 表示線性漸變，從左到右，由藍色（#2A8BBE）到紅色（#FE280E）的漸變。效果圖以下：
圖 6. 簡單線性漸變效果圖
同理，也能夠有從上到下，任何顏色間的漸變轉換：
圖 7. 各類不一樣線性漸變效果圖
還有複雜一點的漸變，如：水平漸變，33% 處爲綠色，66% 處爲橙色：
清單 14. 複雜線性漸變
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
這裏的「color-stop」爲拐點，可見效果圖：
圖 8. 複雜線性漸變效果圖
徑向漸變
接下來咱們要介紹徑向漸變（radial），這不是從一個點到一個點的漸變，而從一個圓到一個圓的漸變。不是放射漸變而是徑向漸變。來看一個例子：
清單 15. 徑向漸變（目標圓半徑爲 0）
backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
前面「50,50,50」是起始圓的圓心座標和半徑，「50,50,0」藍色是目標圓的圓心座標和半徑，「color-stop(0.5,red)」是斷點的位置和色彩。這裏須要說明一下，和放射由內至外不同，徑向漸變恰好相反，是由外到內的漸變。清單 15 標識的是兩個同心圓，外圓半徑爲 50px，內圓半徑爲 0，那麼就是從黑色到紅色再到藍色的正圓形漸變。下面就是這段代碼的效果：
圖 9. 徑向漸變（目標圓半徑爲 0）效果圖
若是咱們給目標源一個大於 0 半徑，您會看到另一個效果：
清單 16. 徑向漸變（目標圓半徑非 0）
backgroud: -webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));
這裏咱們給目標圓半徑爲 10，效果圖以下：
圖 10. 徑向漸變（目標圓半徑非 0）
您能夠看到，會有一個半徑爲 10 的純藍的圓在最中間，這就是設置目標圓半徑的效果。
如今我再改變一下，再也不是同心圓了，內圓圓心向右 20px 偏移。
清單 17. 徑向漸變（目標圓圓心偏移）
backgroud: -webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));
這裏咱們給目標圓半徑仍是 10，可是圓心偏移爲「70，50」（起始圓圓心爲「50，50」）效果圖以下：
圖 11. 徑向漸變（目標圓圓心偏移）
想必您明白原理了，咱們能夠作一個來自頂部的漫射光，相似於開了盞燈：
清單 18. 徑向漸變（漫射光）
backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));
其效果以下：
圖 12. 徑向漸變（漫射光）
CSS3 的陰影（Shadow）和反射（Reflect）效果
首先來講說陰影效果，陰影效果既可用於普通元素，也可用於文字，參考以下代碼：
清單 19. 元素和文字的陰影
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
設置很簡單，對於文字陰影：表示 X 軸方向陰影向右 5px,Y 軸方向陰影向下 2px, 而陰影模糊半徑 6px，顏色爲 rgba(64, 64, 64, 0.5)。其中偏移量能夠爲負值，負值則反方向。元素陰影也相似。參考一下效果圖：
圖 13. 元素和文字的陰影效果圖
接下來咱們再來談談反射，他看起來像水中的倒影，其設置也很簡單，參考以下代碼：
清單 20. 反射
.classReflect{
-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent),
to(rgba(255, 255, 255, 0.51)));
}
設置也很簡單，你們主要關注「-webkit-box-reflect: below 10px」，他表示反射在元素下方 10px 的地方，再配上漸變效果，可見效果圖以下：
圖 14. 反射效果圖
CSS3 的背景效果
CSS3 多出了幾種關於背景（background）的屬性，咱們這裏會簡單介紹一下：
首先：「Background Clip」，該屬肯定背景畫區，有如下幾種可能的屬性：
* background-clip: border-box; 背景從 border 開始顯示 ;
* background-clip: padding-box; 背景從 padding 開始顯示 ;
* background-clip: content-box; 背景顯 content 區域開始顯示 ;
* background-clip: no-clip; 默認屬性，等同於 border-box;
一般狀況，咱們的背景都是覆蓋整個元素的，如今 CSS3 讓您能夠設置是否必定要這樣作。這裏您能夠設定背景顏色或圖片的覆蓋範圍。
其次：「Background Origin」，用於肯定背景的位置，它一般與 background-position 聯合使用，您能夠從 border、padding、content 來計算 background-position（就像 background-clip）。
* background-origin: border-box; 從 border. 開始計算 background-position;
* background-origin: padding-box; 從 padding. 開始計算 background-position;
* background-origin: content-box; 從 content. 開始計算 background-position;
還有，「Background Size」，經常使用來調整背景圖片的大小，注意別和 clip 弄混，這個主要用於設定圖片自己。有如下可能的屬性：
* background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
* background-size: cover; 擴展元素以填補元素（維持像素長寬比）
* background-size: 100px 100px; 縮小圖片至指定的大小 .
* background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包 含元素的尺寸 .
最後，「Background Break」屬性，CSS3 中，元素能夠被分紅幾個獨立的盒子（如使內聯元素 span 跨越多行），background-break 屬性用來控制背景怎樣在這些不一樣的盒子中顯示。
* background-break: continuous; 默認值。忽略盒之間的距離（也就是像元 素沒有分紅多個盒子，依然是一個總體一 樣）
* background-break: bounding-box; 把盒之間的距離計算在內；
* background-break: each-box; 爲每一個盒子單獨重繪背景。
這種屬性讓您能夠設定複雜元素的背景屬性。
最爲重要的一點，CSS3 中支持多背景圖片，參考以下代碼：
清單 21. 多背景圖片
div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x;
}
此爲同一元素兩個背景的案例，其中一個重複顯示，一個不重複。參考一下效果圖：
圖 15. 多背景圖片
CSS3 的盒子模型
盒子模型爲開發者提供了一種很是靈活的佈局方式，可是支持這一特性的瀏覽器並很少，目前只有 webkit 內核的新版本 safari 和 chrome 以及 gecko 內核的新版本 firefox。
下面咱們來介紹一下他是如何工做的，參考以下代碼：
清單 22. CSS3 盒子模型
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item flex">
4
</div>
</div>
默認狀況下，若是「boxcontainer」和「item」兩個 class 裏面沒有特殊屬性的話，因爲 div 是塊狀元素，因此他的排列應該是這樣的：
圖 16. CSS3 盒子模型效果圖
下面，咱們加入相關 CSS3 盒子模型屬性：
清單 23. CSS3 盒子模型（水平排列）
.boxcontainer {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.item {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}
注意這裏的「display: -webkit-box; display: -moz-box;」，它針對 webkit 和 gecko 瀏覽器定義了該元素的盒子模型。注意這裏的「-webkit-box-orient: horizontal;」，他表示水平排列的盒子模型。此時，咱們會看到以下效果：
圖 17. CSS3 盒子模型（水平排列）效果圖
細心的讀者會看到，「盒子」的右側多出來了很大一塊，這是怎麼回事呢？讓咱們再來看一個比較有特色的屬性：「flex」， 參考以下代碼：
清單 24. CSS3 盒子模型（flex）
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item flex">
4
</div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
您看到什麼區別了沒？在第四個「item 元素」那裏多了一個「flex」屬性，直接來看看效果吧：
圖 18. CSS3 盒子模型（flex）效果圖
第四個「item 元素」填滿了整個區域，這就是「flex」屬性的做用。若是咱們調整一下「box-flex」的屬性值，並加入更多的元素，見以下代碼：
清單 25. CSS3 盒子模型（flex 進階）
<div class="boxcontainer">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item flex2">
3
</div>
<div class="item flex">
4
</div>
</div>
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.flex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
}
咱們把倒數第二個元素（元素 3）也加上「box-flex」屬性，並將其值設爲 2，可見其效果圖以下：
圖 19. CSS3 盒子模型（flex 進階）效果圖
因而可知，元素 3 和元素 4 按比例「2:1」的方式填充外層「容器」的餘下區域，這就是「box-flex」屬性的進階應用。
還有，「box-direction」能夠用來翻轉這四個盒子的排序，「box-ordinal-group」能夠用來改變每一個盒子的位置：一個盒子的 box-ordinal-group 屬性值越高，就排在越後面。盒子的對方方式能夠用「box-align」和「box-pack」來設定。
瞭解更多爆料
CSS3 的 Transitions, Transforms 和 Animation
Transitions
先說說 Transition，Transition 有下面些具體屬性：
transition-property：用於指定過渡的性質，好比 transition-property:backgrond 就是指 backgound 參與這個過渡
transition-duration：用於指定這個過渡的持續時間
transition-delay：用於制定延遲過渡的時間
transition-timing-function：用於指定過渡類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
可能您以爲摸不着頭腦，其實很簡單，咱們用一個例子說明，參看一下以下代碼：
清單 26. CSS3 的 Transition
<div id="transDiv" class="transStart"> transition </div>
.transStart {
background-color: white;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.transEnd {
background-color: red;
}
這裏他說明的是，這裏 id 爲「transDiv」的 div，當它的初始「background-color」屬性變化時（被 JavaScript 修改），會呈現出一種變化效果，持續時間爲 0.3 秒，效果爲均勻變換（linear）。如：該 div 的 class 屬性由「transStart」改成「transEnd」，其背景會由白（white）漸變到紅（red）。
Transform
再來看看 Transform，其實就是指拉伸，壓縮，旋轉，偏移等等一些圖形學裏面的基本變換。見以下代碼：
清單 27. CSS3 的 Transform
.skew {
-webkit-transform: skew(50deg);
}
.scale {
-webkit-transform: scale(2, 0.5);
}
.rotate {
-webkit-transform: rotate(30deg);
}
.translate {
-webkit-transform: translate(50px, 50px);
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}
「skew」是傾斜，「scale」是縮放，「rotate」是旋轉，「translate」是平移。最後須要說明一點，transform 支持綜合變換。可見其效果圖以下：
圖 20. CSS3 的 Transform 效果圖
如今您應該明白 Transform 的做用了吧。結合咱們以前談到的 Transition，將它們二者結合起來，會產生相似旋轉，縮放等等的效果，絕對能使人耳目一新。
Animation
最後，咱們來講說 Animation 吧。它能夠說開闢了 CSS 的新紀元，讓 CSS 脫離了「靜止」這一約定俗成的前提。以 webkit 爲例，見以下代碼：
清單 28. CSS3 的 Animation
@-webkit-keyframes anim1 {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: anim1 ;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
首先，定義動畫的內容，如清單 28 所示，定義動畫「anim1」，變化方式爲由「透明」（opacity: 0）變到「不透明」（opacity: 1），同時，內部字體大小由「12px」變到「24px」。而後，再來定義 animation 的變化參數，其中，「duration」表示動畫持續時間，「iteration-count」表示動畫重複次數，direction 表示動畫執行完一次後方向的變化方式（如第一次從右向左，第二次則從左向右），最後，「timing-function」表示變化的模式。
其實，CSS3 動畫幾乎支持全部的 style 變化，能夠定義各類各樣的動畫效果以知足咱們用戶體驗的須要。
這裏，咱們介紹了 CSS3 的主要的新特性，這些特性在 Chrome 和 Safari 中基本都是支持的，Firefox 支持其中的一部分，IE 和 Opera 支持的較少。讀者們能夠根據集體狀況有選擇的使用。
結束語
本文介紹了 Web 開發中關於 CSS3 的一些內容，由淺入深的逐步引出 CSS3 的各類相關屬性。基於各個 CSS3 屬性的原理，經過實際的源代碼介紹各個 CSS3 新特性的特色，使用方式以及使用中須要注意的地方。在每一個新特性的代碼示例後面，經過示例圖，給 Web 開發人員一種比較直觀的視覺感覺。在 Web2.0 愈來愈流行的今天，熟練掌握並能很好的運用 CSS3 的一些特性會給咱們的項目帶來史無前例的用戶體驗效果。
菜鳥進階——grunt
開始學習 Grunt
它就是一個工具框架，有不少插件擴展它的功能。
是一套前端自動化工具，基於nodeJS的命令行工具，通常用於：
① 壓縮文件
②合併文件
③簡單語法檢查
Grunt 基於 Node.js ，用 JS 開發，這樣就能夠藉助 Node.js 實現跨系統跨平臺的桌面端的操做，例如文件操做等等。此外，Grunt 以及它的插件們，都做爲一個 包 ，能夠用 NPM 安裝進行管理。
因此 NPM 生成的 package.json 項目文件，裏面能夠記錄當前項目中用到的 Grunt 插件，而 Grunt 會調用 Gruntfile.js 這個文件，解析裏面的任務（task）並執行相應操做。
若是你對 Node.js、NPM 這些名詞不太熟悉，建議先去搜索瞭解一下，由於下面的命令會涉及到它們，可是本文不會過多介紹。
安裝 Grunt
Grunt 依賴 Node.js 因此在安裝以前確保你安裝了 Node.js。（可在官網上下載）而後開始安裝 Grunt。
實際上，安裝的並非 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，這樣你就能夠使用 grunt 命令來執行某個項目中的 Gruntfile.js 中定義的 task 。可是要注意，Grunt-cli 只是一個命令行工具，用來執行，而不是 Grunt 這個工具自己。
安裝 Grunt-cli 須要使用 NPM，使用下面一行便可在全局範圍安裝 Grunt-cli ，換句話說，就是你能夠在任何地方執行 grunt 命令：
npm install -g grunt-cli
須要注意，由於使用 －g 命令會安裝到全局，可能會涉及到系統敏感目錄，若是用 Windows 的話，可能須要你用管理員權限，若是用 OS X ／ Linux 的話，你可能須要加上 sudo 命令。
下面咱們新建一個項目目錄，並新建一些文件，這裏我準備了一份很簡單的項目，放在了 Github 上，下面操做將以此來操做，你能夠下載或者 clone 下來： https://github.com/yujiangshui/gruntxx
生成 package.json 文件
這個 package.json 文件實際上是 Node.js 來描述一個項目的文件，JSON 格式。生成這個文件超級簡單，推薦用命令行交互式的生成一下：
打開命令行，cd gruntxx 文件夾下面，輸入指令 npm init 以後，就出來不少信息，而後開始填寫項目名稱，填寫好了以後回車便可。其實這裏你一路回車下去也無妨，可是建議你細細的填一下，不明白的跳過好了。
填寫好了以後，查看目錄就會發現生成 package.json 文件了，這樣就算生成好了。
其實就是一個文件而已，你以爲這種方式麻煩，徹底能夠新建一個文件，而後將相似下面的代碼複製進去，改一下對應選項，保存成 package.json 文件就能夠：
{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { } }
最後我生成的代碼以下：
{
"name": "gruntxx",
"version": "0.0.1",
"description": "學習 grunt",
"repository": {
"type": "git",
"url": "https://github.com/yujiangshui/gruntxx.git"
},
"author": "Jiangshui",
"license": "MIT",
"bugs": {
"url": "https://github.com/yujiangshui/gruntxx/issues"
},
"homepage": "https://github.com/yujiangshui/gruntxx"
}
但這時咱們尚未在項目文件中安裝 Grunt 以及相關任務插件。
安裝 Grunt 和所須要的插件
就如今的這個示例項目而言，我打算讓 Grunt 幫忙實現下面幾個功能：檢查每一個 JS 文件語法、合併兩個 JS 文件、將合併後的 JS 文件壓縮、將 SCSS 文件編譯、新建一個本地服務器監聽文件變更自動刷新 HTML 文件。
差很少就是這些，根據這些任務需求，須要用到：
- 合併文件：grunt-contrib-concat
- 語法檢查：grunt-contrib-jshint
- Scss 編譯：grunt-contrib-sass
- 壓縮文件：grunt-contrib-uglify
- 監聽文件變更：grunt-contrib-watch
- 創建本地服務器：grunt-contrib-connect
它們的命名和文檔都很規範，由於這些是官方提供的比較經常使用的插件。這些插件同時都是 NPM 管理的包，好比 grunt-contrib-concat - npm 你也能夠在這上面看到用法等。
下面咱們就要在這個項目中安裝這些插件，執行命令：
npm install grunt --save-dev
表示經過 npm 安裝了 grunt 到當前項目，同時加上了 —save-dev 參數，表示會把剛安裝的東西添加到 package.json 文件中。不信你打開 package.json 文件看下，是否是多了
"devDependencies": { "grunt": "^0.4.5" }
沒錯，這個的意思就是當前項目依賴 grunt，後面是它的版本，我們不用管。若是安裝的時候沒有添加 —save-dev 參數，這裏就不會出現了，你須要自行添加上去。
下面咱們來安裝 Grunt 的插件，固然，不須要一個個的安裝，太麻煩了，咱們能夠：
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect
等待一大串亂七八糟的下載狀態，咱們把 grunt 和相關插件都安裝好了，不信看下是否是多了一個 node_modules 文件夾？打開看下，裏面就是我們剛安裝的插件。
配置 Gruntfile.js 的語法
插件也裝好了，開始寫任務吧！既然是要程序來讀取執行，必要要有必定的語法規範，下面來簡單的說一下：
首先要明白，這是一個 JS 文件，你能夠寫任意的 JS 代碼，好比聲明一個 對象 來存儲一會要寫任務的參數，或者是一個變量看成開關等等。
而後，全部的代碼要包裹在
module.exports = function(grunt) { ... };
裏面。沒有爲何。
在這裏面的代碼，除去你本身寫的亂七八糟的 JS，與 Grunt 有關的主要有三塊代碼：任務配置代碼、插件加載代碼、任務註冊代碼。
顧名思義，這三塊代碼，任務配置代碼就是調用插件配置一下要執行的任務和實現的功能，插件加載代碼就是把須要用到的插件加載進來，任務註冊代碼就是註冊一個 task，裏面包含剛在前面編寫的任務配置代碼。
這樣，就能夠用 grunt 來執行註冊的一個 task 從而根據任務配置代碼調用須要的插件來執行相應的操做。
下面來分別看一下這三塊代碼的寫法。
任務配置代碼
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
能夠看出，具體的任務配置代碼以對象格式放在 grunt.initConfig 函數裏面，其中先寫了一句 pkg: grunt.file.readJSON('package.json') 功能是讀取 package.json 文件，並把裏面的信息獲取出來，方便在後面任務中應用（例以下面就用了 <%= pkg.name %> 來輸出項目名稱），這樣能夠提升靈活性。以後就是 uglify 對象，這個名字是固定的，表示下面任務是調用 uglify 插件的，首先先配置了一些全局的 options 而後新建了一個 build 任務。
也就是說，在 Uglify 插件下面，有一個 build 任務，內容是把 XX.js 壓縮輸出到 xx.min.js 裏面。若是你須要更多壓縮任務，也能夠參照 build 多寫幾個任務。
至於怎麼寫出來 options 裏面的參數和 build 裏面的參數內容，這纔是 grunt 學習的難點，你須要查看每一個插件的用法，根據用法來編寫任務，能夠看下 grunt-contrib-uglify 的官方文檔，往下面拉你就能夠看到參數和使用方法了。
這樣，咱們就新建了一個基於 uglify 的任務 build，功能是把 src/<%= pkg.name %>.js 壓縮輸出 build/<%= pkg.name %>.min.js。
插件加載代碼
這個就超級簡單了，因爲上面任務須要用到 grunt-contrib-uglify，當 grunt-contrib-uglify 安裝到咱們的項目以後，寫下下面代碼便可加載：
grunt.loadNpmTasks('grunt-contrib-uglify');
任務註冊代碼
插件也加載了，任務也佈置了，下面咱們得註冊一下任務，使用
grunt.registerTask('default', ['uglify']);
來註冊一個任務。上面代碼意思是，你在 default 上面註冊了一個 Uglify 任務，default 就是別名，它是默認的 task，當你在項目目錄執行 grunt 的時候，它會執行註冊到 default 上面的任務。
也就是說，當咱們執行 grunt 命令的時候，uglify 的全部代碼將會執行。咱們也能夠註冊別的 task，例如：
grunt.registerTask('compress', ['uglify:build']);
若是想要執行這個 task，咱們就不能只輸入 grunt 命令了，咱們須要輸入 grunt compress 命令來執行這條 task，而這條 task 的任務是 uglify 下面的 build 任務，也就是說，咱們只會執行 uglify 裏面 build 定義的任務，而不會執行 uglify 裏面定義的其餘任務。
這裏須要注意的是，task 的命名不能與後面的任務配置同名，也就是說這裏的 compress 不能命名成 uglify，這樣會報錯或者產生意外狀況
OK，加上這三塊代碼，咱們的示例 Gruntfile.js 就是這樣子的：
module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };
這就是官方那個坑爹示例，貌似 uglify 的參數好像不對，反正我以前學習的時候，無法運行這個配置，下面咱們來根據示例項目和咱們的需求配置一下。
配置 Gruntfile.js
先從簡單的入手，咱們先來配置一下編譯 Scss 文件的 task。先新建一個 Gruntfile.js 文件，把大致的配置結構複製進去：
module.exports = function(grunt) { var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.registerTask('outputcss',['sass']); grunt.registerTask('default'); };
應該能夠看懂把？這裏再也不贅述了，咱們來根據 Sass 文檔，編寫一個 Sass 任務 output ：
module.exports = function(grunt) { var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { output : { options: { style: sassStyle }, files: { './style.css': './scss/style.scss' } } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.registerTask('outputcss',['sass']); grunt.registerTask('default'); };
意思就是將 ./scss/style.scss 這個文件以 sassStyle 變量存儲的方式編譯成 根目錄下面的 style.css 文件。
下面拿起命令行，cd 到當前文檔目錄，執行一下 grunt 命令，結果報錯 undefined，沒錯，由於咱們的 default task 裏面沒有定義任何任務，而後執行 grunt outputcss 命令，提示編譯 Scss 文件成功，固然前提是你的 Scss 語法正確，若是有問題就不會成功。
下面咱們打算先把 src 目錄下面的兩個 JS 文件合併起來，而後再用 jshint 檢測一下是否有語法問題，若是正確，再用 uglify 對合並起來的文件進行壓縮。
參照 grunt-contrib-concat 的官方文檔，咱們能夠寫出下面的任務：
module.exports = function(grunt) { var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { output : { options: { style: sassStyle }, files: { './style.css': './scss/style.scss' } } }, concat: { options: { separator: ';', }, dist: { src: ['./src/plugin.js', './src/plugin2.js'], dest: './global.js', }, } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('outputcss',['sass']); grunt.registerTask('concatjs',['concat']); grunt.registerTask('default'); };
執行 grunt concatjs 以後，就會發現根目錄多了一個 global.js 文件，裏面是兩個文件合併起來的。而後相似的繼續看 uglify 和 jshint 的文檔，咱們就能夠根據需求寫出下面任務：
module.exports = function(grunt) { var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { output : { options: { style: sassStyle }, files: { './style.css': './scss/style.scss' } } }, concat: { options: { separator: ';', }, dist: { src: ['./src/plugin.js', './src/plugin2.js'], dest: './global.js', }, }, uglify: { compressjs: { files: { './global.min.js': ['./global.js'] } } }, jshint: { all: ['./global.js'] } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('outputcss',['sass']); grunt.registerTask('concatjs',['concat']); grunt.registerTask('compressjs',['concat','jshint','uglify']); grunt.registerTask('default'); };
其中註冊了一個 compressjs 任務 grunt.registerTask('compressjs',['concat','jshint','uglify']); 意思就是依次執行 合併、檢查、壓縮 任務。咱們把剛生成的 global.js 文件刪掉，在命令行執行 grunt compressjs 任務，結果 jshint 報錯了：
未完待續····
$(#form :input)與$(#form input)的區別
相信你們都很奇怪這二者的區別
我從兩個方面簡單介紹下
1. $("form :input") 返回form中的全部表單對象，包括textarea、select、button等
$("form input")返回form中的全部input標籤對象
2. form input 是屬於層級選擇器(將每個選擇器匹配到的元素合併後一塊兒返回) form :input是屬於表單選擇器(匹配全部input,textarea,select,button等）