压缩方式:1。用DW软件打开CSS文件;2.使用查找和替换工具删除文件中的所有空格;3.删除样式代码中多余的分号;4.删除多余的空行,使代码全部排成一行(靠在一起)。
本教程的操作环境:windows7系统,CSS3AdobeDreamweaverCS6第6版,戴尔G3电脑。
CSS代码压缩从哪些方面入手?
(资料图)
网页开发完成后,要发布到网站的CSS代码会被直接压缩,比如删除空格、换行符、多余的分号等等。
当然,有些CSS代码可以优化,代码量可以大大减少,从而减少文件大小。
压缩css文件的方法
使用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:点击“全部替换”完成压缩。
您无需在“替换”输入框中输入任何字符或代码,只需点击“替换完成”即可完成替换。
CSS代码(文件)的压缩和简化可以使用快速DW软件通过几个步骤来完成。
css压缩的好处:
1.文件的体积减小了。
2.减少网络传输和带宽占用。
3.降低服务器的处理压力。
4.提高了页面的渲染速度。
(学习视频分享:css视频教程)以上就是如何压缩css文件的细节。请多关注php中文网站的其他相关文章!
来源:php中文网站