1
2
3
4
5
6
7
8
9
10

.wrap #main{
          float:left;
          display:block;
          background:url(img/bg.gif) repeat; 
          width:100px;
          height:100px;
          border:0;
          text-align:center;
          color:#05a;
}

大家看看上面这段代码有什么问题吗？先找找错误，然后再看下文，看看你找到的错误是否跟我检查出的是一样的。
可能平时你的CSS代码就是这样写的，接下来我说说，都有哪些问题。

1，color的简写
这是最容易犯的一个错误color：#05a;
你可能是看到有些介绍”CSS技巧“的文章上说，可以这样简写。其实这样的书写并不规范。十六进制的颜色值默认标准是大写及6位数标注。不规范的简写会降低CSS渲染的效率。正确写法应该是color：#0055AA;

2，背景图片平铺
平铺背景图的时候，你可能会切成1px*1px的图片。
其实，过小的图片进行平铺会大大增加CSS渲染的负担。我们这里的区块是宽高100px，你用宽高1px的图片平铺，渲染时会重复平铺10000次。所以建议不要用小于8px的图片进行平铺。

3，border：0;和border：none;的使用
border:none; 和 border:0;
一个是指没有边框样式
一个是指边框的宽度为0
border 是 color width style的全局属性
值为none时 作用的是style
值为0时 设置的是width
border中最重要的就是style 而不是其他属性。样式没有了，就什么都没了。0的时候，还是会有样式存在，只是因为值为0的缘故，不显示罢了。
所以建议用border：none;

4，不要用额外的标签描述id
.wrap #main{这样的书写是不准确的}。id是唯一的，加上多余的标签，会减低匹配效率。
#main{直接这样大胆的写是没错的}

5，属性书写顺序
我们在书写属性顺序的时候，是想到哪里就写到哪里。这段代码里的显示属性，自身属性和文本属性的书写顺序都是错误的。正确的顺序是怎样的，大家看看下面的资料就明了了。

//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other
textcontent

如果你还发现了其他错误，请指出共同学习。

除非注明，本博客文章均为该作者原创，转载请以链接形式标明本文地址
本文地址：http://www.csszone.net/index.php/archives/502