CSS代碼最佳化（轉載）

標籤：style   blog   http   color   使用   strong   

要點1：css代碼最佳化作用與意義

1、減少佔用網頁位元組。在同等條件下縮短瀏覽器下載css代碼時間，相當於加快網頁開啟速度；
2、便於維護。簡化和標準化css代碼讓css代碼減少，便於日後維護；
3、讓自己寫的css代碼更加專業。

 
要點2：css最佳化方法-需要最佳化css代碼的地方

1、縮寫css代碼。
2、排列css代碼。
3、同屬性提取共用css選取器。
4、分離網頁顏色和背景設定樣式（較大網站需要注意）。
5、條理化css代碼。

 
執行個體講解以上幾點div css最佳化方法

一、縮寫css代碼
常用需要縮寫 css屬性代碼如下：
background(背景屬性)
未最佳化前
對應屬性為背景顏色為白色
background-image:url(divcss5.gif);　　　　　　對應屬性是設定divcss5.gif圖片為背景
background-position:bottom;　　　　　　　　背景圖片是居底部
background-repeat:repeat-x;　　　　　　　　背景按X座標（橫座標）重複延伸

以上CSS代碼可以簡寫為
background:#FFF url(divcss5.gif) repeat-x bottom;
解釋：背景顏色為白色，並以X座標重複divcss5.gif圖片，並且表徵圖居下。未最佳化css background屬性相同

margin(外補白屬性)
未最佳化前
margin-left:5px;　　　　 意思為靠左5px
margin-right:6px; 　　　　靠右6px
margin-bottom:7px; 　　底部延伸7px
margin-top:8px;　　　　　　 頂部延伸8px

最佳化簡寫為
margin:8px 6px 7px 5px; 意思和屬性效果同上

padding(內補白屬性)
未最佳化前
padding-left:5px; 　　　　　　意思為左補白5px
padding-right:6px; 　　　　　　右補白6px
padding-bottom:7px; 　　　　底（下）補白7px
padding-top:8px; 　　　　　　頂（上）補白8px

最佳化簡寫為
padding:8px 6px 7px 5px; 意思和屬性效果同上

border(邊框屬性)
未最佳化前
border-color:#000000;　　　　邊框顏色為黑色
border-style:solid;　　　　　　邊框樣式為實線
border-width:1px;　　　　　　邊框寬度為1px

可以簡寫為
border:1px solid #000000;意思同上未最佳化前
如果是只設定左邊邊框為1px，顏色為黑色的實線css代碼如下
border-left:1px solid #000000;

font(字型屬性)
未最佳化前
font-style:italic; 　　　　　　字型樣式
font-variant:small-caps; 　　字型異體
font-weight:bold; 　　　　　　字型加粗
font-size:12px; 　　　　　　字大小為12px
line-height:22px;　　　　　　字行高為22px
font-family:”黑體” 　　　　　　字型為黑體字

可以縮寫為一句：

font:italic small-caps bold 12px/22px “黑體”;

 
二、CSS重用最佳化
這裡主要介紹是CSS代碼的共用屬性提取來達到節約代碼、維護方便，如下：

1 .yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}2 .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

 

他們都有相同高度、寬度、浮動、文字大小，而只有內容居左居右不同(你可能需要瞭解CSS置中)，我們就可以提取他們相同屬性
最佳化後:

1 .yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}2 .yangshi_b{text-align:right; }

注意觀察以上代碼，自己理解，不懂可到CSS論壇提出問題。

 

我們在寫CSS的時候，常常會遇到讓一個圖片或一個布局不能超出設定一定高度範圍值，有時也需要設定一個最小高度值，以達到對齊等樣式。

接下來為大家總結的如何解決IE6不支援max-height和不支援max-height的方法。

 
目錄
IE6支援max-height解決方案
IE6支援min-height解決方案
IE6支援max-height又支援min-height方法

1、IE6支援max-height解決方案 
IE6支援最大高度解決CSS代碼：

1 .yangshi{max-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;}

說明：max-height:1000px; 這個是IE6以上級其它品牌瀏覽器支援最大範圍高度。而_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;則是讓IE6支援max-height替代CSS代碼，但效果和其它版本瀏覽器相同效果。

讓所有瀏覽器都支援max-height的CSS樣式代碼完整版本：

