聲明：本欄目所使用的素材都是凱哥學堂VIP學員所寫，學員有權匿名，對文章有最終解釋權；凱哥學堂旨在促進VIP學員互相學習的基礎上公開筆記。
CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。
CSS3完全向后兼容，所以沒有必要修改的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）。
樣式在HTML中的書寫方式： 樣式有三種書寫方式，第一種是直接在style屬性上寫，style里有很多的樣式子屬性，不同的字屬性使用分號分開，示例：
運行結果：
這種寫法適合用于個別標簽需要單獨樣式的情況下，如果好幾個標簽都需要同樣的樣式的話，使用這種寫法就會導致很多重復的代碼，不利于網頁的優化，所以第二種寫法就是在< style >標簽里聲明樣式屬性，之后只要是該樣式里定義的標簽就會統一使用< style >里聲明的樣式，示例：
運行結果：
第三種寫法是在css文件里聲明樣式，這種方式好處是可以共享更多的網頁，因為只需要使用< link >標簽引用這個文件就可以使用文件里聲明的樣式了。示例：
創建一個后綴為. css的文件，將樣式屬性的聲明寫在文件里：
然后在HTML文件里使用< link >標簽引用這個文件：
運行結果：
思維導圖：
樣式選擇器：
并不是所有的標簽都需要使用同一個樣式，而且不是全部標簽都得使用樣式，那么同樣的標簽要使用不同的樣式就需要使用到樣式選擇器了。
在這里介紹幾種較為常用的樣式選擇器：
element選擇器，直接寫標簽的名稱，也就是上面使用的那種方式，示例：
運行結果：
2.. class選擇器，要使用這個選擇器的標簽需要使用class屬性引用這個選擇器的名稱，也叫做類樣式，示例：
運行結果，只有使用class屬性引用了選擇器的標簽才會使用這個選擇器里的樣式，這些選擇器都可以寫在css文件里：
3.# id選擇器，要使用這個選擇器的標簽需要使用id屬性來引用這個選擇器的名稱，示例：
運行結果：
在這里要說明一下. class選擇器與# id選擇器的區別：id是唯一的是不可重復的，一個頁面只可以使用一次，class則可以多次引用，一個頁面內可以使用多次。雖然你重復地使用# id選擇器瀏覽器也可以正常解析，有些IDE也不會報語法錯誤，但是當你需要用JavaScript通過id來控制div時就會出現錯誤。
id相當于是一個唯一的標識，用于區分不同的結構和內容，就象身份證或名字，如果一個屋子有2個人同名，就會出現混淆。class則是一個樣式，可以套在任何結構和內容上，就象一件衣服。
所以從概念上說就是不一樣的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。
當我們使用# id選擇器時，應當遵循規范的語法不重復地去使用，要明白這兩個選擇器的區別。
錯誤寫法示例：
運行結果：
4.*選擇器，這個選擇器表示給所有的標簽都加上這個選擇器里的樣式：
運行結果：
element,element選擇器，使用逗號隔開可以給多個標簽定義樣式，示例：
運行結果：
element element選擇器，例如div p，選擇給div內部所有的p標簽定義樣式，示例：
運行結果：
element+element選擇器，例如div+p，選擇緊接著在div標簽后的那個p標簽（僅第一個有效），示例：
運行結果：
7.[attribute]選擇器，[]里寫屬性名稱，例如[title]，只要寫有括號里定義的屬性名稱就會使用此選擇器的樣式，示例：
運行結果：
這個選擇器也可以自己定義屬性的名稱，不一定要使用html里的屬性名稱，只要標簽里的屬性名稱和選擇器上定義的屬性名稱相同就可以了，示例：
運行結果：
8.[attribute=value]選擇器，只要標簽里屬性的名稱與值和選擇器里定義的屬性名稱和值相同，就會使用這個選擇器里的樣式，示例：
運行結果：
思維導圖：
CSS3選擇器參考：
