CSS 雜項心得

再過一陣子大概會大幅減少寫 web 的事, 趁最近有空檔陸續來記錄最近的心得, 方便日後回憶。

學 CSS 的幾個重點:

• W3Schools CSS Tutorial。就算不看它, 平時搜 CSS 語法也會常查到這裡, 附方便的範例程式試用。
• 學會用 Firebug: 教學 | 如何使用firebug即時預覽css。工欲善其事, 必先利其器。花個六分鐘看完這份 screencast 後, 之後調 CSS 超輕鬆的, 先在 Firebug 裡調到好再回去看原始檔。
• 了解 CSS 覆寫的規則。
• 了解 float、clear 的功用。比方說參考這篇《CSS 排版觀念：Float》。要將 div、span 這類無特定排版功能的 tag 排好, float 是必備屬性。該網站另有不少好文, 像 《CSS 技巧：表單》提到 clear 的例子, 還有用 float 後就能設 width 和 height 了。
• The Principles Of Cross-Browser CSS Coding 介紹 CSS 的基本觀念和跨瀏覽器的注意事項。文中提到不少延伸閱讀, 如 CSS Differences in Internet Explorer 6, 7 and 8 和 The Mystery Of The CSS Float Property。這幾篇雖然較長, 文章的品質非常高, 相當值得讀。
• Floatutorial 提供豐富的範例說明 float 和非 float 元件的顯示規則。最後一個範例一步步說明如何做出三欄的結構, 簡單易懂。
• HTML tag 可以有多個 class, 善用 class 組合屬性。jQuery UI 有定一套設定規範, 之後有機會再來深入研究這塊。
• jQuery UI 和 jQuery Tools 有不少好東西, 像是選日期、單選多個元件、progress bar 等。這些套件將 client 端的 CSS 和 JavaScript 綁好了, 並提供可客制的外觀。

一些雜項心得:

• 先載入 undohtml 去除所有 tag 原本的功能, 方便之後設定。google 一下 "undohtml" 或 "reset css" 可以找到一些範例來用。
• 置中的方式是將 margin 的左右設成 auto。
• 用 colgroup 和 col 管理 table 的欄寬。
• 用 jQuery 的 even / odd 可輕易將表格的奇偶欄設上 odd / even 的 class, 方便配色。
• CSS 裡的 url 屬性是用相對於 CSS 檔的位置找檔案。
• Give Up and Use Tables: 在找用 div 取代 table 的作法時發現這個站, 我聽從上面的建議, 很愉快地用 table 完成我該做的事。
  

日後有機會再來研究:

• 如何模組化 CSS。網頁一多就很亂, 不好維護。和寫程式一樣, 要理出共用和各自延伸的 CSS code。
• 適當的情況用 div / span 取代 table。讓資料可簡單地在表格和清單之間轉換呈現方式。