這篇文章將為大家詳細講解有關(guān)怎么優(yōu)化css，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比寧河網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式寧河網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋寧河地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

優(yōu)化方法：1、簡化注釋；2、簡化顏色代碼；3、使用單行屬性代替多行屬性，即使用簡寫屬性；4、當值為0時省略單位；5、同時設定多個元素的屬性；6、刪除空白和換行；7、設定過期時間，使用GZip。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

優(yōu)化css代碼，可以減少占用網(wǎng)頁字節(jié)，在同等條件下縮短瀏覽器下載css代碼時間，加快網(wǎng)頁打開速度。那么如何優(yōu)化css代碼？下面介紹一下優(yōu)化css代碼的小技巧。

優(yōu)化css代碼的小技巧

1、簡化你的注釋

很多情況下，特別是曾經(jīng)從事過 C/Java 等語言開發(fā)工作的程序員，可能會喜歡寫多行注釋，例如：

在編譯語言中這樣的注釋當然沒有問題，但在 CSS 中他們會顯著的增大 CSS 文件的體積，應該嘗試簡化成這樣：

這樣在保持可讀性的同時，減小了文件體積。事實上，在一個真正發(fā)布版本的 CSS 文件中，你完全可以去掉這些注釋。

2、簡化顏色代碼

在 CSS 中，我們經(jīng)常會跟十六進制顏色代碼打交道。你可能習慣于寫成以下“標準形式”：

color: #ffffff;
color: #ff88ff;

事實上，在 CSS 中是可以簡化這個寫法的，我們可以寫成：

color: #fff;
color: #f8f;

3、使用單行屬性代替多行屬性，即使用簡寫屬性

在 CSS 中像 margin/padding/font/border 等屬性均可以用一行來代替很多行設置，例如：

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

我們可以寫成：

padding: 10px 0 10px 0;

順序為上、右、下、左，當然，對于 margin 和 padding 屬性，當左右/上下的值相同時，還可以寫的更簡單，例如上面的例子，可寫為：

padding: 10px 0;

上下左右都相同時，甚至可以寫成：

padding: 10px;

對于其它縮寫方法，可以參考網(wǎng)上一些資料。當然，我更推薦使用 TopStyle 這款軟件在寫 CSS 的過程中學習，它會給出具體提示。

（學習視頻分享：css視頻教程）

4、當值為 0 時可省略掉單位

例如：

padding: 0;

5、同時設定多個元素的屬性

舉例說明。例如：

h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}
h4 {
margin: 0;
padding: 0;
}

更贊的寫法是這樣：

h2,h3,h4 {
margin: 0;
padding: 0;
}

6、刪除空白和換行

這是個很不起眼的操作，但對于脫離了開發(fā)階段，而要應用在網(wǎng)絡上的 CSS 而言應該進行這樣的處理，至少 Google 所有應用都是這樣做的。舉個例子：

h2 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

應該處理成：

h2{margin:0;padding:0;}
blockquote{background:#fcc;}

事實上，在 CSS 文件中可以不需要任何換行的。但是為了保持代碼那么一點點可讀性，我還是比較建議每個元素寫成一行。現(xiàn)在可以利用一些工具來進行類似的操作，因此它將不會影響你的開發(fā)過程。

7、設定過期時間，使用 GZip

如果有條件的話，我們應該設定 CSS 文件的過期時間，并開啟 GZip 來傳輸 CSS 文件。設定前者可以讓流行的瀏覽器緩存你的 CSS 文件，從而避免每次 Load 都要讀取文件，大大加快速度同時也降低流量消耗。而開啟 GZip 則可以讓你的 CSS 文件縮小的難以想象的程度，而且如今流行的瀏覽器都是支持 GZip 的。

關(guān)于“怎么優(yōu)化css”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)頁名稱：怎么優(yōu)化css
文章URL：http://www.yijiale78.com/article32/ghdesc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、域名注冊、品牌網(wǎng)站設計、移動網(wǎng)站建設、建站公司、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)