CSS的压缩 方法与解压

为什么要压缩CSS？

　　1、大网站节约流量

　　2、加快访问速度

工具：Dreamweaver（手工替换，个人感觉任何文本编辑器都可以）不过DW可以还原

　　　　

 

CSS压缩与CSS代码压缩还原方法,CSS压缩工具有哪些呢？使用什么工具对css代码进行压缩讲解篇。压缩后的CSS代码如何快速排版好以便于再编辑在修改。

CSS代码压缩前后对比图

一、CSS代码压缩原因、为什么要CSS压缩   -   TOP

CSS代码压缩最主要因素是，压缩后的CSS代码所占用字节数减少（文件大小减小），如果访问量比较小的网站这点压缩后代码的优势不是很明显。但对于比较大的网站，访问量大网站来说节约就显得很有必要，一方面可以节约流量；另外一方面可以让网站打开速度稍微快点（可能访问者对这点速度没什么感受，但确实存在的），特别是有的网站空间现在是按每月使用流量付款或购买后空间限制每月使用流量大小，如果进行压缩后会大大降低流量使用量，从而节约成本。

节约成本案例：
比如一个网站每日PV100万，避免访问量大队一个服务器资源耗用，而造成访问慢（一般服务器都是会现在带宽），很多这类网站都会把图片、CSS、JS等放到另外服务器上，比如CSS放到第三方服务器上然后网站使用LINK链接外部CSS文件，而CSS文件是放在第三方收费OSS（开发存储空间，比如阿里云存储）上，都是按照流量收费的，访问量大而CSS代码进行压缩自然会减少流量消耗从而降低费用。

二、CSS代码压缩从哪些方面入手   -   TOP

网页开发好后，将要发布到网站的CSS代码直接缩减压缩，比如删除空格、去掉换行、去掉多余分号等

当然有的CSS代码可以进行优化也是可以大大减少代码量从而减少文件大小。

可扩展了解相关教程
1、CSS代码优化
2、CSS代码合并
3、html压缩
4、CSS初始化

三、CSS压缩工具   -   TOP

代码压缩推荐直接使用DW软件（Dreamweaver）即可开始压缩代码。

四、压缩方法   -   TOP

使用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代码总结   -   TOP

以上是对代码进行空行、空格、多余标点符号（分号）的删除，完成对CSS代码压缩。

六、压缩后CSS代码还原   -   TOP

压缩后CSS代码多余空格空行符号删除后就成为一片整体，不再便于修改维护。但一般情况下一个网站网页很难后期不维护不修改CSS，这个时候是需要对CSS代码进行再排版修改的。同样还原CSS代码排版也推荐使用DW软件快速进行。

1、首先DW软件打开CSS文件

2、点击软件代码区最左侧“格式化源代码”图标（像水桶）即可展开应用功能

展开后“格式化源代码”功能截图

3、点击“应用源格式”，即可完成代码排版。

完成代码排版CSS代码截图

以上操作即可将压缩后CSS代码还原压缩，便于修改。如果修改后需要压缩再次根据以上CSS压缩教程进行优化压缩简化代码。

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

跟多DIV CSS开发代码压缩优化可上DIVCSS5搜索查找，了解更完善更明白。

转载来源网址：http://www.divcss5.com/jiqiao/j681.shtml