2022年02月08日整理发布:如何压缩css文件

2023-07-31 04:08:16 来源:互联网

压缩方式: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中文网站

标签:

最近更新