譯者：旭日云中竹
鏈接：http://www.zcfy.cc/article/1057
原文：https://medium.com/@bradley_nice/148-resources-to-help-you-become-a-css-expert-ced300b173e7

迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。

CSS3 資源

• 20個學習CSS3的有用資源
• CSS3 風暴?—?提示, 訣竅 和 技巧
• 20個非常有用的CSS3教程
• 令人激動的CSS3函數與特性: 30多個有用教程

參考資源與備忘錄

• CSS屬性指引?—— 一份清單，按字母表順序列出了每個CSS屬性。

• 層疊樣式表二修訂版1?—?這是W3C對CSS 2.1 作出的官方說明。
• CSS簡寫指引?—?覆蓋了基礎的CSS縮寫形式。
• CSS速查表?—?兩份表來自About.com?—?一份關于CSS基礎特性，一份關于CSS布局。
• 列表速建?—?該網站提供了大量的例子，告訴你如何使用CSS創建各種不同風格的列表。
• 經驗豐富的CSS設計師給初學者的指南?— 這里有大量的資源適用于CSS初學者。
• 組合CSS的5點提示?—?這篇文章提供了5個真正有效的方法，讓你更好地組織你的樣式表（而且，有助于以后的編輯修改）。
• 我的5個CSS提示?—?收集了5個用于更好地創建CSS的例子。
• 慣用模式與嚴格模式?- 在現代瀏覽器里面慣用模式與嚴格模式指南。
• CSS速查表(V2)?—?一份單頁的CSS參考書，列出了所有CSS 2.1的選擇器。
• 核心CSS: 第一篇?— 一份來自Refcardz的基礎CSS參考指南.
• CSS 簡寫速查表 (PDF)?—?CSS簡寫形式參考書.
• 使用 CSS (層疊樣式表)?—?基礎CSS指南，包含使用CSS的好處介紹.
• 5個方法快速寫成高質量的CSS?—?寫出高效CSS的一些提示。
• 使用CSS優化網頁打印效果?—?創建適用于打印的樣式表指南.
• 打印樣式表?—?創建打印樣式表的另一份指南.
• CSS 排版: 反差技巧、教程和CSS最佳實踐?—?收集了大量的CSS印刷資源。
• 高效編碼必備的CSS技巧?—?為了更好地編寫CSS而收集的CSS 技巧、意見和解決方案。

• 用CSS Reset來重置CSS樣式?—?一份重置樣式的完整指南。
• CSS結構化命名慣例?—?一篇關于元素命名的文章，這里講述基于元素本身的命名，而不是基于它們的位置或外觀。
• 用CSS風格指南提高代碼的可讀性?—?文章涵蓋5大技巧，讓你的代碼更加易于維護和管理。
• 寫好CSS的70個專業意見?—?搜集了一些關于寫好CSS的專業提示。
• 你必須知道的CSS浮動?—?一份幫你理解CSS浮動的指南.
• 完整的CSS指引?—?大量的資源，涵蓋了CSS的方方面面.
• 創建排印樣式對比的七個基本方法?—?文章列出了一些基本要素，關于在CSS里面使用充分的排版對比來營造優秀的樣式風格。
• 如何用CSS處理文本的大小?—?一篇關于處理CSS文本大小的透徹指南。
• CSS速查?— 一份非常完整的網頁CSS速查表.

• 每個人都應該知道的13條CSS訓練原則?—?列出了你應在注意的一些基本的CSS慣例.
• 資源指引?—?這是來自CSS Zen Garden的CSS資源指引。
• CSS美化?—?該網站提供了一些CSS消息、資源和畫廊.

• 使用CSS簡寫?—?一些CSS縮寫的參考指南。
• 網頁開發者手冊?—?This is a massive collection of CSS and other resources, including showcases, tools, and more.搜集了CSS以及一些其他的資源，如示例、工具等。
• 100個免費的CSS資源?—?大量CSS資源，包括相關的文章、教程、布局等等。

