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、语义化标签

 

 

参考

http://ued.alimama.com/lib

http://docs.kissyui.com

http://www.360doc.com/content/11/0328/21/5325619_105432526.shtml 命名表

http://lifesinger.org/lab/2008/grids_test1.html 玉伯的页面布局

http://www.cnblogs.com/wangzhichao/archive/2011/05/23/2054488.html

通过 Wiz 发布

转载于:https://www.cnblogs.com/sidmeng/archive/2011/10/09/2203704.html