css Reset文件-html教學-PHP中文網

<span style="color: #008000;">/*</span><span style="color: #008000;">
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 清除内外边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, </span><span style="color: #008000;">/*</span><span style="color: #008000;"> structural elements 结构元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
dl, dt, dd, ul, ol, li, </span><span style="color: #008000;">/*</span><span style="color: #008000;"> list elements 列表元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
pre, </span><span style="color: #008000;">/*</span><span style="color: #008000;"> text formatting elements 文本格式元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
fieldset, lengend, button, input, textarea, </span><span style="color: #008000;">/*</span><span style="color: #008000;"> form elements 表单元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
th, td </span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> table elements 表格元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置默认字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body,
button, input, select, textarea </span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> for ie </span><span style="color: #008000;">*/</span>
    <span style="color: #008000;">/*</span><span style="color: #008000;">font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 用 ascii 字符表示，使得在任何编码下都无问题 </span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">

h1 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 18px</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 18px / 12px = 1.5 </span><span style="color: #008000;">*/</span> }<span style="color: #800000;">
h2 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 16px</span>; }<span style="color: #800000;">
h3 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 14px</span>; }<span style="color: #800000;">
h4, h5, h6 </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 100%</span>; }<span style="color: #800000;">

address, cite, dfn, em, var </span>{<span style="color: #ff0000;"> font-style</span>:<span style="color: #0000ff;"> normal</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 将斜体扶正 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
code, kbd, pre, samp, tt </span>{<span style="color: #ff0000;"> font-family</span>:<span style="color: #0000ff;"> "Courier New", Courier, monospace</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 统一等宽字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
small </span>{<span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 12px</span>; } <span style="color: #008000;">/*</span><span style="color: #008000;"> 小于 12px 的中文很难阅读，让 small 正常化 </span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 重置列表元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
ul, ol </span>{<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>; }

<span style="color: #008000;">/*</span><span style="color: #008000;"> 重置文本格式元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> none</span>; }<span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;"> underline</span>; }<span style="color: #800000;">

abbr[title], acronym[title] </span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    border-bottom</span>:<span style="color: #0000ff;"> 1px dotted</span>;<span style="color: #ff0000;">
    cursor</span>:<span style="color: #0000ff;"> help</span>;
}<span style="color: #800000;">

q:before, q:after </span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;"> ''</span>; }

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

<span style="color: #008000;">/*</span><span style="color: #008000;"> 重置表格元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
table </span>{<span style="color: #ff0000;">
    border-collapse</span>:<span style="color: #0000ff;"> collapse</span>;<span style="color: #ff0000;">
    border-spacing</span>:<span style="color: #0000ff;"> 0</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 重置 hr </span><span style="color: #008000;">*/</span><span style="color: #800000;">
hr </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 1px</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;"> 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
html </span>{<span style="color: #ff0000;"> overflow-y</span>:<span style="color: #0000ff;"> scroll</span>; }
登入後複製
转载来源
http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html#3438322
使用建议：
1.实际项目中可以这样：Reset css +fonts.css /base.css/layout.css.......相结合的方式
2.在reset css中没用到的元素可以直接拿掉，减少代码量
3.在reset css中做好版本维护信息，方便扩展
国外reset css文件参考网址
http://cssreset.com/