• 15個你可能從未用過的CSS屬性 (但或許要知道)?—?文章覆蓋了15個經常被忽視的CSS屬性，許多開發者可能都不知道它們的存在。
• CSS專家的10條原則?—?搜集了一些CSS大牛的重要原則和指南.
• 你應該知道的CSS特性?—?一份CSS權重特殊性指南，css權重是CSS里面最難掌握的知識點之一。
• 解決5個普遍的CSS難題?—?告訴你如何處理一些CSS難題，如 IE6 里面雙層外邊框的bug，以及無效樣式等。

教程與技巧

• 從零開始學CSS?—?這是一個非常基礎的教程，讓你從零開始學習CSS并用它創建第一個基礎網頁。該教程對于那些對網頁構建不了解的初學者來說，是很好的資源。

• 53個生存必備的CSS技巧?—?這里收集了大量的CSS技巧，從菜單到表單再到樣式表打印，都有相關介紹。
• CSS 陰影效果?—?一個關于如何用CSS給圖片加陰影的教程。
• CSS 選擇器教程?—?CSS選擇器的基本介紹以及它們是如何工作的。
• CSS 導航技巧?— 搜集了37個不同的CSS導航設計。

• 我一直使用的CSS技巧?—?A collection of CSS techniques Christian Montoya finds extremely valuable.
• CSS技巧綜述?—?20個CSS提示與訣竅?—?收集了關于CSS圓角和彈窗的一些技巧。
• CSS提示與小竅門?—?有效基礎的CSS技巧.
• 精通樣式表: 最有用的CSS技巧?—?用于清除和重置瀏覽器默認的樣式。

• 用CSS展示超鏈接提示?—?本教程告訴你如何快速使用CSS添加鏈接式圖標, 并且能夠兼容IE7, Safari和火狐。
• 10個你可能不知道的CSS訣竅?—?涵蓋了CSS字體、圖片替換、垂直居中等技巧。
• 10多個你可能不知道的CSS技巧?—?這篇文章涵蓋了塊級元素與行內元素、設置頁面最小寬度及不可見文本等。
• 用lists實現導航欄?—?這是個很棒的教程，一步步指導你如何用列表來制作導航欄。

• 用lists實現樹形圖?—?如何創建一個多層級無序的頁面樹形圖。
• 如何用CSS實現網頁重構?—?如何用CSS布局重構一個網頁。
• 一步步實現高級網頁布局?—?一步步教你創建一個高級的三欄布局。
• 從頭搭建CSS布局?—?該教程教你如何從零開始用CSS創建一個網頁。

• CSS 教程?—?來自 W3Schools 的完整教程。
• 樣式表?—?另一個非常全的CSS教程。
• CSS實現的精致圖表?—?創建特殊的圖表形式。
• 關于CSS的更多圓角技巧?—?教你如何創建支持PNG和alpha透明度的圓角。

• CSS菜單列表
• 如何向你的CSS文件添加變量?—?告訴你如何用PHP和Apache的URL向你的CSS文件添加變量。

• 跨瀏覽器CSS編碼的15個技巧和工具?—?文章涵蓋了15條以上的提示，都是關于如何用CSS解決跨瀏覽器的兼容問題。
• CSS 軸心化?—?如何創建CSS軸心化布局，包括中央CSS流式布局。
• 絕對定位在相對定位里面?—?關于如何在一個相對定位的父元素中絕對定位一個子元素的指南。
• Faux 絕對定位?—?關于把浮動和絕對定位結合起來的方法指南。
• 多行導航欄的垂直居中?—?使用浮動的方法實現列表對齊。
• 前10個CSS按鈕教程列表?—?收藏了10個創建CSS按鈕的最好教程。
• 山頂角?—?用CSS來實現的圓角。
• CSS 圓角綜述?—?收藏了CSS圓角的技巧和教程。
• CSS小竅門--自定義子彈頭?—?關于如何用CSS實現子彈頭的指南。

