来源:未知 时间:2014-10-30 10:02 作者:xxadmin 阅读:次
[导读] CSS压缩与CSS代码压缩还原方法,CSS压缩工具有哪些呢?使用什么工具对 css 代码进行压缩讲解篇。压缩后的 CSS代码 如何快速排版好以便于再编辑在修改。 CSS代码压缩前后对比图 一、CS...
CSS压缩与CSS代码压缩还原方法,CSS压缩工具有哪些呢?使用什么工具对css代码进行压缩讲解篇。压缩后的CSS代码如何快速排版好以便于再编辑在修改。
一、CSS代码压缩原因、为什么要CSS压缩 - TOPCSS代码压缩最主要因素是,压缩后的CSS代码所占用字节数减少(文件大小减小),如果访问量比较小的网站这点压缩后代码的优势不是很明显。但对于比较大的网站,访问量大网站来说节约就显得很有必要,一方面可以节约流量;另外一方面可以让网站打开速度稍微快点(可能访问者对这点速度没什么感受,但确实存在的),特别是有的网站空间现在是按每月使用流量付款或购买后空间限制每月使用流量大小,如果进行压缩后会大大降低流量使用量,从而节约成本。
节约成本案例: 二、CSS代码压缩从哪些方面入手 - TOP网页开发好后,将要发布到网站的CSS代码直接缩减压缩,比如删除空格、去掉换行、去掉多余分号等 当然有的CSS代码可以进行优化也是可以大大减少代码量从而减少文件大小。
可扩展了解相关教程 三、CSS压缩工具 - TOP代码压缩推荐直接使用DW软件(Dreamweaver)即可开始压缩代码。 四、压缩方法 - TOP
使用DW软件的查找与替换工具进行替换压缩CSS代码。
2、删除空格压缩代码
2-2:查找处键入(输入)一个英文半角小写“空格”
在“查找”输入框中输入一个空格,“替换”的输入框中无需填入然后字符或代码,这样在执行替换时候,相当于把空格替换为没有字符,相当于删除空格位置。 HTML相关阅读:html输入多个空格 2-3:点击“替换全部”
点击“替换全部”后,即可将多余的空格位置删除完成,完成压缩一部分。
3、将多余的分号删除
同样使用DW软件“查找与替换”功能删除掉,避免删除错其它“分号”,这个时候在“查找与替换”选项卡中“查找”输入框中填写“;}”(分号+后花括号),在“替换”输入框中只输入“}”(后花括号),然后点击“替换全部”,即可完成删除多余分号符号。
4、删除多余空行,让代码都排成一排(紧贴一起) 4-1:首先DW打开CSS文件代码 4-2:选中空行
首先将鼠标光标移动到选择器开头,然后点击鼠标左键不放同时往上拉到上一个选择器结束前(上一个CSS样式选择器后花括号后),这个时候即可选中空行,此时选中空行为蓝色区域。
4-3:调出“查找与替换”工具
4-4:点击“替换全部”完成压缩
快速使用DW软件进行着几步操作即可完成对CSS代码(文件)压缩精简。 五、DIVCSS5压缩CSS代码总结 - TOP以上是对代码进行空行、空格、多余标点符号(分号)的删除,完成对CSS代码压缩。 六、压缩后CSS代码还原 - TOP压缩后CSS代码多余空格空行符号删除后就成为一片整体,不再便于修改维护。但一般情况下一个网站网页很难后期不维护不修改CSS,这个时候是需要对CSS代码进行再排版修改的。同样还原CSS代码排版也推荐使用DW软件快速进行。 1、首先DW软件打开CSS文件 2、点击软件代码区最左侧“格式化源代码”图标(像水桶)即可展开应用功能
3、点击“应用源格式”,即可完成代码排版。
以上操作即可将压缩后CSS代码还原压缩,便于修改。如果修改后需要压缩再次根据以上CSS压缩教程进行优化压缩简化代码。 4、注意:代码排版方式,可以通过“代码格式设置”进入设置。当然在DIVCSS5在线培训中也演示给大家看如何操作,如何选择CSS代码排版方式。 跟多DIV CSS开发代码压缩优化可上DIVCSS5搜索查找,了解更完善更明白。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com