重置样式就是一组CSS声明,用来覆盖不同浏览器渲染HTML元素时的各种默认样式。重置样式一般会被加入到主样式文件的开头,用来将各个浏览器的自有默认样式重置成统一表现,确保样式表中后续追加的样式在不同浏览器中有相同的显示效果。世界上没有完美的重置样式,许多开发者都有自己的一套。以下是Eric Merer的原版(http://meyerweb.com/eric/tools/css/reset/):

CSS Tools: Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.  The general reasoning behind this was discussed in a May 2007 post, if you're interested.  Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.

The reset styles given here are intentionally very generic.  There isn't any default color or background set for the body element, for example.  I don't particularly recommend that you just use this in its unaltered state in your own projects.  It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline.  Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

If you want to use my reset styles, then feel free!  It's all explicitly in the public domain (I have to formally say that or else people ask me about licensing).  You can grab a copy of the file to use and tweak as fits you best.  If you're more of the copy-and-paste type, or just want an in-page preview of what you'll be getting, here it is.

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/ html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

=====================================================================

针对HTML5文档有更好的重置样式选择:如normalize.css (http://necolas.github.com/normalize.css/)

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/ html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
} /**
* Remove default margin.
*/ body {
margin: 0;
} /* HTML5 display definitions
========================================================================== */ /**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/ article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
} /**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/ audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
} /**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/ audio:not([controls]) {
display: none;
height: 0;
} /**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox <.
*/ [hidden],
template {
display: none;
} /* Links
========================================================================== */ /**
* Remove the gray background color from active links in IE 10.
*/ a {
background-color: transparent;
} /**
* Improve readability when focused and also mouse hovered in all browsers.
*/ a:active,
a:hover {
outline: 0;
} /* Text-level semantics
========================================================================== */ /**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/ abbr[title] {
border-bottom: 1px dotted;
} /**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/ b,
strong {
font-weight: bold;
} /**
* Address styling not present in Safari and Chrome.
*/ dfn {
font-style: italic;
} /**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/ h1 {
font-size: 2em;
margin: 0.67em 0;
} /**
* Address styling not present in IE 8/9.
*/ mark {
background: #ff0;
color: #000;
} /**
* Address inconsistent and variable font size in all browsers.
*/ small {
font-size: 80%;
} /**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/ sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
} sup {
top: -0.5em;
} sub {
bottom: -0.25em;
} /* Embedded content
========================================================================== */ /**
* Remove border when inside `a` element in IE 8/9/10.
*/ img {
border: 0;
} /**
* Correct overflow not hidden in IE 9/10/11.
*/ svg:not(:root) {
overflow: hidden;
} /* Grouping content
========================================================================== */ /**
* Address margin not present in IE 8/9 and Safari.
*/ figure {
margin: 1em 40px;
} /**
* Address differences between Firefox and other browsers.
*/ hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
} /**
* Contain overflow in all browsers.
*/ pre {
overflow: auto;
} /**
* Address odd `em`-unit font size rendering in all browsers.
*/ code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
} /* Forms
========================================================================== */ /**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/ /**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/ button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
} /**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/ button {
overflow: visible;
} /**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/ button,
select {
text-transform: none;
} /**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/ button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
} /**
* Re-set default cursor for disabled elements.
*/ button[disabled],
html input[disabled] {
cursor: default;
} /**
* Remove inner padding and border in Firefox 4+.
*/ button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
} /**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/ input {
line-height: normal;
} /**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/ input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
} /**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
} /**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/ input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
} /**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/ input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} /**
* Define consistent border, margin, and padding.
*/ fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
} /**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/ legend {
border: 0; /* 1 */
padding: 0; /* 2 */
} /**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/ textarea {
overflow: auto;
} /**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/ optgroup {
font-weight: bold;
} /* Tables
========================================================================== */ /**
* Remove most spacing between table cells.
*/ table {
border-collapse: collapse;
border-spacing: 0;
} td,
th {
padding: 0;
}

重置样式 - Eric Meyer的原版的更多相关文章

  1. css网页重置样式表(多版本)

    Eric reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ...

  2. css reset重置样式有那么重要吗?

    在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...

  3. 两种不同的重置样式方法(normalize.css)

    重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器 ...

  4. Normalize.css – HTML5-ready 的css重置样式集

    Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样 ...

  5. 页面重置样式reset.css

    我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...

  6. CSS重置样式表

    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...

  7. css重置样式表reset.css

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 结构元素 */ dl, dt, dd, ul, ol, l ...

  8. pc端,移动端css重置样式

    pc: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text- ...

  9. css样式重置样式

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, ci ...

随机推荐

  1. Hadoop.2.x_HA部署

    一.概念与HA思路 1. 首先Hadoop架构为主从架构(NameNode/DataNode) 2. NameNode管理着文件系统和与维护客户端访问DataNode 3. Hadoop 2.0 之前 ...

  2. [转载]触发ASSERT(afxCurrentResourceHandle != NULL)错误的原因

    触发ASSERT(afxCurrentResourceHandle != NULL)错误的原因 Debug Assert error afxwin1.inl line:22 翻译参考 http://w ...

  3. HDU2955 背包DP

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. JSP中乱码问题

    一.JSP页面显示乱码 二.表单提交中文时出现乱码 三.数据库连接 大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着您,我现在把我在JSP开发中遇到的中文乱码的问题及解决办法写出来供大 ...

  5. CSS3部分新特性

    1.旋转transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-moz-transform:rotate(30deg); /* ...

  6. Mac 系统下cocos2dx 环境变量设置

    Mac 系统环境变量设置   vim ~/.bash_profile    export PATH=$PATH:/Users/wangchengcheng/Downloads/LearningSoft ...

  7. Win8.1屏幕亮度自动调节关闭方法

    细心的朋友会发现,Win8.1系统的笔记本屏幕亮度有时候,会根据外界光线亮度以及温度自动调节屏幕亮度,尽管看似比较智能,但有时候我们并不希望笔记本屏幕亮度受光线影响,忽暗忽亮.如果我们希望Win8笔记 ...

  8. 精通JavaScript的this关键字

    小提示 阅读本文,您需要了解JS的基本常识.您将花费40分钟完成本文的阅读. JS中的this关键字让很多新老JS开发人员都感到困惑.这篇文章将对this关键字进行完整地阐述.读完本文以后,您的困惑将 ...

  9. 有return语句情况下,try-catch-finally的执行顺序

    重要结论: 1.不管有没有出现异常,finally块中代码都会执行 2.当try和catch中有return时,finally仍然会执行 3.finally是在return后面的表达式运算后执行的(此 ...

  10. CentOS7安装配置redis-3.0.0

    一.安装必要包 yum install gcc 二.linux下安装 #下载 wget http://download.redis.io/releases/redis-3.0.0.tar.gz tar ...