如何优化css

优化方法：1、简化注释；2、简化颜色代码；3、使用单行属性代替多行属性，即使用简写属性；4、当值为0时省略单位；5、同时设定多个元素的属性；6、删除空白和换行；7、设定过期时间，使用GZip。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

优化css代码，可以减少占用网页字节，在同等条件下缩短浏览器下载css代码时间，加快网页打开速度。那么如何优化css代码？下面介绍一下优化css代码的小技巧。

优化css代码的小技巧

1、简化你的注释

很多情况下，特别是曾经从事过 C/Java 等语言开发工作的程序员，可能会喜欢写多行注释，例如：

在编译语言中这样的注释当然没有问题，但在 CSS 中他们会显著的增大 CSS 文件的体积，应该尝试简化成这样：

这样在保持可读性的同时，减小了文件体积。事实上，在一个真正发布版本的 CSS 文件中，你完全可以去掉这些注释。

2、简化颜色代码

在 CSS 中，我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”：

color: #ffffff;
color: #ff88ff;

事实上，在 CSS 中是可以简化这个写法的，我们可以写成：

color: #fff;
color: #f8f;

3、使用单行属性代替多行属性，即使用简写属性

在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置，例如：

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

我们可以写成：

padding: 10px 0 10px 0;

顺序为上、右、下、左，当然，对于 margin 和 padding 属性，当左右/上下的值相同时，还可以写的更简单，例如上面的例子，可写为：

padding: 10px 0;

上下左右都相同时，甚至可以写成：

padding: 10px;

对于其它缩写方法，可以参考网上一些资料。当然，我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习，它会给出具体提示。

（学习视频分享：css视频教程）

4、当值为 0 时可省略掉单位

例如：

padding: 0;

5、同时设定多个元素的属性

举例说明。例如：

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

更赞的写法是这样：

h1,h2,h3 {
margin: 0;
padding: 0;
}

6、删除空白和换行

这是个很不起眼的操作，但对于脱离了开发阶段，而要应用在网络上的 CSS 而言应该进行这样的处理，至少 Google 所有应用都是这样做的。举个例子：

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

应该处理成：

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

事实上，在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性，我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作，因此它将不会影响你的开发过程。

7、设定过期时间，使用 GZip

如果有条件的话，我们应该设定 CSS 文件的过期时间，并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件，从而避免每次 Load 都要读取文件，大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度，而且如今流行的浏览器都是支持 GZip 的。

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci 如何优化css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!