推荐几款主流的 CSS Reset
摘要：包含目前几种主流的CSS Reset：1、Eric Meyer's “Reset CSS”；2、HTML5 Doctor CSS Reset ；3、Yahoo! (YUI 3) Reset CSS ； 4、Universal Selector ‘*’ Reset ；5、Normalize.css。
参照CSS Reset按流行度排列如下：
1、Eric Meyer’s “Reset CSS”
官方网址：CSS Tools: Reset CSS
01./* http://meyerweb.com/eric/tools/css/reset/
02.v2.0 | 20110126
03.License: none (public domain)
04.*/
05.
06.html, body, div, span, applet, object, iframe,
07.h1, h2, h3, h4, h5, h6, p, blockquote, pre,
08.a, abbr, acronym, address, big, cite, code,
09.del, dfn, em, img, ins, kbd, q, s, samp,
10.small, strike, strong, sub, sup, tt, var,
11.b, u, i, center,
12.dl, dt, dd, ol, ul, li,
13.fieldset, form, label, legend,
14.table, caption, tbody, tfoot, thead, tr, th, td,
15.article, aside, canvas, details, embed,
16.figure, figcaption, footer, header, hgroup,
17.menu, nav, output, ruby, section, summary,
18.time, mark, audio, video {
19.margin: 0;
20.padding: 0;
21.border: 0;
22.font-size: 100%;
23.font: inherit;
24.vertical-align: baseline;
25.}
26./* HTML5 display-role reset for older browsers */
27.article, aside, details, figcaption, figure,
28.footer, header, hgroup, menu, nav, section {
29.display: block;
30.}
31.body {
32.line-height: 1;
33.}
34.ol, ul {
35.list-style: none;
36.}
37.blockquote, q {
38.quotes: none;
39.}
40.blockquote:before, blockquote:after,
41.q:before, q:after {
42.content: '';
43.content: none;
44.}
45.table {
46.border-collapse: collapse;
47.border-spacing: 0;
48.}
2、HTML5 Doctor CSS Reset
官方网址：HTML5 Reset Stylesheet
view sourceprint
001./*
002.html5doctor.com Reset Stylesheet
003.v1.6.1
004.Last Updated: 2010-09-17
005.Author: Richard Clark - http://richclarkdesign.com
006.Twitter: @rich_clark
007.*/
008.
009.html, body, div, span, object, iframe,
010.h1, h2, h3, h4, h5, h6, p, blockquote, pre,
011.abbr, address, cite, code,
012.del, dfn, em, img, ins, kbd, q, samp,
013.small, strong, sub, sup, var,
014.b, i,
015.dl, dt, dd, ol, ul, li,
016.fieldset, form, label, legend,
017.table, caption, tbody, tfoot, thead, tr, th, td,
018.article, aside, canvas, details, figcaption, figure,
019.footer, header, hgroup, menu, nav, section, summary,
020.time, mark, audio, video {
021.margin:0;
022.padding:0;
023.border:0;
024.outline:0;
025.font-size:100%;
026.vertical-align:baseline;
027.background:transparent;
028.}
029.
030.body {
031.line-height:1;
032.}
033.
034.article,aside,details,figcaption,figure,
035.footer,header,hgroup,menu,nav,section {
036.display:block;
037.}
038.
039.nav ul {
040.list-style:none;
041.}
042.
043.blockquote, q {
044.quotes:none;
045.}
046.
047.blockquote:before, blockquote:after,
048.q:before, q:after {
049.content:'';
050.content:none;
051.}
052.
053.a {
054.margin:0;
055.padding:0;
056.font-size:100%;
057.vertical-align:baseline;
058.background:transparent;
059.}
060.
061./* change colours to suit your needs */
062.ins {
063.
064.color:#000;
065.text-decoration:none;
066.}
067.
068./* change colours to suit your needs */
069.mark {
070.
071.color:#000;
072.font-style:italic;
073.font-weight:bold;
074.}
075.
076.del {
077.text-decoration: line-through;
078.}
079.
080.abbr[title], dfn[title] {
081.border-bottom:1px dotted;
082.cursor:help;
083.}
084.
085.table {
086.border-collapse:collapse;
087.border-spacing:0;
088.}
089.
090./* change border colour to suit your needs */
091.hr {
092.display:block;
093.height:1px;
094.border:0;
095.border-top:1px solid #cccccc;
096.margin:1em 0;
097.padding:0;
098.}
099.
100.input, select {
101.vertical-align:middle;
102.}
2、HTML5 Doctor CSS Reset
001./*
002.html5doctor.com Reset Stylesheet
003.v1.6.1
004.Last Updated: 2010-09-17
005.Author: Richard Clark - http://richclarkdesign.com
006.Twitter: @rich_clark
007.*/
008.
009.html, body, div, span, object, iframe,
010.h1, h2, h3, h4, h5, h6, p, blockquote, pre,
011.abbr, address, cite, code,
012.del, dfn, em, img, ins, kbd, q, samp,
013.small, strong, sub, sup, var,
014.b, i,
015.dl, dt, dd, ol, ul, li,
016.fieldset, form, label, legend,
017.table, caption, tbody, tfoot, thead, tr, th, td,
018.article, aside, canvas, details, figcaption, figure,
019.footer, header, hgroup, menu, nav, section, summary,
020.time, mark, audio, video {
021.margin:0;
022.padding:0;
023.border:0;
024.outline:0;
025.font-size:100%;
026.vertical-align:baseline;
027.background:transparent;
028.}
029.
030.body {
031.line-height:1;
032.}
033.
034.article,aside,details,figcaption,figure,
035.footer,header,hgroup,menu,nav,section {
036.display:block;
037.}
038.
039.nav ul {
040.list-style:none;
041.}
042.
043.blockquote, q {
044.quotes:none;
045.}
046.
047.blockquote:before, blockquote:after,
048.q:before, q:after {
049.content:'';
050.content:none;
051.}
052.
053.a {
054.margin:0;
055.padding:0;
056.font-size:100%;
057.vertical-align:baseline;
058.background:transparent;
059.}
060.
061./* change colours to suit your needs */
062.ins {
063.
064.color:#000;
065.text-decoration:none;
066.}
067.
068./* change colours to suit your needs */
069.mark {
070.
071.color:#000;
072.font-style:italic;
073.font-weight:bold;
074.}
075.
076.del {
077.text-decoration: line-through;
078.}
079.
080.abbr[title], dfn[title] {
081.border-bottom:1px dotted;
082.cursor:help;
083.}
084.
085.table {
086.border-collapse:collapse;
087.border-spacing:0;
088.}
089.
090./* change border colour to suit your needs */
091.hr {
092.display:block;
093.height:1px;
094.border:0;
095.border-top:1px solid #cccccc;
096.margin:1em 0;
097.padding:0;
098.}
099.
100.input, select {
101.vertical-align:middle;
102.}
3、Yahoo! (YUI 3) Reset CSS
官方网址：CSS Reset
01./*
02.YUI 3.8.0 (build 5744)
03.Copyright 2012 Yahoo! Inc. All rights reserved.
04.Licensed under the BSD License.
05.http://yuilibrary.com/license/
06.*/
07.html {
08.color: #000;
09.background: #FFF
10.}
11.body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
12.margin: 0;
13.padding: 0
14.}
15.table {
16.border-collapse: collapse;
17.border-spacing: 0
18.}
19.fieldset, img {
20.border: 0
21.}
22.address, caption, cite, code, dfn, em, strong, th, var {
23.font-style: normal;
24.font-weight: normal
25.}
26.ol, ul {
27.list-style: none
28.}
29.caption, th {
30.text-align: left
31.}
32.h1, h2, h3, h4, h5, h6 {
33.font-size: 100%;
34.font-weight: normal
35.}
36.q:before, q:after {
37.content: ''
38.}
39.abbr, acronym {
40.border: 0;
41.font-variant: normal
42.}
43.sup {
44.vertical-align: text-top
45.}
46.sub {
47.vertical-align: text-bottom
48.}
49.input, textarea, select {
50.font-family: inherit;
51.font-size: inherit;
52.font-weight: inherit
53.}
54.input, textarea, select {
55.*font-size:100%
56.}
57.legend {
58.color: #000
59.}
60.#yui3-css-stamp.cssreset {
61.display: none
62.}
或者直接导入:
1.<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css">4、Universal Selector ‘*’ Reset
1.* {
2.margin: 0;
3.padding: 0;
4.}
5、Normalize.css。
官方网址：Normalize.css
001./*! normalize.css v2.0.1 | MIT License | git.io/normalize */
002.
003./* ==========================================================================
004.HTML5 display definitions
005.========================================================================== */
006.
007./*
008.* Corrects `block` display not defined in IE 8/9.
009.*/
010.
011.article,
012.aside,
013.details,
014.figcaption,
015.figure,
016.footer,
017.header,
018.hgroup,
019.nav,
020.section,
021.summary {
022.display: block;
023.}
024.
025./*
026.* Corrects `inline-block` display not defined in IE 8/9.
027.*/
028.
029.audio,
030.canvas,
031.video {
032.display: inline-block;
033.}
034.
035./*
036.* Prevents modern browsers from displaying `audio` without controls.
037.* Remove excess height in iOS 5 devices.
038.*/
039.
040.audio:not([controls]) {
041.display: none;
042.height: 0;
043.}
044.
045./*
046.* Addresses styling for `hidden` attribute not present in IE 8/9.
047.*/
048.
049.[hidden] {
050.display: none;
051.}
052.
053./* ==========================================================================
054.Base
055.========================================================================== */
056.
057./*
058.* 1. Sets default font family to sans-serif.
059.* 2. Prevents iOS text size adjust after orientation change, without disabling
060.* user zoom.
061.*/
062.
063.html {
064.font-family: sans-serif; /* 1 */
065.-webkit-text-size-adjust: 100%; /* 2 */
066.-ms-text-size-adjust: 100%; /* 2 */
067.}
068.
069./*
070.* Removes default margin.
071.*/
072.
073.body {
074.margin: 0;
075.}
076.
077./* ==========================================================================
078.Links
079.========================================================================== */
080.
081./*
082.* Addresses `outline` inconsistency between Chrome and other browsers.
083.*/
084.
085.a:focus {
086.outline: thin dotted;
087.}
088.
089./*
090.* Improves readability when focused and also mouse hovered in all browsers.
091.*/
092.
093.a:active,
094.a:hover {
095.outline: 0;
096.}
097.
098./* ==========================================================================
099.Typography
100.========================================================================== */
101.
102./*
103.* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
104.* Safari 5, and Chrome.
105.*/
106.
107.h1 {
108.font-size: 2em;
109.}
110.
111./*
112.* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
113.*/
114.
115.abbr[title] {
116.border-bottom: 1px dotted;
117.}
118.
119./*
120.* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
121.*/
122.
123.b,
124.strong {
125.font-weight: bold;
126.}
127.
128./*
129.* Addresses styling not present in Safari 5 and Chrome.
130.*/
131.
132.dfn {
133.font-style: italic;
134.}
135.
136./*
137.* Addresses styling not present in IE 8/9.
138.*/
139.
140.mark {
141.background: #ff0;
142.color: #000;
143.}
144.
145.
146./*
147.* Corrects font family set oddly in Safari 5 and Chrome.
148.*/
149.
150.code,
151.kbd,
152.pre,
153.samp {
154.font-family: monospace, serif;
155.font-size: 1em;
156.}
157.
158./*
159.* Improves readability of pre-formatted text in all browsers.
160.*/
161.
162.pre {
163.white-space: pre;
164.white-space: pre-wrap;
165.word-wrap: break-word;
166.}
167.
168./*
169.* Sets consistent quote types.
170.*/
171.
172.q {
173.quotes: "\201C" "\201D" "\2018" "\2019";
174.}
175.
176./*
177.* Addresses inconsistent and variable font size in all browsers.
178.*/
179.
180.small {
181.font-size: 80%;
182.}
183.
184./*
185.* Prevents `sub` and `sup` affecting `line-height` in all browsers.
186.*/
187.
188.sub,
189.sup {
190.font-size: 75%;
191.line-height: 0;
192.position: relative;
193.vertical-align: baseline;
194.}
195.
196.sup {
197.top: -0.5em;
198.}
199.
200.sub {
201.bottom: -0.25em;
202.}
203.
204./* ==========================================================================
205.Embedded content
206.========================================================================== */
207.
208./*
209.* Removes border when inside `a` element in IE 8/9.
210.*/
211.
212.img {
213.border: 0;
214.}
215.
216./*
217.* Corrects overflow displayed oddly in IE 9.
218.*/
219.
220.svg:not(:root) {
221.overflow: hidden;
222.}
223.
224./* ==========================================================================
225.Figures
226.========================================================================== */
227.
228./*
229.* Addresses margin not present in IE 8/9 and Safari 5.
230.*/
231.
232.figure {
233.margin: 0;
234.}
235.
236./* ==========================================================================
237.Forms
238.========================================================================== */
239.
240./*
241.* Define consistent border, margin, and padding.
242.*/
243.
244.fieldset {
245.border: 1px solid #c0c0c0;
246.margin: 0 2px;
247.padding: 0.35em 0.625em 0.75em;
248.}
249.
250./*
251.* 1. Corrects color not being inherited in IE 8/9.
252.* 2. Remove padding so people aren't caught out if they zero out fieldsets.
253.*/
254.
255.legend {
256.border: 0; /* 1 */
257.padding: 0; /* 2 */
258.}
259.
260./*
261.* 1. Corrects font family not being inherited in all browsers.
262.* 2. Corrects font size not being inherited in all browsers.
263.* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
264.*/
265.
266.button,
267.input,
268.select,
269.textarea {
270.font-family: inherit; /* 1 */
271.font-size: 100%; /* 2 */
272.margin: 0; /* 3 */
273.}
274.
275./*
276.* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
277.* the UA stylesheet.
278.*/
279.
280.button,
281.input {
282.line-height: normal;
283.}
284.
285./*
286.* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
287.* and `video` controls.
288.* 2. Corrects inability to style clickable `input` types in iOS.
289.* 3. Improves usability and consistency of cursor style between image-type
290.* `input` and others.
291.*/
292.
293.button,
294.html input[type="button"], /* 1 */
295.input[type="reset"],
296.input[type="submit"] {
297.-webkit-appearance: button; /* 2 */
298.cursor: pointer; /* 3 */
299.}
300.
301./*
302.* Re-set default cursor for disabled elements.
303.*/
304.
305.button[disabled],
306.input[disabled] {
307.cursor: default;
308.}
309.
310./*
311.* 1. Addresses box sizing set to `content-box` in IE 8/9.
312.* 2. Removes excess padding in IE 8/9.
313.*/
314.
315.input[type="checkbox"],
316.input[type="radio"] {
317.box-sizing: border-box; /* 1 */
318.padding: 0; /* 2 */
319.}
320.
321./*
322.* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
323.* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
324.* (include `-moz` to future-proof).
325.*/
326.
327.input[type="search"] {
328.-webkit-appearance: textfield; /* 1 */
329.-moz-box-sizing: content-box;
330.-webkit-box-sizing: content-box; /* 2 */
331.box-sizing: content-box;
332.}
333.
334./*
335.* Removes inner padding and search cancel button in Safari 5 and Chrome
336.* on OS X.
337.*/
338.
339.input[type="search"]::-webkit-search-cancel-button,
340.input[type="search"]::-webkit-search-decoration {
341.-webkit-appearance: none;
342.}
343.
344./*
345.* Removes inner padding and border in Firefox 4+.
346.*/
347.
348.button::-moz-focus-inner,
349.input::-moz-focus-inner {
350.border: 0;
351.padding: 0;
352.}
353.
354./*
355.* 1. Removes default vertical scrollbar in IE 8/9.
356.* 2. Improves readability and alignment in all browsers.
357.*/
358.
359.textarea {
360.overflow: auto; /* 1 */
361.vertical-align: top; /* 2 */
362.}
363.
364./* ==========================================================================
365.Tables
366.========================================================================== */
367.
368./*
369.* Remove most spacing between table cells.
370.*/
371.
372.table {
373.border-collapse: collapse;
374.border-spacing: 0;
375.}
你可以继续阅读相关【CSS Reset】的文章。
原文地址：http://ziren.org/html-css/most-popular-css-reset-scripts.html
浙公网安备 33010602011771号