CSS代碼優(yōu)化之CSS壓縮與CSS代碼壓縮還原

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

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

CSS代碼壓縮最主要因素是，壓縮后的CSS代碼所占用字節(jié)數(shù)減少(文件大小減小)，如果訪問(wèn)量比較小的網(wǎng)站這點(diǎn)壓縮后代碼的優(yōu)勢(shì)不是很明顯。但對(duì)于比較大的網(wǎng)站，訪問(wèn)量大網(wǎng)站來(lái)說(shuō)節(jié)約就顯得很有必要，一方面可以節(jié)約流量;另外一方面可以讓網(wǎng)站打開(kāi)速度稍微快點(diǎn)(可能訪問(wèn)者對(duì)這點(diǎn)速度沒(méi)什么感受，但確實(shí)存在的)，特別是有的網(wǎng)站空間現(xiàn)在是按每月使用流量付款或購(gòu)買后空間限制每月使用流量大小，如果進(jìn)行壓縮后會(huì)大大降低流量使用量，從而節(jié)約成本。

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

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

網(wǎng)頁(yè)開(kāi)發(fā)好后，將要發(fā)布到網(wǎng)站的CSS代碼直接縮減壓縮，比如刪除空格、去掉換行、去掉多余分號(hào)等

當(dāng)然有的CSS代碼可以進(jìn)行優(yōu)化也是可以大大減少代碼量從而減少文件大小。

三、CSS壓縮工具

代碼壓縮推薦直接使用DW軟件(Dreamweaver)即可開(kāi)始?jí)嚎s代碼。

四、壓縮方法

使用DW軟件的查找與替換工具進(jìn)行替換壓縮CSS代碼。

1、DW軟件打開(kāi)CSS文件

2、刪除空格壓縮代碼

2-1：使用快捷鍵“Ctrl+F”，調(diào)出查找與替換工具選項(xiàng)卡。

2-2：查找處鍵入(輸入)一個(gè)英文半角小寫(xiě)“空格”

在“查找”輸入框中輸入一個(gè)空格，“替換”的輸入框中無(wú)需填入然后字符或代碼，這樣在執(zhí)行替換時(shí)候，相當(dāng)于把空格替換為沒(méi)有字符，相當(dāng)于刪除空格位置。

2-3：點(diǎn)擊“替換全部”

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

3、將多余的分號(hào)刪除

在CSS代碼中，每個(gè)CSS選擇器內(nèi)的最后一個(gè)CSS樣式的結(jié)束是不需要“分號(hào)”結(jié)束的，換句話說(shuō)每個(gè)選擇器內(nèi)即“后花括號(hào)”前是不需要分號(hào)結(jié)束最后一個(gè)CSS樣式的。

同樣使用DW軟件“查找與替換”功能刪除掉，避免刪除錯(cuò)其它“分號(hào)”，這個(gè)時(shí)候在“查找與替換”選項(xiàng)卡中“查找”輸入框中填寫(xiě)“;}”(分號(hào)+后花括號(hào))，在“替換”輸入框中只輸入“}”(后花括號(hào))，然后點(diǎn)擊“替換全部”，即可完成刪除多余分號(hào)符號(hào)。

4、刪除多余空行，讓代碼都排成一排(緊貼一起)

可以手動(dòng)刪除空行，也可以使用DW軟件快速刪除空行，具體刪除壓縮如下。

4-1：首先DW打開(kāi)CSS文件代碼

4-2：選中空行

首先將鼠標(biāo)光標(biāo)移動(dòng)到選擇器開(kāi)頭，然后點(diǎn)擊鼠標(biāo)左鍵不放同時(shí)往上拉到上一個(gè)選擇器結(jié)束前(上一個(gè)CSS樣式選擇器后花括號(hào)后)，這個(gè)時(shí)候即可選中空行，此時(shí)選中空行為藍(lán)色區(qū)域。

4-3：調(diào)出“查找與替換”工具

在選中后松開(kāi)鼠標(biāo)左鍵后，使用快捷鍵“Ctrl+F”，即可調(diào)用出“查找與替換”選項(xiàng)卡，此時(shí)“查找與替換”選項(xiàng)卡的“查找”輸入框中即可自動(dòng)填上剛剛選取好的空行。

4-4：點(diǎn)擊“替換全部”完成壓縮

在“替換”輸入框無(wú)需再輸入什么字符或代碼，直接點(diǎn)擊“替換完成”，完成替換。

快速使用DW軟件進(jìn)行著幾步操作即可完成對(duì)CSS代碼(文件)壓縮精簡(jiǎn)。

五、DIVCSS5壓縮CSS代碼總結(jié)

以上是對(duì)代碼進(jìn)行空行、空格、多余標(biāo)點(diǎn)符號(hào)(分號(hào))的刪除，完成對(duì)CSS代碼壓縮。

六、壓縮后CSS代碼還原

壓縮后CSS代碼多余空格空行符號(hào)刪除后就成為一片整體，不再便于修改維護(hù)。但一般情況下一個(gè)網(wǎng)站網(wǎng)頁(yè)很難后期不維護(hù)不修改CSS，這個(gè)時(shí)候是需要對(duì)CSS代碼進(jìn)行再排版修改的。同樣還原CSS代碼排版也推薦使用DW軟件快速進(jìn)行。

1、首先DW軟件打開(kāi)CSS文件

2、點(diǎn)擊軟件代碼區(qū)最左側(cè)“格式化源代碼”圖標(biāo)(像水桶)即可展開(kāi)應(yīng)用功能

3、點(diǎn)擊“應(yīng)用源格式”，即可完成代碼排版。簡(jiǎn)化代碼。

4、注意：代碼排版方式，可以通過(guò)“代碼格式設(shè)置”進(jìn)入設(shè)置。當(dāng)然在DIVCSS5在線培訓(xùn)中也演示給大家看如何操作，如何選擇CSS代碼排版方式。

網(wǎng)頁(yè)名稱：CSS代碼優(yōu)化之CSS壓縮與CSS代碼壓縮還原
文章來(lái)源：http://www.bm7419.com/news49/162449.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、建站公司、做網(wǎng)站、電子商務(wù)、ChatGPT

廣告

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