CSS壓縮與CSS代碼壓縮還原的方法

本文小編為大家詳細介紹“CSS壓縮與CSS代碼壓縮還原的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“CSS壓縮與CSS代碼壓縮還原的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

CSS壓縮與CSS代碼壓縮還原方法,CSS壓縮工具有哪些呢？使用什么工具對css代碼進行壓縮講解篇。壓縮后的CSS代碼如何快速排版好以便于再編輯在修改。

CSS代碼壓縮前后對比圖

一、CSS代碼壓縮原因、為什么要CSS壓縮 

CSS代碼壓縮最主要因素是，壓縮后的CSS代碼所占用字節數減少（文件大小減小），如果訪問量比較小的網站這點壓縮后代碼的優勢不是很明顯。但對于比較大的網站，訪問量大網站來說節約就顯得很有必要，一方面可以節約流量；另外一方面可以讓網站打開速度稍微快點（可能訪問者對這點速度沒什么感受，但確實存在的），特別是有的網站空間現在是按每月使用流量付款或購買后空間限制每月使用流量大小，如果進行壓縮后會大大降低流量使用量，從而節約成本。

節約成本案例：
比如一個網站每日PV100萬，避免訪問量大隊一個服務器資源耗用，而造成訪問慢（一般服務器都是會現在帶寬），很多這類網站都會把圖片、CSS、JS等放到另外服務器上，比如CSS放到第三方服務器上然后網站使用LINK鏈接外部CSS文件，而CSS文件是放在第三方收費OSS（開發存儲空間，比如阿里云存儲）上，都是按照流量收費的，訪問量大而CSS代碼進行壓縮自然會減少流量消耗從而降低費用。

二、CSS代碼壓縮從哪些方面入手

網頁開發好后，將要發布到網站的CSS代碼直接縮減壓縮，比如刪除空格、去掉換行、去掉多余分號等

當然有的CSS代碼可以進行優化也是可以大大減少代碼量從而減少文件大小。

三、CSS壓縮工具   

代碼壓縮推薦直接使用DW軟件（Dreamweaver）即可開始壓縮代碼。

四、壓縮方法    

使用DW軟件的查找與替換工具進行替換壓縮CSS代碼。
1、DW軟件打開CSS文件

2、刪除空格壓縮代碼
2-1：使用快捷鍵“Ctrl+F”，調出查找與替換工具選項卡。

調出后查找與替換工具截圖

2-2：查找處鍵入（輸入）一個英文半角小寫“空格”

在“查找”輸入框中輸入一個空格

在“查找”輸入框中輸入一個空格，“替換”的輸入框中無需填入然后字符或代碼，這樣在執行替換時候，相當于把空格替換為沒有字符，相當于刪除空格位置。

HTML相關閱讀：html輸入多個空格

2-3：點擊“替換全部”

點擊“替換全部”截圖

點擊“替換全部”后，即可將多余的空格位置刪除完成，完成壓縮一部分。

3、將多余的分號刪除
在CSS代碼中，每個CSS選擇器內的最后一個CSS樣式的結束是不需要“分號”結束的，換句話說每個選擇器內即“后花括號”前是不需要分號結束最后一個CSS樣式的。

可刪除或省略分號截圖

同樣使用DW軟件“查找與替換”功能刪除掉，避免刪除錯其它“分號”，這個時候在“查找與替換”選項卡中“查找”輸入框中填寫“;}”（分號+后花括號），在“替換”輸入框中只輸入“}”（后花括號），然后點擊“替換全部”，即可完成刪除多余分號符號。

4、刪除多余空行，讓代碼都排成一排（緊貼一起）
可以手動刪除空行，也可以使用DW軟件快速刪除空行，具體刪除壓縮如下。

4-1：首先DW打開CSS文件代碼

4-2：選中空行

完成空行選中截圖

首先將鼠標光標移動到選擇器開頭，然后點擊鼠標左鍵不放同時往上拉到上一個選擇器結束前（上一個CSS樣式選擇器后花括號后），這個時候即可選中空行，此時選中空行為藍色區域。

4-3：調出“查找與替換”工具
在選中后松開鼠標左鍵后，使用快捷鍵“Ctrl+F”，即可調用出“查找與替換”選項卡，此時“查找與替換”選項卡的“查找”輸入框中即可自動填上剛剛選取好的空行。

完成“空行”字符位置填寫截圖

4-4：點擊“替換全部”完成壓縮
在“替換”輸入框無需再輸入什么字符或代碼，直接點擊“替換完成”，完成替換。

刪除空行 空格和多余分號截圖

快速使用DW軟件進行著幾步操作即可完成對CSS代碼（文件）壓縮精簡。

五、DIVCSS5壓縮CSS代碼總結   

以上是對代碼進行空行、空格、多余標點符號（分號）的刪除，完成對CSS代碼壓縮。

六、壓縮后CSS代碼還原  

壓縮后CSS代碼多余空格空行符號刪除后就成為一片整體，不再便于修改維護。但一般情況下一個網站網頁很難后期不維護不修改CSS，這個時候是需要對CSS代碼進行再排版修改的。同樣還原CSS代碼排版也推薦使用DW軟件快速進行。

1、首先DW軟件打開CSS文件

2、點擊軟件代碼區最左側“格式化源代碼”圖標（像水桶）即可展開應用功能

展開后“格式化源代碼”功能截圖

3、點擊“應用源格式”，即可完成代碼排版。

完成代碼排版CSS代碼截圖

以上操作即可將壓縮后CSS代碼還原壓縮，便于修改。如果修改后需要壓縮再次根據以上CSS壓縮教程進行優化壓縮簡化代碼。

讀到這里，這篇“CSS壓縮與CSS代碼壓縮還原的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。