• CSS Swag: 多欄列表?—?A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns一份關于創建語義化的、有序的多欄列表指南。
• 改善打印版的鏈接展示?—?示范了打印輸出時如何在超鏈接文本中如何包含鏈接地址.
• 高級CSS菜單技巧?—?用CSS創建一個真正酷炫的、高級的、帶有模糊效果的菜單。
• CSS 菜單?—?一個關于用純CSS2（不包含JS）嵌套列表創建菜單面板的教程。
• CSS Tab菜單帶下拉效果?—?一個關于創建帶有下拉效果的CSS菜單教程。

• 高級CSS菜單?—?來自網頁設計墻的絢麗CSS菜單教程。
• 自動水平化tab?—?該教程教你如何創建帶有翻轉效果的水平菜單。
• 帶有翻轉效果的CSS圖標菜單?—?創建帶有CSS翻轉效果的菜單教程。
• 混雜的CSS下拉菜單?— 一個教你如何創建CSS下拉菜單并且做到優雅降級，結構合理的教程。

• 初學者CSS指南?—?給初識CSS者的完整指南。
• 開始CSS實戰?— 一個非常基礎的CSS實戰指南。
• 如何處理CSS大背景?—?處理CSS大背景的教程。
• 可擴張性強的CSS背景?—?關于創建高度自定義和自適應網站的教程。
• 用CSS做各種事情: 50多個富有創意的列子和教程?—?收藏了50多個創建獨特CSS布局的教程。
• 用Firebug快速簡單的開發CSS?—?一份關于使用Firebug提高網頁設計的指南。
• 10漂亮的CSS排版例子?—?提供了很棒的CSS排版例子并且有教程指導如何創建。

• 16個可用的CSS圖表和長條圖教程與技巧?—?收藏了一系列關于創建基于CSS的數據可視化圖表的教程。
• 更好地引用: 不要重復標記?—?指導你如何更好地引用，免除一些不必要的、重復的標記。
• CSS 漸變文本效果?—?一個為標題創建文本漸變的教程。
• 43 個從 PSD 到 XHTML/CSS 的教程?—?列出了大量的教程，教你如何把 PSD 變為有效的 CSS/XHTML 文件。
• CSS 圖片地圖?—?一個用 CSS 和 XHTML 創建圖片地圖的教程。
• 流式柵格布局?—?一個關于創建流式柵格布局的教程。

• 如何調試CSS?— 介紹了調試CSS的技巧。
• 10項有挑戰性但了不起的CSS技能?—?指導你掌握一些值得學習的高級CSS技能.
• 50多個漂亮整潔的CSS Tab 導航?—?搜集了大量用CSS制作的tab導航。
• 30個無與倫比的CSS技巧和示例?—?收藏了大量真正酷炫的CSS效果，包括 hoverbox 圖片畫廊、固定頁腳和純CSS實現的手風琴效果等等。

• 101個CSS技巧?—?Part 2?—?又一批很好的CSS技巧及其相應的教程。
• 固定中心?—?一個簡短的教程，教你如何在窗口正中心（垂直與水平）定位某些元素。
• 流式布局，一種簡短的方式?—?創建CSS流式布局的完整教程。

模板與框架

• 1Kb大的CSS柵格?—?這也許是最簡單最緊湊的柵格系統了，但包含了自定義柵格的工具。

• CSS Zen Garden?—?CSS Zen Garden 是一個 HTML 和 CSS 框架，用于展示大量能用CSS創建的設計。除了框架之外，還有大量可用的模板和主題。
• 完美的多欄CSS流式布局?—?收集了兼容iPhone的流式布局。
• 960柵格系統?—?一個基于960像素寬構建的CSS柵格布局。

• 免費CSS模板?— 該網站提供了200多個CSS模板，都遵循知識共享署名許可協議。

