重置样式 - Eric Meyer的原版
重置样式就是一组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的原版的更多相关文章
- css网页重置样式表(多版本)
Eric reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ...
- css reset重置样式有那么重要吗?
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...
- 两种不同的重置样式方法(normalize.css)
重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们.他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器 ...
- Normalize.css – HTML5-ready 的css重置样式集
Normalize.css 是一个可定制的 css文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样 ...
- 页面重置样式reset.css
我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...
- CSS重置样式表
网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...
- css重置样式表reset.css
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 结构元素 */ dl, dt, dd, ul, ol, l ...
- pc端,移动端css重置样式
pc: html{font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif;-ms-text- ...
- css样式重置样式
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, ci ...
随机推荐
- 学习使用vim,熟悉Linux
随着对vim一步一步的熟悉,对Linux的资料查阅,在加上今天阅读了王垠的文章,更加的觉得学习vim是正确的选择.抛弃Windows思维,进入Linux的世界,才发现是思维上的转变,如学习英语一样,是 ...
- Spark cache 和 persist
1)RDD的cache()方法其实调用的就是persist方法,缓存策略均为MEMORY_ONLY:2)可以通过persist方法手工设定StorageLevel来满足工程需要的存储级别:3)cach ...
- 繁简体 互转 js
html: <script type="text/javascript" src="/js/s2t.js"></script><s ...
- 定位position
position : absolute | relative | fixed | static 定位:子集可以超出父级的范围,如父级蛇overflow:hidden则看不到. absolute : 绝 ...
- C# 文件和文件夹操作
一.文件操作 1.File类的常用静态方法: void AppendAllText(string path, string contents),将文本contents附加到文件path中 bool E ...
- ES6 有什么新东西
ES6 有什么新东西? 你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本 ...
- BigInteger在Java8中的改进
BigInteger在Java8里增加了一组方法: 123 public byte byteValueExact()public int intValueExact()public long long ...
- java数据结构
1.计算机科技的两大支柱 1.数据结构 2.算法 程序=数据结构+算法 2.定义:是一门研究非数值计算的程序设计问题中计算机的操作对象以及它们之间的关系和操作等等的学科 3.数据(Data):是对信息 ...
- mysql5.5手册读书日记(4)
<?php /* InnoDB事务模型和锁定 15.2.10.1. InnoDB锁定模式 15.2.10.2. InnoDB和AUTOCOMMIT 15.2.10.3. InnoDB和TRANS ...
- 算法与数据结构题目的 PHP 实现:栈和队列 由两个栈组成的队列
思路:同样使用 PHP 的数组模拟栈.栈的特点是先进后出,队列的特点是先进先出,可以用第一个栈(StackPush)作为压入栈,压入数据的时候只往这个栈中压入数据,第二个栈作(StackPop)为弹出 ...