重置样式 - 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 ...
随机推荐
- 模拟淘宝使用cookie记录登录名,
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- CentOS默认开放的本地端口范围
系统本地开放端口的范围:(默认30000多到60000多) [root@linux2 ~]# vim /etc/sysctl.conf net.ipv4.ip_local_port_range = 1 ...
- 行业集中度(Concentration Ratio)
行业集中度是决定市场结构最基本.最重要的因素,集中体现了市场的竞争和垄断程度,经常使用的集中度计量指标有:行业集中率(CRn指数).赫尔芬达尔—赫希曼指数(Herfindahl-HirschmanIn ...
- CSS重新认识(一)
1. 所有的元素都遵循盒子模型,即内容部分+padding(填充部分)+border+margin(外边距部分); 2.我们平常定义的width与height指的内容部分的长宽; 3. 行内元素在不改 ...
- NBUT比赛 方格规律递推题
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26901#problem/A 题意:有一个 2*n的格子里,你可以选择任意一个格 ...
- WordPress插件开发实例教程 - 版权插件
说明:本教程仅限学习,高手请绕道 开发程序:WordPress 3.9-RC1 使用主题:Twenty Fourteen 在开始之前,需要注意三件事情 I.给插件取一个个性化的名字,越个性化越好,以防 ...
- GROUP BY 與 Null 值
若群組資料行包含了 Null 值,該資料列將變成結果中的一個群組.若群組資料行內包含了多個 Null 值,Null 值將放入單一群組內.此行為定義於 SQL-2003 標準之中. Product 資料 ...
- A trip through the Graphics Pipeline 2011_11 Stream Out
Welcome back! This time, the focus is going to be on Stream-Out (SO). This is a facility for storing ...
- ios-获取商店已上线app信息
NSString *url = [[NSString alloc] initWithFormat:@"http://itunes.apple.com/lookup?id=%@",@ ...