css优化篇

首先，CSS的优化工作主要从两个方面着手

• 网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些
• 语法性能：同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知识，其实CSS里面也有一些

合写CSS ：能合写的属性不要分开写，部分例子如下

background属性

1 .test{2   background: #000 url(image.jpg) left top no-repeat;3 } 4 background-image: url(image.jpg);5 background-position: left top;6 background-repeat: no-repeat;

margin/padding

{margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}{margin: 5px 10px 5px 10px;} 顺时针{border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;}{border: 2px 5px 10px 3px;}

{font: oblique bold 16px/35px Helvetica,Arial} font-style: oblique; font-weight:bold; font-size: 16px;   line-height:35px; font-family:Helvetical,Arial;

border:5px solid red;

1 border:border-width,border-style,border-color;

不要使用 @import

与 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种： 使用多个 元素，最好是发布的时候合并压缩css，减少http请求个数

利用继承

说到继承，就需要了解权重相关知识，也顺便总结一下各种情况下哪个属性优先，防止滥用属性

• 由于继承而发生样式冲突时，最近祖先获胜。
• 继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
• 直接指定的样式发生冲突时，样式权值高者获胜。

• !important的样式属性不被覆盖。不能滥用!important。
• 外联式样式（属于外部样式表）

• 嵌入式样式（属于内部样式表）

• 内联式样式（属于内部样式表）