文章目錄
- 一、Reset CSS的重要性
- 二、字型的重要性
- 三、串連
- 四、CSS中不要使用@import
- 五、不要使用CSS運算式
- 六、避免使用 filter
- 七、Bug & Hack
- 八、充分理解浮動
- 九、學習資源
一、Reset CSS的重要性 前端開發人員經常容易被瀏覽器預設樣式的差異搞暈，於是Reset CSS 出現了，而風靡一時的 *{margin:0;padding:0;}殺傷力太大無法滿足需求。 目前常用的Reset CSS有四份： 1、YUI CSS Reset 。 2、Eric Meyer 的 Reset CSS。 3、Shawphy CSS Reset。 4、KISSY CSS Reset。 對於Reset CSS希望大家能夠選取適合自己的一份，進行修改後再使用，直接複製一份不是明智之舉。 相關文章：Reset CSS 研究（八卦篇） Reset CSS 研究（技術篇） Dawn CSS Reset 二、字型的重要性 文字目前仍然是WEB中的主要資訊載體，因此文字的表現形式是十分重要的，以下是我所常用的font設定：font: 12px/1.5 Arial, "\5b8b\4f53", sans-serif; 1、px：現在的大部分瀏覽器都支援Full Page Zoom，因此可以 放棄使用em。 2、1.5而非150%：行高1.5倍比較適合閱讀；使用1.5並沒使用150%是因為1.5形式是行高的“縮放因子”，能夠避免文字串列。 3、font set：很多人都喜歡用Tahoma，Tohama是英文Windows作業系統的預設字型，顯示中英文混排很好。 但是經過測試Tohama和Arial在小字型下差距並不大，而且Tahoma在IE6中13px會顯示成14px。 4、“\5b8b\4f53”：這是"宋體"的unicode編碼，防止中文亂碼，同樣“微軟雅黑”的unicode編碼就是“\5FAE\8F6F\96C5\9ED1”。 相關文章：不給line-height加單位要成為一種習慣 網頁設計中的預設字型 是時候不用考慮基於字型大小（em）的設計了 談談網頁設計中的字型應用(1-4) Font Set三、串連 HTML語言之所以被稱作超文字標記語言 (HTML)，就和超連結密不可分，優秀的<a>會增加使用者停留的時間。 1、超連結字型顏色要明顯區別於普通文本。 2、title屬性盡量指定，有時由於串連文字過長，要進行截斷，如果能夠在title中顯示完整的連結文本是一件很友好的事情。 3、串連預設無底線，:hover時添加底線。 對於串連的處理，有一篇更好的文章：串連，怎麼辦？四、CSS中不要使用@import @import 和 <link>是常用的兩種引入CSS檔案的方式，但是這兩種方式卻有差比別，具體原因如下： 1、使用@import會增加頁面的總體載入時間。 2、IE中使用@import會改變檔案的載入順序。這可能會增加CSS檔案的載入時間，阻礙頁面渲染。 相關文章：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 中文翻譯 五、不要使用CSS運算式 1、CSS運算式只有IE支援。 2、運算式的計算頻率非常高，因此會佔用很多記憶體。 相關文章 ：Avoid CSS Expressions六、避免使用 filter
在IE中使用filter改變元素的透明度，瀏覽器佔用的記憶體會增加5M左右。為了避免這個問題最好使用透明圖片替代。
當然，如果要用JavaScript寫動畫這個問題就無法避免了。七、Bug & Hack
對於前端來講，Hack是一種態度! 永遠 不要討厭Bug，學習和研究Bug並不是為了應用Bug，而是避免Bug。
八、充分理解浮動 在CSS中存在三個流，即普通文檔流、浮動流、定位流(Position，自己起的名字^o^)，這三個流量控制著整個頁面的布局。 關於浮動的一些瑣碎筆記：CSS- Float.doc九、學習資源 國內資源： 1、秦歌：隨網之舞 2、玉伯：歲月 如歌 3、明城 4、圓心：懌飛's Blog 5、臭魚的互動設計 6、藍色理想 7、 園子裡也有很多優秀部落格.... ...... 國外資源： 1、Eric Meyer：HTML、CSS和Web 標準領域國際公認專家。 2、css-discuss.org：一個優秀CSS郵件清單網站。 3、Position Is Everything：專門研究CSS布局相容性與Bug問題的網站。 4、Estelle Weyl：一名女前端工程師，CSS屬性支援一覽表 、CSS選取器一覽表。
