您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“CSS壓縮與CSS代碼壓縮還原的方法”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“CSS壓縮與CSS代碼壓縮還原的方法”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
CSS壓縮與CSS代碼壓縮還原方法,CSS壓縮工具有哪些呢?使用什么工具對(duì)css代碼進(jìn)行壓縮講解篇。壓縮后的CSS代碼如何快速排版好以便于再編輯在修改。
CSS代碼壓縮前后對(duì)比圖
CSS代碼壓縮最主要因素是,壓縮后的CSS代碼所占用字節(jié)數(shù)減少(文件大小減?。绻L問量比較小的網(wǎng)站這點(diǎn)壓縮后代碼的優(yōu)勢不是很明顯。但對(duì)于比較大的網(wǎng)站,訪問量大網(wǎng)站來說節(jié)約就顯得很有必要,一方面可以節(jié)約流量;另外一方面可以讓網(wǎng)站打開速度稍微快點(diǎn)(可能訪問者對(duì)這點(diǎn)速度沒什么感受,但確實(shí)存在的),特別是有的網(wǎng)站空間現(xiàn)在是按每月使用流量付款或購買后空間限制每月使用流量大小,如果進(jìn)行壓縮后會(huì)大大降低流量使用量,從而節(jié)約成本。
節(jié)約成本案例:
比如一個(gè)網(wǎng)站每日PV100萬,避免訪問量大隊(duì)一個(gè)服務(wù)器資源耗用,而造成訪問慢(一般服務(wù)器都是會(huì)現(xiàn)在帶寬),很多這類網(wǎng)站都會(huì)把圖片、CSS、JS等放到另外服務(wù)器上,比如CSS放到第三方服務(wù)器上然后網(wǎng)站使用LINK鏈接外部CSS文件,而CSS文件是放在第三方收費(fèi)OSS(開發(fā)存儲(chǔ)空間,比如阿里云存儲(chǔ))上,都是按照流量收費(fèi)的,訪問量大而CSS代碼進(jìn)行壓縮自然會(huì)減少流量消耗從而降低費(fèi)用。
網(wǎng)頁開發(fā)好后,將要發(fā)布到網(wǎng)站的CSS代碼直接縮減壓縮,比如刪除空格、去掉換行、去掉多余分號(hào)等
當(dāng)然有的CSS代碼可以進(jìn)行優(yōu)化也是可以大大減少代碼量從而減少文件大小。
代碼壓縮推薦直接使用DW軟件(Dreamweaver)即可開始?jí)嚎s代碼。
使用DW軟件的查找與替換工具進(jìn)行替換壓縮CSS代碼。
1、DW軟件打開CSS文件
2、刪除空格壓縮代碼
2-1:使用快捷鍵“Ctrl+F”,調(diào)出查找與替換工具選項(xiàng)卡。
調(diào)出后查找與替換工具截圖
2-2:查找處鍵入(輸入)一個(gè)英文半角小寫“空格”
在“查找”輸入框中輸入一個(gè)空格
在“查找”輸入框中輸入一個(gè)空格,“替換”的輸入框中無需填入然后字符或代碼,這樣在執(zhí)行替換時(shí)候,相當(dāng)于把空格替換為沒有字符,相當(dāng)于刪除空格位置。
HTML相關(guān)閱讀:html輸入多個(gè)空格
2-3:點(diǎn)擊“替換全部”
點(diǎn)擊“替換全部”截圖
點(diǎn)擊“替換全部”后,即可將多余的空格位置刪除完成,完成壓縮一部分。
3、將多余的分號(hào)刪除
在CSS代碼中,每個(gè)CSS選擇器內(nèi)的最后一個(gè)CSS樣式的結(jié)束是不需要“分號(hào)”結(jié)束的,換句話說每個(gè)選擇器內(nèi)即“后花括號(hào)”前是不需要分號(hào)結(jié)束最后一個(gè)CSS樣式的。
可刪除或省略分號(hào)截圖
同樣使用DW軟件“查找與替換”功能刪除掉,避免刪除錯(cuò)其它“分號(hào)”,這個(gè)時(shí)候在“查找與替換”選項(xiàng)卡中“查找”輸入框中填寫“;}”(分號(hào)+后花括號(hào)),在“替換”輸入框中只輸入“}”(后花括號(hào)),然后點(diǎn)擊“替換全部”,即可完成刪除多余分號(hào)符號(hào)。
4、刪除多余空行,讓代碼都排成一排(緊貼一起)
可以手動(dòng)刪除空行,也可以使用DW軟件快速刪除空行,具體刪除壓縮如下。
4-1:首先DW打開CSS文件代碼
4-2:選中空行
完成空行選中截圖
首先將鼠標(biāo)光標(biāo)移動(dòng)到選擇器開頭,然后點(diǎn)擊鼠標(biāo)左鍵不放同時(shí)往上拉到上一個(gè)選擇器結(jié)束前(上一個(gè)CSS樣式選擇器后花括號(hào)后),這個(gè)時(shí)候即可選中空行,此時(shí)選中空行為藍(lán)色區(qū)域。
4-3:調(diào)出“查找與替換”工具
在選中后松開鼠標(biāo)左鍵后,使用快捷鍵“Ctrl+F”,即可調(diào)用出“查找與替換”選項(xiàng)卡,此時(shí)“查找與替換”選項(xiàng)卡的“查找”輸入框中即可自動(dòng)填上剛剛選取好的空行。
完成“空行”字符位置填寫截圖
4-4:點(diǎn)擊“替換全部”完成壓縮
在“替換”輸入框無需再輸入什么字符或代碼,直接點(diǎn)擊“替換完成”,完成替換。
刪除空行 空格和多余分號(hào)截圖
快速使用DW軟件進(jìn)行著幾步操作即可完成對(duì)CSS代碼(文件)壓縮精簡。
以上是對(duì)代碼進(jìn)行空行、空格、多余標(biāo)點(diǎn)符號(hào)(分號(hào))的刪除,完成對(duì)CSS代碼壓縮。
壓縮后CSS代碼多余空格空行符號(hào)刪除后就成為一片整體,不再便于修改維護(hù)。但一般情況下一個(gè)網(wǎng)站網(wǎng)頁很難后期不維護(hù)不修改CSS,這個(gè)時(shí)候是需要對(duì)CSS代碼進(jìn)行再排版修改的。同樣還原CSS代碼排版也推薦使用DW軟件快速進(jìn)行。
1、首先DW軟件打開CSS文件
2、點(diǎn)擊軟件代碼區(qū)最左側(cè)“格式化源代碼”圖標(biāo)(像水桶)即可展開應(yīng)用功能
展開后“格式化源代碼”功能截圖
3、點(diǎn)擊“應(yīng)用源格式”,即可完成代碼排版。
完成代碼排版CSS代碼截圖
以上操作即可將壓縮后CSS代碼還原壓縮,便于修改。如果修改后需要壓縮再次根據(jù)以上CSS壓縮教程進(jìn)行優(yōu)化壓縮簡化代碼。
讀到這里,這篇“CSS壓縮與CSS代碼壓縮還原的方法”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。