譯者：旭日云中竹
鏈接：http://www.zcfy.cc/article/1057
原文：https://medium.com/@bradley_nice/148-resources-to-help-you-become-a-css-expert-ced300b173e7
迄今為止惠呼，我已經(jīng)收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計脫穎而出。
CSS3 資源
參考資源與備忘錄
- CSS屬性指引?—— 一份清單，按字母表順序列出了每個CSS屬性鸠儿。
- 層疊樣式表二修訂版1?—?這是W3C對CSS 2.1 作出的官方說明峻堰。
- CSS簡寫指引?—?覆蓋了基礎(chǔ)的CSS縮寫形式。
- CSS速查表?—?兩份表來自About.com?—?一份關(guān)于CSS基礎(chǔ)特性妨马，一份關(guān)于CSS布局。
- 列表速建?—?該網(wǎng)站提供了大量的例子杀赢，告訴你如何使用CSS創(chuàng)建各種不同風格的列表烘跺。
- 經(jīng)驗豐富的CSS設(shè)計師給初學者的指南?— 這里有大量的資源適用于CSS初學者。
- 組合CSS的5點提示?—?這篇文章提供了5個真正有效的方法脂崔，讓你更好地組織你的樣式表（而且滤淳，有助于以后的編輯修改）。
- 我的5個CSS提示?—?收集了5個用于更好地創(chuàng)建CSS的例子砌左。
- 慣用模式與嚴格模式?- 在現(xiàn)代瀏覽器里面慣用模式與嚴格模式指南脖咐。
- CSS速查表(V2)?—?一份單頁的CSS參考書铺敌，列出了所有CSS 2.1的選擇器。
- 核心CSS: 第一篇?— 一份來自Refcardz的基礎(chǔ)CSS參考指南.
- CSS 簡寫速查表 (PDF)?—?CSS簡寫形式參考書.
- 使用 CSS (層疊樣式表)?—?基礎(chǔ)CSS指南屁擅，包含使用CSS的好處介紹.
- 5個方法快速寫成高質(zhì)量的CSS?—?寫出高效CSS的一些提示偿凭。
- 使用CSS優(yōu)化網(wǎng)頁打印效果?—?創(chuàng)建適用于打印的樣式表指南.
- 打印樣式表?—?創(chuàng)建打印樣式表的另一份指南.
- CSS 排版: 反差技巧、教程和CSS最佳實踐?—?收集了大量的CSS印刷資源派歌。
- 高效編碼必備的CSS技巧?—?為了更好地編寫CSS而收集的CSS 技巧弯囊、意見和解決方案。
- 用CSS Reset來重置CSS樣式?—?一份重置樣式的完整指南胶果。
- CSS結(jié)構(gòu)化命名慣例?—?一篇關(guān)于元素命名的文章匾嘱，這里講述基于元素本身的命名，而不是基于它們的位置或外觀早抠。
- 用CSS風格指南提高代碼的可讀性?—?文章涵蓋5大技巧霎烙，讓你的代碼更加易于維護和管理。
- 寫好CSS的70個專業(yè)意見?—?搜集了一些關(guān)于寫好CSS的專業(yè)提示蕊连。
- 你必須知道的CSS浮動?—?一份幫你理解CSS浮動的指南.
- 完整的CSS指引?—?大量的資源吼过，涵蓋了CSS的方方面面.
- 創(chuàng)建排印樣式對比的七個基本方法?—?文章列出了一些基本要素，關(guān)于在CSS里面使用充分的排版對比來營造優(yōu)秀的樣式風格咪奖。
- 如何用CSS處理文本的大小?—?一篇關(guān)于處理CSS文本大小的透徹指南盗忱。
- CSS速查?— 一份非常完整的網(wǎng)頁CSS速查表.
- 每個人都應該知道的13條CSS訓練原則?—?列出了你應在注意的一些基本的CSS慣例.
- 資源指引?—?這是來自CSS Zen Garden的CSS資源指引。
- CSS美化?—?該網(wǎng)站提供了一些CSS消息羊赵、資源和畫廊.
- 使用CSS簡寫?—?一些CSS縮寫的參考指南趟佃。
- 網(wǎng)頁開發(fā)者手冊?—?This is a massive collection of CSS and other resources, including showcases, tools, and more.搜集了CSS以及一些其他的資源，如示例昧捷、工具等闲昭。
- 100個免費的CSS資源?—?大量CSS資源，包括相關(guān)的文章靡挥、教程序矩、布局等等。
- 15個你可能從未用過的CSS屬性 (但或許要知道)?—?文章覆蓋了15個經(jīng)常被忽視的CSS屬性跋破，許多開發(fā)者可能都不知道它們的存在簸淀。
- CSS專家的10條原則?—?搜集了一些CSS大牛的重要原則和指南.
- 你應該知道的CSS特性?—?一份CSS權(quán)重特殊性指南，css權(quán)重是CSS里面最難掌握的知識點之一毒返。
- 解決5個普遍的CSS難題?—?告訴你如何處理一些CSS難題租幕，如 IE6 里面雙層外邊框的bug，以及無效樣式等拧簸。
教程與技巧
- 從零開始學CSS?—?這是一個非尘⑿鳎基礎(chǔ)的教程，讓你從零開始學習CSS并用它創(chuàng)建第一個基礎(chǔ)網(wǎng)頁。該教程對于那些對網(wǎng)頁構(gòu)建不了解的初學者來說贾富，是很好的資源歉眷。
- 53個生存必備的CSS技巧?—?這里收集了大量的CSS技巧，從菜單到表單再到樣式表打印颤枪，都有相關(guān)介紹姥芥。
- CSS 陰影效果?—?一個關(guān)于如何用CSS給圖片加陰影的教程。
- CSS 選擇器教程?—?CSS選擇器的基本介紹以及它們是如何工作的汇鞭。
- CSS 導航技巧?— 搜集了37個不同的CSS導航設(shè)計凉唐。
- 我一直使用的CSS技巧?—?A collection of CSS techniques Christian Montoya finds extremely valuable.
- CSS技巧綜述?—?20個CSS提示與訣竅?—?收集了關(guān)于CSS圓角和彈窗的一些技巧。
- CSS提示與小竅門?—?有效基礎(chǔ)的CSS技巧.
- 精通樣式表: 最有用的CSS技巧?—?用于清除和重置瀏覽器默認的樣式霍骄。
- 用CSS展示超鏈接提示?—?本教程告訴你如何快速使用CSS添加鏈接式圖標, 并且能夠兼容IE7, Safari和火狐台囱。
- 10個你可能不知道的CSS訣竅?—?涵蓋了CSS字體、圖片替換读整、垂直居中等技巧簿训。
- 10多個你可能不知道的CSS技巧?—?這篇文章涵蓋了塊級元素與行內(nèi)元素、設(shè)置頁面最小寬度及不可見文本等米间。
- 用lists實現(xiàn)導航欄?—?這是個很棒的教程强品，一步步指導你如何用列表來制作導航欄。
- 用lists實現(xiàn)樹形圖?—?如何創(chuàng)建一個多層級無序的頁面樹形圖屈糊。
- 如何用CSS實現(xiàn)網(wǎng)頁重構(gòu)?—?如何用CSS布局重構(gòu)一個網(wǎng)頁的榛。
- 一步步實現(xiàn)高級網(wǎng)頁布局?—?一步步教你創(chuàng)建一個高級的三欄布局。
- 從頭搭建CSS布局?—?該教程教你如何從零開始用CSS創(chuàng)建一個網(wǎng)頁逻锐。
- CSS 教程?—?來自 W3Schools 的完整教程夫晌。
- 樣式表?—?另一個非常全的CSS教程。
- CSS實現(xiàn)的精致圖表?—?創(chuàng)建特殊的圖表形式昧诱。
-
關(guān)于CSS的更多圓角技巧?—?教你如何創(chuàng)建支持PNG和
alpha透明度的圓角晓淀。
- CSS菜單列表
- 如何向你的CSS文件添加變量?—?告訴你如何用PHP和Apache的URL向你的CSS文件添加變量。
- 跨瀏覽器CSS編碼的15個技巧和工具?—?文章涵蓋了15條以上的提示盏档，都是關(guān)于如何用CSS解決跨瀏覽器的兼容問題凶掰。
- CSS 軸心化?—?如何創(chuàng)建CSS軸心化布局，包括中央CSS流式布局蜈亩。
- 絕對定位在相對定位里面?—?關(guān)于如何在一個相對定位的父元素中絕對定位一個子元素的指南懦窘。
- Faux 絕對定位?—?關(guān)于把浮動和絕對定位結(jié)合起來的方法指南。
- 多行導航欄的垂直居中?—?使用浮動的方法實現(xiàn)列表對齊勺拣。
- 前10個CSS按鈕教程列表?—?收藏了10個創(chuàng)建CSS按鈕的最好教程奶赠。
- 山頂角?—?用CSS來實現(xiàn)的圓角。
- CSS 圓角綜述?—?收藏了CSS圓角的技巧和教程药有。
- CSS小竅門--自定義子彈頭?—?關(guān)于如何用CSS實現(xiàn)子彈頭的指南。
- CSS Swag: 多欄列表?—?A guide to creating semantically-logical, ordered list that wraps through multiple vertical columns一份關(guān)于創(chuàng)建語義化的、有序的多欄列表指南愤惰。
- 改善打印版的鏈接展示?—?示范了打印輸出時如何在超鏈接文本中如何包含鏈接地址.
- 高級CSS菜單技巧?—?用CSS創(chuàng)建一個真正酷炫的苇经、高級的、帶有模糊效果的菜單宦言。
- CSS 菜單?—?一個關(guān)于用純CSS2（不包含JS）嵌套列表創(chuàng)建菜單面板的教程扇单。
- CSS Tab菜單帶下拉效果?—?一個關(guān)于創(chuàng)建帶有下拉效果的CSS菜單教程。
- 高級CSS菜單?—?來自網(wǎng)頁設(shè)計墻的絢麗CSS菜單教程奠旺。
- 自動水平化tab?—?該教程教你如何創(chuàng)建帶有翻轉(zhuǎn)效果的水平菜單蜘澜。
- 帶有翻轉(zhuǎn)效果的CSS圖標菜單?—?創(chuàng)建帶有CSS翻轉(zhuǎn)效果的菜單教程。
- 混雜的CSS下拉菜單?— 一個教你如何創(chuàng)建CSS下拉菜單并且做到優(yōu)雅降級响疚，結(jié)構(gòu)合理的教程鄙信。
- 初學者CSS指南?—?給初識CSS者的完整指南。
- 開始CSS實戰(zhàn)?— 一個非撤拊危基礎(chǔ)的CSS實戰(zhàn)指南装诡。
- 如何處理CSS大背景?—?處理CSS大背景的教程。
- 可擴張性強的CSS背景?—?關(guān)于創(chuàng)建高度自定義和自適應網(wǎng)站的教程践盼。
- 用CSS做各種事情: 50多個富有創(chuàng)意的列子和教程?—?收藏了50多個創(chuàng)建獨特CSS布局的教程鸦采。
- 用Firebug快速簡單的開發(fā)CSS?—?一份關(guān)于使用Firebug提高網(wǎng)頁設(shè)計的指南。
- 10漂亮的CSS排版例子?—?提供了很棒的CSS排版例子并且有教程指導如何創(chuàng)建咕幻。
- 16個可用的CSS圖表和長條圖教程與技巧?—?收藏了一系列關(guān)于創(chuàng)建基于CSS的數(shù)據(jù)可視化圖表的教程渔伯。
- 更好地引用: 不要重復標記?—?指導你如何更好地引用，免除一些不必要的肄程、重復的標記咱旱。
- CSS 漸變文本效果?—?一個為標題創(chuàng)建文本漸變的教程。
- 43 個從 PSD 到 XHTML/CSS 的教程?—?列出了大量的教程绷耍，教你如何把 PSD 變?yōu)橛行У?CSS/XHTML 文件吐限。
- CSS 圖片地圖?—?一個用 CSS 和 XHTML 創(chuàng)建圖片地圖的教程。
- 流式柵格布局?—?一個關(guān)于創(chuàng)建流式柵格布局的教程褂始。
- 如何調(diào)試CSS?— 介紹了調(diào)試CSS的技巧诸典。
- 10項有挑戰(zhàn)性但了不起的CSS技能?—?指導你掌握一些值得學習的高級CSS技能.
- 50多個漂亮整潔的CSS Tab 導航?—?搜集了大量用CSS制作的tab導航。
-
30個無與倫比的CSS技巧和示例?—?收藏了大量真正酷炫的CSS效果崎苗，包括
hoverbox圖片畫廊狐粱、固定頁腳和純CSS實現(xiàn)的手風琴效果等等。
- 101個CSS技巧?—?Part 2?—?又一批很好的CSS技巧及其相應的教程胆数。
- 固定中心?—?一個簡短的教程肌蜻，教你如何在窗口正中心（垂直與水平）定位某些元素。
- 流式布局必尼，一種簡短的方式?—?創(chuàng)建CSS流式布局的完整教程蒋搜。
模板與框架
- 1Kb大的CSS柵格?—?這也許是最簡單最緊湊的柵格系統(tǒng)了篡撵，但包含了自定義柵格的工具。
- CSS Zen Garden?—?CSS Zen Garden 是一個 HTML 和 CSS 框架豆挽，用于展示大量能用CSS創(chuàng)建的設(shè)計育谬。除了框架之外，還有大量可用的模板和主題帮哈。
- 完美的多欄CSS流式布局?—?收集了兼容iPhone的流式布局膛檀。
- 960柵格系統(tǒng)?—?一個基于960像素寬構(gòu)建的CSS柵格布局。
- 免費CSS模板?— 該網(wǎng)站提供了200多個CSS模板娘侍，都遵循知識共享署名許可協(xié)議咖刃。
- 漂亮免費的CSS模板?—?幾十個模板讓你著手CSS設(shè)計，包括動態(tài)居中盒子憾筏、4欄不定寬布局嚎杨、寬度固定的盒子上下左右完全居中等。
- 小型盒子?—?收藏了各種布局的CSS文件踩叭。
- 960px寬的CSS柵格系統(tǒng)設(shè)計?—?使用柵格創(chuàng)建960px寬的網(wǎng)頁模型磕潮。
- 用CSS框架設(shè)計一個雜志類首頁模板?— 一份創(chuàng)建雜志和柵格布局的有效指南。
畫廊與陳列
- CSS Stars?—?畫廊提供了一些基于CSS的設(shè)計容贝，讓你熟讀掌握自脯。
- CSS Based?—?上千個不同設(shè)計的CSS畫廊。
- CSS Drive?—?一個分類的CSS畫廊斤富。
- CSS Mania?—?一個已經(jīng)有5年歷史的CSS畫廊膏潮。
- CSSelite.com?—?一個分類的CSS畫廊。
- CSS Creme?—?大量可以根據(jù)顏色满力、分類或者設(shè)計師劃分的畫廊焕参，也包括相關(guān)的教程和信息。
- csswebsite?—?一個可以通過類型油额、日期或者顏色帥選的畫廊叠纷。
- 40 漂亮的深色CSS網(wǎng)頁設(shè)計?—?該畫廊提供了一些漂亮的深顏色網(wǎng)頁設(shè)計。
- 2008年最好的CSS設(shè)計?—?又一個畫廊展示了2008年最好的CSS設(shè)計潦嘶。
- CSS美麗畫廊?—?該CSS畫廊的條目是從2004年至今的论矾，按年代順序排列莺债。
工具
- Firebug?—?火狐瀏覽器的一個插件墩虹，你可以在該調(diào)試器里面看到你的CSS代碼昆码，并且可以在里面編輯。
- Aardvark?—?火狐瀏覽器的擴展锰蓬，可以看到每段HTML及它的類或者id幔睬。
- CSSViewer 1.0.3?—?也是火狐瀏覽器的擴展工具，你可以看到任何頁面的CSS屬性芹扭。
- GridFox?— 火狐瀏覽器的另一個擴展麻顶，通過在任何網(wǎng)頁覆蓋一層柵格來輔助柵格設(shè)計赦抖。
- CodeBurner?—?開發(fā)的一款插件，可以在瀏覽器中看到HTML和CSS的參考資料澈蚌。
- IzzyMenu?—?一個免費的CSS菜單創(chuàng)建器摹芙，支持創(chuàng)建下拉二級菜單灼狰。
- Spanky Corners?—?一個圓角盒子生成器宛瞄。
- CleanCSS?—?一款CSS美化工具。
- CSS瀏覽器選擇器?—?A useful tool for empowering CSS selectors based on the visitor’s browser.一款有用的工具交胚，可以基于訪問者的瀏覽器來使用CSS選擇器份汗。
- CSS 壓縮器?—?一款CSS文件壓縮器。
- CSS 布局生成器?—?一個簡單蝴簇、在線的CSS生成器杯活，可以創(chuàng)建一個基礎(chǔ)的布局框架。
- CSSTidy?—?一款開源的熬词、可供下載的CSS分析器和優(yōu)化器旁钧。
- CSS驅(qū)動CSS壓縮器?— 一款CSS壓縮工具，根據(jù)你的需求互拾，可以有基礎(chǔ)和高級的壓縮模式歪今。
- Tabifier?—?縮進你的代碼。
- CSSFly?—?基于瀏覽器的CSS和XHTML編輯器颜矿，可以實時編輯寄猩。
- List-O-Matic?—?一款可以創(chuàng)建基于列表的導航菜單。
- Markup Maker?—?根據(jù)你輸入的頁面ID來創(chuàng)建一個有效的XHTML/HTML框架骑疆。
- CSSMate?—?一款在線CSS編輯器田篇。
- CSS Type Set?—?一個CSS排版生成器。
- Construct 0.5?—?一款可視的箍铭，可以基于藍圖框架創(chuàng)建的布局工具泊柬。
- PXtoEM.com?—?一個把px轉(zhuǎn)換成em的轉(zhuǎn)換工具。
- CSS編輯器回顧?—?收藏了一些流行的CSS編輯器诈火。
- YAML構(gòu)建器?—? 一個創(chuàng)建YAML布局的可視工具兽赁。
- 布局構(gòu)造器?—?一個CSS布局構(gòu)建器。
- CSS工具列表?—?列出了大量的CSS工具柄瑰，從字體到優(yōu)化闸氮。
- 50個非常有用的CSS工具?—?列出了一些非常棒的CSS工具。
特殊的CSS博客和網(wǎng)站
- CSS技巧?—?來自Chris Coyier的博客教沾。
- CSS Help Pile?—?不斷收集CSS相關(guān)的教程和資源蒲跨。
祝你愉快！
