首页 >web前端 >前端问答 > 正文

如何优化css

原创2021-04-29 17:58:190567

优化方法: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 的。

更多编程相关知识,请访问:编程视频!!

以上就是如何优化css的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:优化css
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php定义数组有哪些方法748
    html与css有什么区别667
    xhtml和html的区别是什么1070
    推荐视频教程
  • html与CSS基础入门视频教程html与CSS基础入门视频教程
  • CSS深入浅出视频教程CSS深入浅出视频教程
  • CSS高级实例视频教程CSS高级实例视频教程
  • CSS3进阶视频教程CSS3进阶视频教程
  • CSS3精讲视频教程CSS3精讲视频教程
  • 视频教程分类