首頁 > web前端 > 前端問答 > 如何壓縮css文件

如何壓縮css文件

青灯夜游
發布: 2023-01-05 16:08:33
原創
3470 人瀏覽過

壓縮方法:1、使用DW軟體開啟CSS檔案;2、使用「尋找與取代」工具刪除檔案中的全部空格;3、將樣式程式碼中多餘的分號刪除;4、刪除多餘空行,讓程式碼都排成一排(緊貼一起)即可。

如何壓縮css文件

本教學操作環境:windows7系統、CSS3&&AdobeDreamweaverCS6版、Dell G3電腦。

CSS程式碼壓縮從哪些方面入手

網頁開發好後,將要發佈到網站的CSS程式碼直接縮減壓縮,例如刪除空格、去掉換行、去掉多餘分號等

當然有的CSS程式碼可以進行最佳化也是可以大幅減少程式碼量從而減少檔案大小。

壓縮css檔案的方法 

使用DW軟體的尋找與取代工具進行取代壓縮CSS程式碼。

1、DW軟體開啟CSS檔案

2、刪除空格壓縮程式碼

2-1:使用快速鍵“Ctrl F”,調出尋找與取代工具選項卡。

如何壓縮css文件

2-2:在尋找處鍵入(輸入)一個英文半角小寫「空格」

在「尋找」輸入框中輸入一個空格

如何壓縮css文件

在「尋找」輸入框中輸入一個空格,「替換」的輸入框中無需填入然後字元或程式碼,這樣在執行替換時候,相當於把空格替換為沒有字符,相當於刪除空格位置。

2-3:點選「替換全部」

點選「替換全部」後,即可將多餘的空格位置刪除完成,完成壓縮一部分。

如何壓縮css文件

3、將多餘的分號刪除

在CSS程式碼中,每個CSS選擇器內的最後一個CSS樣式的結束是不需要「分號」結束的,換句話說每個選擇器內即「後花括號」前是不需要分號結束最後一個CSS樣式的。

如何壓縮css文件

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

4、刪除多餘空行,讓程式碼都排成一排(緊貼在一起)

可以手動刪除空白行,也可以使用DW軟體快速刪除空白行,具體刪除壓縮如下。

4-1:首先DW開啟CSS檔案程式碼

4-2:選取空白行

先將滑鼠遊標移到選擇器開頭,然後點選滑鼠左鍵不放同時往上拉到上一個選擇器結束前(上一個CSS樣式選擇器後花括號後),這個時候即可選取空白行,此時選取空行為藍色區域。

如何壓縮css文件

4-3:調出“尋找與替換”工具

#在選取後放開滑鼠左鍵後,使用快捷鍵“Ctrl F” ,即可呼叫出「尋找與取代」選項卡,此時「尋找與取代」標籤的「尋找」輸入框中即可自動填上剛選取好的空白行。

如何壓縮css文件

4-4:點選「替換全部」完成壓縮

#在「替換」輸入框無需再輸入什麼字元或程式碼,直接點選「替換完成”,完成替換。

如何壓縮css文件

快速使用DW軟體進行幾步操作即可完成對CSS程式碼(檔案)壓縮精簡。

css壓縮的好處:

1、減少了檔案的體積

2、減少了網路傳輸量和頻寬佔用

3、減少了伺服器的處理的壓力

4、提高了頁面的渲染顯示的速度

(學習影片分享:css影片教學

以上是如何壓縮css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板