Home Web Front-end HTML Tutorial css Reset文件

css Reset文件

Jun 01, 2016 pm 02:32 PM

<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>; }
Copy after login

转载来源

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/

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

What are the best practices for cross-browser compatibility in HTML5? What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

What are the best practices for cross-browser compatibility in HTML5?

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

What is the purpose of the <progress> element?

See all articles