DIV CSS 佈局教程網

通常來說，CSS非常簡單。但是當浏覽器廠商開始實現CSS3特性，問題開始變得有些復雜了。不難，只是有些復雜。這可能包括兩個方面：首先有些心得CSS3屬性(比如，transition、漸變、transform等)不是那麼簡單，其次我們不得不使用浏覽器廠商指定擴展。

直到你最喜歡用的IDE原生支持CSS3，你最好的伙伴將是CSS3生成器、手冊、參考指南以及基於JS的方案。這正是本文要推薦的，這裡將收集能夠助你學習和使用CSS3的真正有用的工具。

生成器

• CSS3 Please!跨浏覽器的CSS規則生成器，支持：border-radius、box-shadow、漸變(線性)、rgba色彩、transform (旋轉)、transition和@font-face。
• CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
• CSS3 Sandbox有一些列的CSS3生成器：線性漸變、放射漸變、文字陰影、盒陰影、Transforms和文字描邊。
• @font-face生成器來自於Font Squirrel的很好用的CSS3 @font-face 生成器。
• CSS3漸變生成器為Firefox和Webkit浏覽器生成線性漸變。
• CSS 圓角生成用於Firefox、Webkit和標准CSS3語法的“border-radius”屬性。
• Webkit CSS3 生成器簡單的助你理解Webkit引入的CSS3特性。
• CSS3 學習工具動態為你的浏覽器獲取私有前綴並檢測該屬性是否被它支持。

JavaScript方案

• Modernizr一個確實很有用的JavaScript庫，可以檢測Html5/CSS3的原生支持，並為你提供一種維護良好控制級別的方法，不管浏覽器的能力。如果你更喜歡使用MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)
• Sizzle – JavaScript 選擇器庫一個純Javascript選擇器引擎，被設計用來方便的插入到一個主庫中。Sizzle 實際上支持所有的CSS3 選擇器——它甚至包括一些很不常用的選擇器，比如忽略選擇器(escaped selectors )(”.foo\\+bar”)、Unicode 選擇器、以及在document序列中返回的結果。這也是jQuery使用的選擇器引擎。
• YUI 選擇器組件YUI CSS3 選擇器組件，提供一個收集、過濾和測試Html元素的穩定的簡寫方法。
• IE7-JS一個讓IE擁有兼容標准的浏覽器一樣的行為的JavaScript庫。
• CSS3偽類選擇器模擬IE-css3.JS 可使Internet Explorer識別CSS3 偽類選擇器並渲染任何使用它們定義的樣式規則。簡單滴在你的頁面中引入這個腳本，然後在你的樣式表中使用這些偽類選擇器，然後IE就可以使用了。

參考指南

• CSS 3.0參考手冊
  騰訊ISD WebTeam制作的一個CHM格式的參考手冊，很全面，介紹+實例，推薦下載收藏；
• 我什麼時候能用CSS3CSS3、Html5、SVG以及其它即將可用的頁面技術的浏覽器兼容性列表；
• 浏覽器支持清單使用Modernizr庫檢測你的浏覽器支持的“高級”特性，包括CSS3特性和選擇器的支持。
• CSS3選擇器測試自動運行大量的判斷你的浏覽器是否支持一些CSS選擇器的小測試；
• SelectOracle一個提供CSS2和CSS3選擇器介紹的在線工具。簡單的給它一些選擇器，他就會返回選擇器匹配的相關說明。
• CSS3手冊與快速指南提供當前CSS3規范的列表，列出屬性可用的值、常用的選擇器模式參考，以type/單位組織，選擇器類型參考和單位參考和信息(另有PDF 版本)；
• CSS3偽類SitePoint的CSS參考的相關部分內容；
• CSS3 速查手冊CSS3屬性、選擇器類型以及可用的值的列表，PDF格式；

CSS3色彩名稱

提供所有147種色彩的名字以及按照字母排序的值。

如有更多有用的工具，歡迎通過評論分享。