怎么优化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 的过程中学习,它会给出具体提示。
4.当值为 0 时可省略掉单位
例如:padding: 0;
5.同时设定多个元素的属性
举例说明。例如:
h2 { margin: 0; padding: 0; } h3 { margin: 0; padding: 0; } h4 { margin: 0; padding: 0; }
更赞的写法是这样:
h2,h3,h4 { margin: 0; padding: 0; }
6.删除空白和换行
这是个很不起眼的操作,但对于脱离了开发阶段,而要应用在网络上的 CSS 而言应该进行这样的处理,至少 Google 所有应用都是这样做的。举个例子:
h2 { margin: 0; padding: 0; } blockquote { background-color: #ffcccc; }
应该处理成:
h2{margin:0;padding:0;} blockquote{background:#fcc;}
事实上,在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性,我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作,因此它将不会影响你的开发过程。
7.设定过期时间,使用 GZip
如果有条件的话,我们应该设定 CSS 文件的过期时间,并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件,从而避免每次 Load 都要读取文件,大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度,而且如今流行的浏览器都是支持 GZip 的。
感谢你能够认真阅读完这篇文章,希望小编分享怎么优化CSS代码内容对大家有帮助,同时也希望大家多多支持创新互联建站,关注创新互联网站制作公司行业资讯频道,遇到问题就找创新互联建站,详细的解决方法等着你来学习!
新闻名称:怎么优化CSS代码-创新互联
本文地址:http://azwzsj.com/article/johhh.html