css规范总结

1、通用规则
  • 采用utf-8作为编码
  • 连接线“-”作为连接符号,同JS挂钩的采用J_HeadHd命名方式
  • 选择器采用:大模块id 小模块class 起名字: 内容优先,表现为辅,例如side比left好
  • 标签中属性双引号、属性名小写(JS中单引号)
  • 每个栏目之间<!--栏目名 #START--><!--栏目名 #END-->空一行
  • css书写规范
  • 多行时分行定义
  • z-index约定:普通1-99;悬浮菜单:1000 - 4999 模态窗口:5000 - 9999
  • IE中采用“-”连接线做hack
2、css布局(参考KISSY)
reset.css
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */
sub { vertical-align: text-bottom; }

/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注:optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
 
双飞翼布局
layout.css
  • 利用负外边距
  • 浮动
  • 相对定位
常用布局
两栏:
 
3、模块化
 
4、语义化标签
 
 
参考





posted on 2011-10-09 14:58  萌@宇  阅读(158)  评论(0编辑  收藏  举报

导航