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：查找处键入(输入)一个英文半角小写“空格”

在“查找”输入框中输入一个空格，“替换”的输入框中无需填入然后字符或代码，这样在执行替换时候，相当于把空格替换为没有字符，相当于删除空格位置。

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、点击“应用源格式”，即可完成代码排版。简化代码。

4、注意：代码排版方式，可以通过“代码格式设置”进入设置。当然在DIVCSS5在线培训中也演示给大家看如何操作，如何选择CSS代码排版方式。

网页名称：CSS代码优化之CSS压缩与CSS代码压缩还原
文章来源：/news49/162449.html

成都网站建设公司_创新互联，为您提供企业建站、移动网站建设、建站公司、做网站、电子商务、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联