CSS使用须知

尹旭东 2012-03-18

展开全文

1、文字垂直居中，需设置元素高height和行高line-height相等

2、不要使用过小的图片做背景平铺如：1px，宽高1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。

3、无边框，推荐的写法是 border:none;

4、慎用 * 通配符，所谓通配符，就是将 CSS 中的所有标签均起作用，大大的占用资源。

5、坚决不用 CSS 表达式，css就是css，扯上javascript的expression进来，不但性能影响了，独立性也不行。

6、使用引用样式表，而不是通过 @import 导入，引入样式表是加载完css才渲染页面，用户体验比较好，不会出现界面初始化紊乱的现象。

7、知道什么时候用什么图片格式
png是压缩比较少的图片格式，很清晰，但IE6不支持PNG-24,却完全支持PNG-8，（如果是不透明的PNG-24,IE6也是完美支持）

gif用于要求不高的小图标，兼容性很好

jpg是压缩很多的图片，也是使用最多的

8、IE6浮动标签的margin双倍边距bug问题:加上display:inline解决

9、div层居中于浏览器

水平居中: div { width:400px; height:400px; margin:0 auto; } //注：html代码前面一定要加上下列w3c声明，否则无法居中。

居中居中: div{position:absolute;top:50%; left:50%; margin:-100px 0 0 -100px;width:200px; height:200px; border:1px solid red;}

10、处理文字经常用的：
文字自动换行:word-wrap:break-word;

文字强制同一行：white-space: nowrap;

超出行用“…” text-overflow: ellipsis;

超出范围隐藏：overflow: hidden;

11、经常用的命名规则
        头：header
        内容：content/container
        尾：footer
        导航：nav
        侧栏：sidebar
       栏目：column
        页面外围控制整体布局宽度：wrapper
       左右中：left right center

12、为了兼容各浏览器需还原标签样式

页面声明统一采用XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

全局标签清除

body,div,label,span,ul,li{border:none;padding:0;margin:0;}

body,button, input, select, textarea {font: 12px/1.5 '宋体', Arial, sans-serif; }

a:focus{outline: none;-moz-outline-style: none; }

ul, ol, li {list-style: none; }

img{ border:0px;}

</style>