高质量的CSS
1. 怪異模式的觸發與DTD有關。Document Type Definition。DTD包含元素的定義規則、元素間關系的定義規則、元素可使用的屬性、可使用的實體或符號規則。
2. 推薦的CSS組織方式:base+common+page
base:css reset用YUI的CSS Reset+通用原子類???????? 基石
common:組件級CSS類,網站中高度重用的模塊????????? 網站級
page:通用base和common解決的,就不要用page???????頁面級
3. 重用即為模塊,取最大公約數。
模塊應在保證數量盡可能少的原則下,做到盡可能簡單,以提高重用性。
4. 推薦CSS類命名法:駝峰命名法用于區別不同單詞,橫杠用于表明從屬關系,不推薦子選擇符
例:? .timeList-lastItem{}? 一個獨立的又能避免沖突的類
????????.timeList .lastItem{} 子選擇符,建議不用,可能造成沖突
5. 多用組合,少用繼承
6. 選擇器權重:標簽:1;class:10;id:100
權重相同的,采用最后定義的樣式。
指選擇符定義的先后,class="test1 test2"和class="test2 test1"沒有區別
7. 為了保證樣式容易被覆蓋,提高可維護性,CSS選擇符需保證權重盡可能低。? (還是強調原子性,少用子選擇器)
8. 圖片翻轉技術:將多張圖片合并為一張,然后用background-position展示需要的部分。使圖片早加載,響應鼠標事件時不再延時。
9. CSS sprite:圖片翻轉技術的進一步發揮。將網站的多張背景合并成大圖片。
作用:減少網頁的HTTP請求數,減小服務器壓力。
局限:a. 只能用于背景圖。<img>圖不能合并。
? b. x,y都repeat的圖不能合并,所有repeat-x的一張圖,豎直排列;所有repeat-y的一張圖,水平排列。
? c. 圖片要盡量緊湊,同時保證不會影響擴展性。
也就是說,對菜鳥來說,會降低開發效率,增大維護難度。
是否使用CSS sprite主要取決于網站流量。
10.開發者自己用多行式編碼,上傳只用min
11.解決IE下疑難雜癥的特殊偏方:手動觸發hasLayout。zoom:1
http://www.cnblogs.com/manong13/archive/2012/02/23/2365110.html
12.塊級元素和行內元素
塊級元素:div p form ul ol li
行內元素:span strong em
a. 塊級元素width,height有效;
b. 塊級可設margin,padding; 行內元素margin,padding水平有效,padding豎直有效;
c. 通過display block/inline切換
13.main的內容比起sidebar更重要,無論sidebar和main在樣式上誰左誰右,在html標簽上要保證main的標簽在sidebar之前被加載
總結
- 上一篇: WCF关于svcutil生成关于TCP绑
- 下一篇: CRM+Mysql+php初学