CSS使用须知
2012-11-08 23:25
218 查看
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> |
相关文章推荐
- struts2 datetimepicker标签使用须知
- 解决图片太大溢出问题、使用CSS限制图片最大宽度或使图片按比例自动缩放
- 使用JavaScript和CSS实现异步移动侧边栏
- 关于css中如何使用#和.的总结
- 博客园 cnblogs博客 图片显示美化 使用CSS给图片添加圆角阴影
- 使用css实现全兼容tooltip提示框
- 前端开发css实战:使用css制作网页中的多级菜单
- 使用母版页时内容页如何使用css和javascript
- 经验分享:使用 Restyle.js 简化 CSS 预处理
- CSS使用示例
- 使用 CSS 伪元素需要注意的
- 推荐大家使用的CSS书写规范、顺序
- jQuery使用手册之CSS操作
- 使用css实现字匾边框的效果
- 不同版本IE使用不同css(css条件注释语句用法)
- Orchard模块中使用css和js
- css伪类 :before和:after的使用
- 使用html5+css3来实现slider切换效果告别javascript+css
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
- 使用CSS float元素时应注意的三个方面