CSS样式优化

CSS样式优化

一、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; }
 

三、十句CSS学习顺口溜