• 漂亮免費的CSS模板?—?幾十個模板讓你著手CSS設計，包括動態居中盒子、4欄不定寬布局、寬度固定的盒子上下左右完全居中等。
• 小型盒子?—?收藏了各種布局的CSS文件。

• 960px寬的CSS柵格系統設計?—?使用柵格創建960px寬的網頁模型。
• 用CSS框架設計一個雜志類首頁模板?— 一份創建雜志和柵格布局的有效指南。

畫廊與陳列

• CSS Stars?—?畫廊提供了一些基于CSS的設計，讓你熟讀掌握。

• CSS Based?—?上千個不同設計的CSS畫廊。
• CSS Drive?—?一個分類的CSS畫廊。
• CSS Mania?—?一個已經有5年歷史的CSS畫廊。
• CSSelite.com?—?一個分類的CSS畫廊。
• CSS Creme?—?大量可以根據顏色、分類或者設計師劃分的畫廊，也包括相關的教程和信息。
• csswebsite?—?一個可以通過類型、日期或者顏色帥選的畫廊。
• 40 漂亮的深色CSS網頁設計?—?該畫廊提供了一些漂亮的深顏色網頁設計。
• 2008年最好的CSS設計?—?又一個畫廊展示了2008年最好的CSS設計。
• CSS美麗畫廊?—?該CSS畫廊的條目是從2004年至今的，按年代順序排列。

工具

• Firebug?—?火狐瀏覽器的一個插件，你可以在該調試器里面看到你的CSS代碼，并且可以在里面編輯。

• Aardvark?—?火狐瀏覽器的擴展，可以看到每段HTML及它的類或者id。
• CSSViewer 1.0.3?—?也是火狐瀏覽器的擴展工具，你可以看到任何頁面的CSS屬性。
• GridFox?— 火狐瀏覽器的另一個擴展，通過在任何網頁覆蓋一層柵格來輔助柵格設計。
• CodeBurner?—?開發的一款插件，可以在瀏覽器中看到HTML和CSS的參考資料。

• IzzyMenu?—?一個免費的CSS菜單創建器，支持創建下拉二級菜單。
• Spanky Corners?—?一個圓角盒子生成器。
• CleanCSS?—?一款CSS美化工具。
• CSS瀏覽器選擇器?—?A useful tool for empowering CSS selectors based on the visitor’s browser.一款有用的工具，可以基于訪問者的瀏覽器來使用CSS選擇器。
• CSS 壓縮器?—?一款CSS文件壓縮器。
• CSS 布局生成器?—?一個簡單、在線的CSS生成器，可以創建一個基礎的布局框架。
• CSSTidy?—?一款開源的、可供下載的CSS分析器和優化器。

• CSS驅動CSS壓縮器?— 一款CSS壓縮工具，根據你的需求，可以有基礎和高級的壓縮模式。
• Tabifier?—?縮進你的代碼。
• CSSFly?—?基于瀏覽器的CSS和XHTML編輯器，可以實時編輯。

• List-O-Matic?—?一款可以創建基于列表的導航菜單。
• Markup Maker?—?根據你輸入的頁面ID來創建一個有效的XHTML/HTML框架。
• CSSMate?—?一款在線CSS編輯器。
• CSS Type Set?—?一個CSS排版生成器。

• Construct 0.5?—?一款可視的，可以基于藍圖框架創建的布局工具。

• PXtoEM.com?—?一個把px轉換成em的轉換工具。
• CSS編輯器回顧?—?收藏了一些流行的CSS編輯器。
• YAML構建器?—? 一個創建YAML布局的可視工具。
• 布局構造器?—?一個CSS布局構建器。
• CSS工具列表?—?列出了大量的CSS工具，從字體到優化。
• 50個非常有用的CSS工具?—?列出了一些非常棒的CSS工具。

特殊的CSS博客和網站

• CSS技巧?—?來自Chris Coyier的博客。
• CSS Help Pile?—?不斷收集CSS相關的教程和資源。

祝你愉快！