給 CSS 新手的入門說明

前言

我想不出來 CSS 該從哪說明好……因為我又不太看 W3C 文件。（淚）

1. 先看你打算從純文字編輯器，還是所見即所得的網頁編輯器開始。
2. 挑個新一點、CSS 支援好一點的瀏覽器。
3. 學會 HTML 各元素的正確用法，還有巢狀結構、樹狀結構、絕對路徑與相對路徑、行內元素與區塊元素、什麼元素裡可以塞什麼元素等的概念。
4. 知道 CSS 語法可以寫在哪裡、該怎麼宣告才好，然後開始找 CSS 的語法文件。
5. 學習 CSS 的選擇子(Selector)及屬性該怎麼使用、有什麼規則。
6. 從最簡單的 headings 跟 paragraph、list 這三類 HTML 元素開始練習。（元素有 h1, h2, h3, h4, h5, h6, p, ul, ol, li，當然 HTML 文件該有的宣告也要寫好啦）
7. 在你能寫出標題段落意思明確的文件後，開始加入 div 跟 span 這兩種適合 CSS 套用樣式的無意義元素進文件。
8. 慢慢練習在更多的 HTML 元素中，加入更多種不同變化的 CSS 規則，並且抓別人的網頁來研究。（但記得別跑去跟別人說他們的網頁怎樣怎樣，因為你的身分和經驗可能不適合指正別人）
9. 學習 CSS hack 以克服老舊瀏覽器的 CSS 支援問題。
10. 學習網頁親和力來寫出更易閱讀的網頁。
11. 最後……如果你是想學來工作的話，請多學些能快速建立好大量網頁的方法。

站外參考文件

• CSS Tutorial Traditional Chinese -- CSS 導讀書，用了五六年以上還是深得大家喜愛。
• Mollio -- 一些現成的 CSS 網頁設計模板
• CSS實務排版技巧、秘訣與技術 -- 教你如何不要什麼都依賴表格(table)元素來設計網頁
• 網頁親和力 -- 幫助你設計更好的網頁，詳細的文件請找裡面的深入親和力。
• css Zen Garden: CSS設計之美 -- 樣式表禪意花園，如果你能只修改 CSS 就把這個網頁改得煥然一新，那麼你就可以說自己會 CSS 的基本使用了。（咦）
• Eric Meyer再談CSS網頁排版設計 More Eric Meyer on CSS 中文版 -- 很棒的 CSS 實務技巧書，不過越後面越難看懂，所以別一次就想看完，動手多做些練習再回頭看看。