CSS使用须知

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.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

全局标签清除

<style type="text/css">

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值