前言
2010年MIX大會上微軟的工程師在介紹IE9時，以前端角度講互聯網發展分為了三個階段：
1 以內容為主的web1.0網絡，前端主流技術為html與css
2 以ajax為首的異步數據加載技術，熱門技術是js/dom/異步數據請求
3 便是即將迎來的HTML5+CSS3的時代
PS：我記得大概08年的時候，ajax便在大事宣揚，但我私下發現周圍會的人真心不多，應用也不多！！！
到今天5年過去了，你頁面不是ajax的都不好意思拿出來說，於是我在想5年后若是頁面不是html5的，好意思拿出來說嗎？？？
因為，我css水平比較水，所以學習CSS3時候也順便復習下css2的東西，真是一舉兩得啊！
因為這個系列都是邊學邊寫的，可能會比較亂或者我唧唧哇哇說很多話，請各位同學見諒了。
抱怨的正文
關於選擇器
哎，坑個爹！這篇文章開始的題目不是這個啦！！！他開始的題目是“css3初探之選擇器”，我硬是在電腦面前呆若木雞了將近半個時辰。。。
發現一個事實，css確實坑爹！想我上個星期學html5時，基本上每天都會知道學什么，每天都會知道學的東西是干什么的，但是CSS3呢？？
我們來看一下，他的第一章是“選擇器”，我一看又多了屬性選擇器，里面還用到了正則表達式。。。。
對，確實是正則表達式，我在想我們很多重構工程師都是妹妹，而且都只會將圖片變成html（我們原來的美工只會作圖呢，要他形成頁面就是折磨他折磨自己）。
現在選擇器居然加上了一個這則表達式，這不坑爹嗎？先不說效率會不會有問題，光說我就不會用的。
我們來看看CSS2中的選擇器已經夠了吧，我感覺都夠用了，CSS3多出的其它選擇器都可以接受，唯獨這個與正則有關的。。。。
關於選擇器在頁面插入內容
若是上面那個問題還可以理解，可以結束，這個功能的出現，小的就直接以為他在坑爹了，他做了個什么事情呢，我們來看看。
css3提供了一個content屬性，可以讓我們在某個選擇器元素后面插入文字甚至插入圖片！！！
好吧，我忍了很久了，我們不是說好了嗎？html控制結構，css控制樣式，js控制行為，我倒是在想css3這個功能的出現究竟想干什么。。。。
就我看來無論什么提示信息都該屬於html的一部分，就算與js有關也好啊！我尤其不能接受居然使用css輸出的。
關於其它
然后我們再看看后面的內容，這不就靠譜多了嗎？
文字與字體的樣式相關盒模型相關樣式
背景與邊框
變形處理
動畫功能
布局相關
......
瞧瞧下面這些，這些才對嘛，這些才是css3應該處理的問題嘛。
既然說它難，那它為什么難？
我感覺CSS3學習困難，那么我們來就應該分析下它為什么學起來困難：
我學html或者js都是以單一知識點做學習，可以形成demo，但對css來說，我寫了幾個標簽，我然后寫了幾個選擇器.......好沒成就感啊！！！
因為html與js的知識點分散、而相對獨立所以好學；但是css獨立嗎？他其實也獨立的，但我們不能在網頁上獨立的輸出一段文字或者一個框吧。。。
於是我想到了，用css做一個完整的圖，不錯，這是一個比較不錯的點子，但是他太大了，做的時候很容易就不知道哪里該是哪里了，是比較困難的。
所以我這里總結下對我來說學習css困難的原因：
1 不能形成有效的demo
2 由於1沒有成就感，從而沒有干勁；
那么，這里又引出了一個問題：
如何學習CSS3
屁話，當然是慢慢學了，不能因為剛剛抱怨了一通就不學了，學習還是要講誠信的，我們不能歧視，不能逃避。。。。。
我這里就從文字這塊開始學習吧，在最后學習結束后再找2、3張圖形成完整的頁面，這樣應該達到目的了！
文本縮進
text-indent 可以用於塊級元素的文本縮進
text-indent
1 <!DOCTYPE html> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 div { text-indent: 10px;} 8 </style> 9 </head> 10 <body> 11 <div> 12 我感覺CSS3學習困難，那么我們來就應該分析下它為什么學起來困難： 我學html或者js都是以單一知識點做學習，可以形成demo，但對css來說，我寫了幾個標簽，我然后寫了幾個選擇器.......好沒成就感啊！！！ 13 因為html與js的知識點分散、而相對獨立所以好學；但是css獨立嗎？他其實也獨立的，但我們不能在網頁上獨立的輸出一段文字或者一個框吧。。。 於是我想到了，用css做一個完整的圖，不錯，這是一個比較不錯的點子，但是他太大了，做的時候很容易就不知道哪里該是哪里了，是比較困難的。 14 所以我這里總結下對我來說學習css困難的原因： 1 不能形成有效的demo 2 由於1沒有成就感，從而沒有干勁； 那么，這里又引出了一個問題： 15 </div> 16 </body> 17 </html>
若是設置負值的話文字將不會被顯示：
文本對齊
text-align 會影響一個元素中文本的對齊方式；應用於塊級元素
BUG 在IE6中會把text-align理解為center元素，導致完全居中，因為ie6中margin: 0 auto;居中不管用，所以這居然提供了一個居中的方法。。。
居中對齊還是比較簡單的，我們就不做討論了，下面來看看垂直對齊：
行高line-height是指文本行基線之間的距離，而不是指字體大小，他確定了將各個元素框的高度增加或減少多少（應用於多有元素）。
在最基本情況下，指定line-height可以用來增加（減少）文本行之間的垂直間隔；
但其實是line-height控制了行間距，即文本行之間超出字體大小的額外空間，再直白點：line-height和字體大小之差就是行間距。
文本行中每個元素都會生成一個內容區，它由字體大小確定，
這個內容區會生成一個“行內框inline box”，如果不存在其它因素這個行內框就完全等於元素內容區。
由line-height產生的行間距就是增加或者減少各個inline-box高度因素之一。
要確定一個給定元素的行內框，只需用line-height減去font-size，這個就是行間距（可能是負值），將之除以2便是元素inline-box
根據以上所述，我們可以得到兩個結論：
1 當font-size大於line-height時，文本上下就會產生重合。
2 因為font-size固定以及line-height固定，所以可以得到相同的行間距，其實也就確定了每個元素的inline-box了。
另外，若不給line-height設置值，他將會是font-size的1.2倍。
文字陰影
可以使用text-shadow給頁面上的文字添加陰影效果
text-shadow: len len len color;
第一個參數為橫向偏移距離
第二個參數為縱向偏移距離
第三個參數為陰影的模糊半徑
最后一個為顏色
幾個屬性可以不寫
話說帶陰影的字真好看，若是作為標題神馬的還真是不錯，而且一個文字可以指定多個陰影：
文本自動換行word-break
原來ie瀏覽器就支持該屬性了，現在其他瀏覽器也支持了，所以我們貌似可以直接拿來用。
瀏覽器本身自帶換行功能，但若是一個單詞過長或者數字過大，比如比爾的資金。。。那么瀏覽器估計就不能換行了，因為瀏覽器嫉妒。。。
這個時候我們一般用word-break: break-all解決之。
然后用word-wrap: break-word時瀏覽器不出現滾動條。
......此處省略4千字。。。
結語
莫名其妙的一章就看完了，說實話沒什么感覺，而且時間用的比搞其他事情多，明天繼續吧。。。