CSS技巧13则

1,简写CSS---简洁可读,减少CSS文件尺寸
在设置边框\边距等样式时,可使用以下代码:
   border:1px solid gray;     /*四边各1px边框*/
   margin:1px;                       /*四边各1px边距*/
   margin:1px 2px;                 /*上下边1px,左右边2px*/
   margin:2px 1px 2px 5px;      /*上2px,右1px,下2px,左5px*/
   /*
注意:
a.上、右、下、左的书写顺序
b.数值与单位不能有空格，每个值之间用空格隔开
*/

2,明确定义单位，除非值为0;不要在数值和单位之间加空格

3,样式名称一律使用小写,因为在XHTML中，css定义的元素名称是区分大小写的

4,使用子选择器减少id和class的定义,如 #menu li{},#menu li a span {}

5,添加背景图片时使用绝对路径,因为CSS文件中是相对当前路径的.

6,使用组选择器,如.class1,.class2,.class3{color:black},同时定义多个样式的公用属性

7,重定义<h1><h2><h3>代替一些标题样式,有利于SEO;如:
   h1 {font-size:14px;color:gray;}
   <h1>新闻中心</h1>
   如果是图片:
   h1 {background: url(news.gif) no-repeat;}
   h1 span{position: absolute;left:-2000px;}
   <h1><span>新闻中心</span></h1>
   这样做比图片alt属性更有利于搜索引擎!

8,解决IE6无法定义1px高度的容器,例如:{overflow:hidden | zoom:0.08 | line-height:1px}

9,FF下文本自动撑开容器的高度：
{
height:auto !important;
height:100px;
min-height:100px;
}
10,层水平居中:{margin: 0 auto; width: 800px; }

11,文本垂直居中{height:25px; line-height:25px;}

12,正确定义超链接样式CSS属性的排列顺序：Link,Visited,Hover,A

13,文字自动换行{width:300px;word-wrap:break-word;}

另外,IE6中使用高度较小的空容器时,显示会有问题,如:

<div style="height:5px;float:left"></div>实际显示高度会大于5px

加上overflow:hidden就好了,如
<div style="height:5px;float:left;overflow:hidden"></div>