玉伯和正淳一起整理的一份 reset.css:
/*
KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin : 0 ;
padding : 0 ;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/* font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif; */
font : 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif ; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
h1 { font-size : 18px ; /* 18px / 12px = 1.5 */ }
h2 { font-size : 16px ; }
h3 { font-size : 14px ; }
h4, h5, h6 { font-size : 100% ; }
address, cite, dfn, em, var { font-style : normal ; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { 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 ; }
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom : 1px dotted ;
cursor : help ;
}
q:before, q:after { content : '' ; }
/* 重置表单元素 */
legend { color : #000 ; } /* for ie6 */
fieldset, img { border : none ; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
font-size : 100% ; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
/* 重置 hr */
hr {
border : none ;
height : 1px ;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y : scroll ; }
KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin : 0 ;
padding : 0 ;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/* font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif; */
font : 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif ; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
h1 { font-size : 18px ; /* 18px / 12px = 1.5 */ }
h2 { font-size : 16px ; }
h3 { font-size : 14px ; }
h4, h5, h6 { font-size : 100% ; }
address, cite, dfn, em, var { font-style : normal ; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { 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 ; }
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom : 1px dotted ;
cursor : help ;
}
q:before, q:after { content : '' ; }
/* 重置表单元素 */
legend { color : #000 ; } /* for ie6 */
fieldset, img { border : none ; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
font-size : 100% ; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
/* 重置 hr */
hr {
border : none ;
height : 1px ;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y : scroll ; }
测试过的浏览器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+
解释一些和 YUI cssreset 的差异点:
1
清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增加了 button(感觉是 YUI 遗漏了).
2 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差异。(要设的话,推荐background: transparent)
3 对于 address, caption, …, em, strong 等文本格式元素,做了调整。保留了 strong 和 th 的粗体。
4 对 abbr 和 acronym 做了调整,使得在非 ie6 下可视性更好。
5 去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。
6 对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font - size 的 inherit hack. 因为其它 hack 经测试已失效。
7 增加了一些元素的默认样式。
2 去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差异。(要设的话,推荐background: transparent)
3 对于 address, caption, …, em, strong 等文本格式元素,做了调整。保留了 strong 和 th 的粗体。
4 对 abbr 和 acronym 做了调整,使得在非 ie6 下可视性更好。
5 去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。
6 对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font - size 的 inherit hack. 因为其它 hack 经测试已失效。
7 增加了一些元素的默认样式。
此外,对整体代码的组织形式做了调整,按照元素的类别将代码进行了分组
最后,期待你的参与和建议。如果这份 reset.css 能有幸在你的项目中得到使用,则非常期待你的反馈。
作者建议:
1.真是项目中可以这样:Reset css +fonts.css /base.css/layout.css.......相结合的方式
2.在reset css中 没用到的元素可以直接拿掉,减少代码量
3.在reset css中做好版本维护信息,方便扩展
转载自http://www.cnblogs.com/yizuierguo/,一醉而过