[譯]148個資源讓你成爲CSS專家

時間 2019-11-07

標籤資源讓你成爲 css 專家欄目 CSS 简体版

原文原文鏈接

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

CSS3 資源

參考資源與備忘錄

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

層疊樣式表二修訂版1 — 這是W3C對CSS 2.1 做出的官方說明。瀏覽器
CSS簡寫指引 — 覆蓋了基礎的CSS縮寫形式。框架
CSS速查表 — 兩份表來自About.com — 一份關於CSS基礎特性，一份關於CSS佈局。less
列表速建 — 該網站提供了大量的例子，告訴你如何使用CSS建立各類不一樣風格的列表。dom
經驗豐富的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分析器和優化器。