轉載請註明來源： http://blog.csdn.net/milado_nju/article/details/7529549
# CSS初探
## 概述
先談談HTML網頁的開發者們所遭遇地痛苦和悲慘的經歷。在CSS出現前或者出現早期，HTML因爲要設計不同風格和樣式的元素，所以在不停地加入很多新的元素來表示，例如p，span。然後，問題還是存在，那就是大量的使用表格（Table）元素來排列網頁中的元素，這導致一些不好的問題，其一，Table經常嵌Table，導致網頁較大，消耗帶寬，其二，被搜索引擎解析後，其內容變得雜亂無章。慶幸地是，CSS的出現極大地解決了這些問題。
CSS的全稱是CascadingStyle Sheet, 中文名是級聯樣式表，是用來控制網頁顯示風格的，被廣泛地使用在網頁中，現在基本所有的瀏覽器支持它。其有一個比較重要的特徵就是將網頁的內容和展示的方式分離開，這很重要。另一個重要的特徵是它很強大，不是一般的強大，特別是新的CSS3標準，不僅能提供對頁面各個元素的精準控制，同時提供豐富多彩的樣式。簡而言之，CSS是一種非常出色的文本展示語言。
本章將簡單介紹CSS的一些基本功能，讓你對它有個大概地認識，後面的一章中，我們將會介紹它們如何在WebKit和chormium中獲得支持地。
下面給出一個雖然簡單但是卻展示了CSS衆多特徵的示例，CSS的主要部分在包含元素Style中，也就是下例中從第3行到第16行，同時JavaScript中也有使用部分對樣式的操作，後面的部分會對它們逐一加以解釋。
## CSS功能
### 選擇器
CSS的選擇器是一組模式，用來匹配相應的HTML元素。但選擇器匹配相應的元素時候，該選擇器包含的各種樣式的設置就會作用在選中的元素上。通過選擇器，CSS能夠精準地控制HTML頁面中的任意一個或者多個元素的屬性。看上面的例子中第四行。該行中的’div’就是一個選擇器，它屬於元素選擇器，其含義是選擇該頁面中的所有’div’元素。因爲僅有第20行包含一個’div’元素，所以，該選擇的選擇結果就是該元素。那麼，div下面所設置的樣式等屬性（花括號內）都會作用在該元素，從第6行到第16行。
示例中的選擇器僅是衆多選擇器類型中的一種，從CSS1到CSS3，規範陸續地加入了多達42種選擇器，極大地方便了開發者，下面介紹其中一些主要的選擇器：
標籤選擇器：根據元素的名稱來選擇，例如例子中的選擇器，可以選擇一個或者多個
類選擇器：根據類別信息來選擇目標元素，可以選擇一個或者多個，例子中選擇div元素也可以使用類選擇器，方法是”.aclass”；
ID選擇器：根據ID來選擇目標元素，僅能選擇一個，例子中選擇div元素也可以根據屬性選擇器，方法可以是”#adiv”
屬性選擇器: 根據屬性來選擇目標元素，可以選擇一個或者多個，例子中選擇div元素也可以使用屬性選擇器，方法是”div[id]”, ”div[id=’adiv’]”, ”div[id~=’di’]”, ”div[id|=’ad’]”；
後代選擇器: 選擇某元素包含的後代元素，可以選擇一個或者多個，例子中選擇div元素也可以使用後代選擇器，方法是”body div”；
子女選擇器: 選擇某元素包含的子女元素，可以選擇一個或者多個，例子中選擇div元素也可以使用後代選擇器，方法是”body>div”；
相鄰同胞選擇器: 根據相鄰同胞信息來確定選擇的元素，可以選擇一個或者多個，例子中選擇div元素也可以使用相鄰同胞選擇器，方法是”p+div”；
還有很多類型的選擇器，例如僞類選擇器，通用選擇器，羣組選擇器，根選擇器等等，這裏不再一一作介紹。
介紹了選擇器之後，後面還有個重要的問題，那就是優先級。因爲多個選擇器可能作用於同一個元素，它們設置的樣式屬性可能不一樣，這種情況下，應該怎麼確定使用哪種樣式。
一般而言，選擇器越特殊，它的優先級越高，也就是所選擇器指向的越準確，它的優先級就越高。例如，如果用1表示標籤選擇器的優先級，那麼類選擇器優先級是10，id選擇器就是100，數值越大表示優先級別越高。所以，儘量使用精確控制的選擇器，使用合理優先級的選擇。
### 各種屬性
從第6行到第16行設置選擇的元素的樣式屬性值，大致把這些屬性分成以下類別：
1. 背景：通常有兩種方式設置，一個是設置背景顏色（例子中的background-color）,另外一種設置背景圖片。
2. 文本：設置文本縮進，對齊，單詞間隔，字母間隔，字符轉換，裝飾，空白字符等
3. 字體：設置字體屬性，可以是內嵌的，也可以是自定義的方式，另外還可以設置加粗，變形等等。
4. 列表：設置列表類型，可以以字母，希臘字母，數字等變好列表
5. 表格：通過設置邊框來達到表格的目的，設置是否把表格邊框合併爲單一的邊框，設置分隔單元格邊框的距離，設置表格標題的位置，設置是否顯示錶格中的空單元格，設置顯示單元、行和列的算法等。
6. 框模型(box model): 框模型定義了元素框處理元素內容，內邊框，邊框和外邊距處理方式。在示例中包含屬性’border’，’padding’分別表示邊框和內邊距。
7. 定位：CSS提供相對，絕對地位和浮動定位。示例使用了絕對定位，參見第6到第8行。
從示例中相信你可以看到，CSS的基本單元就是選擇器加上它所包含的各個屬性設置，參看示例中第4行到第17行，CSS就是由多個這樣的基本單元所組成。在編寫CSS的時候，通過選擇器來精確控制需要選擇的元素，然後通過設置屬性值來讓這些元素展示出不同的顯示效果。
###CSS3新增功能
1. 選擇器：上面介紹屬性選擇器就是CSS3新加入的，除此之外，還加入了精確控制的選擇器用來選擇特定位置的子女，特定元素標籤的子女等等。
2. 樣式：增加了一些比較好的功能，例如自定義字體，圓角屬性，邊框顏色等等
3. 變換，過渡和動畫(transform,transition, animation)：CSS3提供令人驚奇的變好，轉變和動畫功能，另其更加的賞心悅目。規範的草案中定義了2D的變換，更爲喫驚的是WebKit提供了3D的變換。變換有三種類型，平移，旋轉和縮放。同2D不同的是，3D增加了繞Z軸的平移旋轉和縮放。有一點頗令人遺憾，那就是各個不同的瀏覽器對這些屬性的名字定義不一致，例如標準對變換的定義屬性名是’transform’，而webkit的是’-webkit-transform’，如例子中第15行所示，IE的’-ms-transform’, firefox的則是’-moz-transform’,opera的是’-o-transform’，這不免令人心煩意亂。過渡（transition）描述了屬性從一個值過渡到另一個值 的過程，定義了過程的時間，啓動過程的延遲時間等等。但是，這些標準草案中的定義還不足以描述更精確的變化過程，所以引入了更爲靈活的方式，這就是CSS動畫(animation)。通過動畫，你能夠定義不同的keyframes來控制中間變化過程而不僅僅是開始和結束。你可以這麼理解，過渡是一種較爲簡單和常見的動畫。
### CSS和JavaScript
在新的瀏覽器中，Javascript也可以方便且簡單地來操作設置css的值，看看例子第24行到34行的代碼。在函數’loop’中，但得到元素’adiv’後，可以通過設置它的style屬性來設置各個CSS的屬性值，例如本例中是要設置變換的不同角度，含義是通過不斷地改變’webkitTransform’的值來讓’adiv’元素繞Z軸旋轉起來，效果相當酷。
另外一個非常不錯的功能是，規範中引入了兩個新的JavaScript接口： querySelector和querySelectorAll。這兩個接口讓CSS定義的所有的選擇器都可以作爲參數傳給這兩個接口，從而獲取到相應的HTML頁面中的元素，這非常的有用，你值得試試。chromium，safari和Firefox都支持它。
在這一節結束前，強烈建議你將該示例在瀏覽器中嘗試（最好是chrome或者safari，如果是其它瀏覽器，可能需要做相應的屬性名修改），同時，逐一註釋掉每個屬性，看看它怎麼影響最終的顯示效果。
## 參考文獻
1. http://www.webkit.org/projects/layout/index.html
2. http://en.wikipedia.org/wiki/Tableless_web_design
3. http://www.w3schools.com/cssref/css_selectors.asp