1 .yangshi{2     maxheight:1000px;3     _height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");4      overflow:hidden;5 }

 

這裡的1000和1000px是你需要的數值，注意3個數值的相同。 讓IE6支援最大高度max-height的時候別忘記加上overflow:hidden;

 

2、IE6支援min-height解決方案 – IE6支援最小高度解決方案

CSS代碼：

.yangshi{min-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");}

說明：min-height:1000px; 這個是IE6以上級其它品牌瀏覽器支援最小範圍高度。而_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");則是讓IE6支援min-height替代CSS代碼，但效果和其它版本瀏覽器相同效果。
讓所有瀏覽器都支援min-height的CSS樣式代碼，完整：
min-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”"); 這裡的1000和1000px是你需要的數值，注意3個數值的相同。

 

3、IE6支援max-height又支援min-height方法 
css代碼：

.yangshi{Max-Height:620px;Min-Height:40px;_height:expression_r(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));}

 

 IE6支援Max-Height和支援Min-Height CSS代碼 _height:expression_r(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));
說明：以上代碼作用是讓對象的最小高度為40px，最大高度為620px的CSS樣式屬性。

 
CSS命名規範
隨著以後的趨勢從現在的html4+css2.0到html5+css3.0的發展升級，現在的css命名規範顯得相當重要了，當然發展到html 5+css 3.0完全相容至少還需要5-8年時間，但是現在可以從點滴積累做起。html5+css3.0完全相容至少還需要5-8年時間是怎麼得來的，可以推算從IE6到現在IE8的發展，而現在還有很多使用者在使用IE6瀏覽器，IE6現在還沒有被微軟淘汰或不能使用，從ie6開始到現在也經曆了大概有8年時間，可想如果要發展到html5+css3.0各個瀏覽器都相容至少需要8年時間。

 

CSS命名規範重要性：

1、為以後html5+css3.0發展方向打下基礎。
現在命名頭部、底部等大家習慣用 header、footer來命名，最終html調用css樣式既是
這種形式，以後html5+css3.0標準將是直接用
標籤來表示頭部部分了，所以為以後版本升級規範有一定好處，雖然達到相容html5+css3.0瀏覽器還早，但是可以為div+css開發人員來說可以先注意一下。

2、css命名規範可以節約團隊開發時間。
特別在團隊合作開發網站項目中，大家規範的來製作一套共識的css命名，將節約開發時間及成本，如果開發項目中div+css開發人員亂命名css，將給後來的程式員的解讀帶來不便。

3、css命名規範可為以後維護帶來方便。
Div+css開發好後網站項目製作好後，很難保證以後不調整及最佳化，這樣自己沒有自己一套css命名特點，將為自己以後的維護帶來不便。

 
總結：
無論是考慮團隊開發、以後的維護、html5+css3的升級，DIV CSS開發偽類的命名都相當重要。
現在通常我們都是在html 4.0 和css 2.0基礎上開發的div+css符合w3c標準的網站，至於html 5+css 3.0可以瞭解，如果要運用至少又將等幾年，等瀏覽器IE6-IE8的淘汰不能使用，這時我們將合理的運用html 5+css 3.0 。

 

 

十句CSS學習順口溜（很受用）：
一、IE邊框若顯若無，須注意，定是高度設定已忘記；
二、浮動產生有緣故，若要父層包含住，緊跟浮動要清除，容器自然顯其中；
三、三像素文本慢移不必慌，高度設定幫你忙；
四、相容各個瀏覽須注意，預設設定行高可能是殺手；
五、獨立清除浮動須銘記，行高設無，高設零，設計效果兼瀏覽；
六、學布局須思路，路隨布局原理自然直，輕鬆駕馭html，流水布局少hack，代碼清爽，相容好，友好引擎喜歡迎。
七、所有標籤皆有源，只是預設各不同，span是無極，無極生兩儀—內聯和塊級，img較特殊，但也遵法理，其他只是改造各不同，一個*號全歸原，層疊樣式理須多練習，萬物皆規律。
八、圖片連結排版須小心，圖片連結文字連結若對齊，padding和vertical-align:middle要設定，雖差微細倒無妨。
九、IE浮動雙邊距，請用display：inline拘。
十、列表橫向排版，列表代碼須緊靠，空隙自消須銘記。

 

 

出處：http://www.zhiqianduan.com/201.html