写样式文件的时候要注意的地方

一、编码问题

有些时候你可能会发现网页加了样式表文件后显示不正常，而且样式表文件也并没有错，这时就得找找编码的问题的，因为如果用UE等文本编辑器保存文件的时候，有时会不小心存成UTF-8编码的文件，而网页如果使用的是GB-3212编码，就会出现网页显示不正常的问题。

二、书写顺序

很多人不注意样式属性的书写顺序，想到什么写什么，虽然这个影响小到你查觉不到，但在带宽很小的时候，这个影响就会被放大了。因为样式表文件也是按文件的读取顺序去执行的，将属性分类并以一定的顺序书写，不但可以提高可读性，对于文件执行的优化是有帮助的。

当然这顺序不是你想怎么写就怎么写，也得有些依据才行。我们可以把属性分成两大类，布局属性和表现属性。很容易理解，布局属性就是用于布局的属性，表现属性就是用于显示效果方面的。先执行布局再执行表现属性，可以让页面先把布局显示完整。按《Mozilla建议的CSS书写顺序 》中所提到的“显示属性”、“自身属性”、“文本属性”的顺序，我觉得是很不错的，你会发现这个顺序是布局的属性在上方，表现的属性在下面。我是把“自身属性”中的“border”之上的部分分为布局属性，其它的分为表现属性。从大的角度上，你可以把布局属性和表现属性分开，为“换肤”提供方便。

三、兼容问题

这个问题也是最让人头大的问题，为不同的浏览器写hack，已经成为很多用CSS布局的页面仔常做的事，但很少会有人去想怎么做hack才是“正确”的，我并不是说做“hack”是正确的，能不用还是不能的好。还是推荐使用IE条件注解。这里有个技巧，虽然不是我发现的，但的确是很有用：在网页代码的第一行加上

<?xml version="1.0" encoding="UTF-8"?>

让IE7以下的IE版本使用旧的盒模型，先对FF、IE7和OP写样式，再对IE7以下的版本做hack，这个hack可以放在IE条件注解里：

<!--[if lte IE 7]>样式文件<![endif]-->

<!--[if lt IE 7]>样式文件<![endif]-->

这样就只有IE7及以下的IE版本才会用到hack了。同时也是使用了正确的XHTML文件格式。