CSS样式优化

浏览数：31 / 时间：2015年06月09日

一、css代码优化作用与意义

1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少，便于日后维护
3、让自己写的css代码更加专业。

二、css代码优化的方法

1.使用简写

如果你现在还对简写一点都不了解，那你就又写落伍了，不过幸好，学起来并不是很难。使用简写是一种让代码减少的最简单方法。没有比现在更适合实践代码简写的时候了，还等什么，一起来看看吧。

Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明…

p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }

你可以把它们简写成这样:

p { margin: 10px 20px 30px 40px; }

浏览器可以通过不同数量的属性值来解释你定义的CSS代码

2.避免使用Hack

Hack是一个糟糕的东西，它会为不同浏览器定义一样的代码，使得CSS繁冗。现在我们知道使用条件性注释来代替hack，他们在IE6和IE7中是被认可的，甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码，因此，更小的、核心的CSS代码用来服务于遵从标准的浏览器，只有需求条件出现的时候（比如IE），才会去下载额外的CSS文件！

3、CSS重用优化

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便，如下：

.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能需要了解CSS居中)，我们就可以提取他们相同属性

优化后:

.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }

4. 把 Stylesheets 放在 HTML 页面头部

浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完成，这样一来，用户看到页面的时间会更晚。

5. 避免使用 CSS Expressions

padding: 0px; margin: 0px; line-height: 26px; color: rgb(51, 51, 51); ">Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

6. 避免使用 Filter

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况，最好的解决办法就是使用 PNG8。

7、尽可能少的使用css images

能通过代码或字符实现的，就不用图片去解决。比如“可能感兴趣的人”展开气泡上下三角、返回顶部的箭头、“更多”后面的»符号等。既减小CSS图片请求，又不会面临若干套皮肤升级困难的问题，仅通过对CSS的color、backgroud等属性的控制，就可以换色了。

8、尽量使用CSS3等新技术

尽量使用CSS3实现功能，即非图片类的元素效果图，如圆角、阴影、渐变、半透等效果，可以通过样式控制，而无需切图的元素，在得到设计师认可后，不用图片，只做样式控制。满足高级浏览器的视觉，IE系列不能显示的，有原则的放弃。不仅为速度助力，还在放弃低级浏览器的大方向前进一步。

三、十句CSS学习顺口溜

1、IE边框若显若无，须注意，定是高度设置已忘记；

2、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

3、三像素文本慢移不必慌，高度设置帮你忙；

4、兼容各个浏览须注意，默认设置行高可能是杀手；

5、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

6、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

7、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。