CSS代碼優化
代碼優化的作用：
- 壓縮代碼量，提高編寫效率
- 提高了文件的訪問速度，利於快速編譯
- 簡化代碼，便於復用，利於後期維護和擴展。
- 利用繼承性優化代碼
在CSS中，子元素會自動繼承父元素的屬性值，如顏色、字體、大小、行距等排版格式。
如：
a：link {
color：#000000;
text-decoration：none;
}
a：visited {
text-decoration：none;
color：#0000FF;
}
a：hover {
text-decoration：none;
color：#FF0000;
}
a：active {
text-decoration：none;
color：#00FF00;
}
可優化為：
a {
text-decoration：none;
}
a：link {
color：#000000;
}
a：visited {
color：#0000FF;
}
a：hover {
color：#FF0000;
}
a：active {
color：#00FF00;
}
註意：一般來說如布局、盒模型屬性的display、width、height等只使用自己的屬性值，不會繼承上級元素。
利用默認值優化代碼：
CSS的屬性一般都預定義默認值，如果定義的屬性值與默認值相同，就沒必要再重復定義了。
使用*號來定義默認值。
利用公共類優化代碼：
如：
span {
color：red;
font-size：14px;
}
#tips {
color：red;
width：100%;
}
.msg {
color：red;
font-size：12px;
line-height：1.6em;
}
可簡化為：
span {
font-size：14px;
}
#tips { width：100%; }
.msg {
font-size：12px;
line-height：1.6em;
}
.red {
/*<定義紅色公共類>*/
color：Red;
}
html標簽中進行調用 ：<div class="msg red" ></div>
利用選擇符分組優化代碼：
如：
h1 { font-family："黑體"; }
h2 { font-family："黑體"; }
h3 { font-family："黑體"; }
h4 { font-family："黑體"; }
h5 { font-family："黑體"; }
h6 { font-family："黑體"; }
可以優化為：
h1,h2,h3,h4,h5,h6 { font-family："黑體"; }
定義單獨的樣式：
h1,h2,h3,h4,h5,h6 { font-family："黑體"; }
h1 { font-size：20px; }
h2 { font-size：18px; }
h4 { font-size：12px; }
利用層疊覆蓋優化代碼：
如果對同一個元素定義了多個樣式，在相同特殊性的情況下，CSS會遵循最近原則應用樣式，也就是說相同屬性聲明，後面的值會覆蓋前面的值。
如：
#title1,#title2,#title3 {
font-size：14px;
font-weight：bold;
text-align：center;
}
#title1 { color：Blue; }
#title1 { color：Red; }
#title1 { color：Green; }
可優化為：
#title1,#title2,#title3 {
font-size：14px;
font-weight：bold;
text-align：center;
color：Blue;
}
#title2 { color：Red; }
#title3 { color：Green; }
代碼優化的註意事項：在優化時，要適當采用就近原則，在同一模塊內進行優化，不過有些具有全局屬性的內容可以統一定義，如網頁字體、大小、行距等。
CSS代碼優化