Css 書寫規範

CSS 書寫規格【轉】

1. 不同瀏覽器元素的預設屬性有所不同，使用Reset可重置瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。 /**清除內外邊距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素*/ dl, dt, dd, ul, ol, li, /* list elements 清單元素*/PRe, /* text formatting elements 文字格式元素*/ form, fieldset, legend, button, input, textarea, /* form elements 表單元素*/ th, td, /* table elements 表格元素*/ img/* img elements 圖片元素*/ { border:medium none; margin: 0; padding: 0; } /**設定預設字體 **/body,button, input, select, textarea { font: 12px/1.5 '宋體' ,tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } em{font-style:normal;} /**重置列表元素 **/ ul , ol { list-style: none; } /**重置超連結元素 **/a { text-decoration: none; color:#333;} a:hover { text-decoration: underline; color:#F40; } /* *重置圖片元素 **/img{ border:0px;} /**重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; }

2. 良好的命名習慣

3. 程式碼縮寫li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5ppadx; } 變成li { font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; }

4. 利用CSS繼承如果頁面中父元素的多個子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上， 讓它們繼承這些CSS樣式。 這樣你可以很好的維護你的程式碼，也可以減少程式碼量。那麼本來是這樣的程式碼： #container li{ font-family:Georgia, serif; } #container p{ font-family:Georgia, serif; } #container h1{font-family:Georgia, serif; } #container{ font- family:Georgia, serif; }

5. 使用多重選擇器你可以合併多個CSS選擇器為一個，如果他們有共同的樣式的話。 這樣做不但程式碼簡潔且可為你節省時間和空間。如： h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{ font-family: Arial, Helvetica, sans-serif; font-weight:normal; } 可以合併為h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 適當的程式碼註解

7. 給你的CSS代碼排序如果代碼中的屬性都能按照字母排序，那查找修改的時候就能更加快速:

/*** 樣式屬性依字母排序 ***/ div{ background-color:#3399cc ; color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; } z-index:100%; . 選擇更優的樣式屬性值CSS中有些屬性採用不同的屬性值，雖然達到的效果差不多，當性能上卻存在著差異，如區別在於border:0把border設為0px，雖然在頁面上看不見，但按border預設值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了記憶體值。 而border:none把border設為「none」即沒有，瀏覽器解析「none」時將不作出渲染動作，即不會消耗記憶體值。所以建議使用border:none; 同樣的，display:none隱藏物件瀏覽器不作渲染，不佔用記憶體。而visibility:hidden則會。

10. 使用代替@import 首先，@import不屬於XHTML標籤，也不是Web標準的一部分，它對於較早的瀏覽器兼容也不高，並且對於網站的性能有某些負面的影響。具體可以參考《高效能網站設計：不要使用@import》。所以，請避免使用@import

11. 使用外部樣式表 這個原則始終是一個很好的設計實踐。不單可以更易於維護修改，更重要的是使用外部檔案可以提高頁面速度，因為CSS檔案都能在瀏覽器中產生快取。內建在HTML文件中的CSS則會在每次請求中隨HTML文件重新下載。所以，在實際應用中，沒有必要把CSS程式碼內建在HTML文件中：

12. 避免使用CSS表達式（Expression） CSS表達式是動態設定CSS屬性的強大（但危險）方法。

13. 程式碼壓縮 當你決定把網站專案部署到網路上，那你就要考慮對CSS進行壓縮，出去註解和空格，以使得網頁載入得更快。壓縮您的程式碼，可以採用一些工具，如YUI Compressor 利用它可精簡CSS程式碼，減少檔案大小，以獲得更高的載入速度

以上就是Css 書寫規範的內容，更多相關文章請關注PHP中文網（www.php.cn）！