再讀《CSS權威指南》
時隔一年半再次把《CSS權威指南》讀了一遍，受益匪淺，溫故而知新！
收獲：
一、Reset CSS的重要性
前端開發者經常容易被瀏覽器默認樣式的差異搞暈，于是Reset CSS 出現了，而風靡一時的 *{margin:0;padding:0;}殺傷力太大無法滿足需求。
目前常用的Reset CSS有四份：
1、YUI CSS Reset 。
2、Eric Meyer 的 Reset CSS。
對于Reset CSS希望大家能夠選取適合自己的一份，進行修改后再使用，直接復制一份不是明智之舉。
二、字體的重要性
文字目前仍然是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”。
三、連接
HTML語言之所以被稱作超文本標記語言，就和超鏈接密不可分，優秀的會增加用戶停留的時間。
四、CSS中不要使用@import
@import 和 是常用的兩種引入CSS文件的方式，但是這兩種方式卻有差比別，具體原因如下：
1、使用@import會增加頁面的總體加載時間。
2、IE中使用@import會改變文件的加載順序。這可能會增加CSS文件的加載時間，阻礙頁面渲染。
相關文章：don’t use @import 中文翻譯
六、避免使用 filter
在IE中使用filter改變元素的透明度，瀏覽器占用的內存會增加5M左右。為了避免這個問題最好使用透明圖片替代。
當然，如果要用JavaScript寫動畫這個問題就無法避免了。
七、Bug & Hack
對于前端來講，Hack是一種態度! 永遠 不要討厭Bug，學習和研究Bug并不是為了應用Bug，而是避免Bug。
八、充分理解浮動
在CSS中存在三個流，即普通文檔流、浮動流、定位流(Position，自己起的名字^o^)，這三個流控制著整個頁面的布局。
關于浮動的一些瑣碎筆記：CSS- Float.doc
九、學習資源
國內資源：
1、秦歌：隨網之舞
2、玉伯：歲月 如歌
3、明城
5、臭魚的交互設計
6、藍色理想
7、 園子里也有很多優秀博客....
......
國外資源：
1、Eric Meyer：HTML、CSS和Web 標準領域國際公認專家。
2、css-discuss.org：一個優秀CSS郵件列表網站。
3、Position Is Everything：專門研究CSS布局兼容性與Bug問題的網站。
......
The End
全站熱搜
留言列表
