常用CSS Reset汇总

什么是Css Reset呢?

在 HTML标签在浏览器里有默认的样式，不同浏览器的默认样式之间也会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。（参考百度百科：Css Reset）

常用Css Reset(一)：Eric Meyer’s “Reset CSS” 2.0

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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;}

常用Css Reset(二)：HTML5 Doctor CSS ResetGet

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:0;    padding:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}/* change colours to suit your needs */ins {    background-color:#ff9;    color:#000;    text-decoration:none;}/* change colours to suit your needs */mark {    background-color:#ff9;    color:#000;    font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted;    cursor:help;}table {    border-collapse:collapse;    border-spacing:0;}/* change border colour to suit your needs */hr {    display:block;    height:1px;    border:0;    border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}input, select {    vertical-align:middle;}

常用Css Reset(三)：Yahoo! (YUI 3) Reset CSS

/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * http://cssreset.com * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ *//*    TODO will need to remove settings on HTML since we can't namespace it.    TODO with the prefix, should I group by selector or property for weight savings?*/html{    color:#000;    background:#FFF;}/*    TODO remove settings on BODY since we can't namespace it.*//*    TODO test putting a class on HEAD.        - Fails on FF. */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 {    margin:0;    padding:0;}table {    border-collapse:collapse;    border-spacing:0;}fieldset,img {    border:0;}/*    TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...*/address,caption,cite,code,dfn,em,strong,th,var {    font-style:normal;    font-weight:normal;} ol,ul {    list-style:none;} caption,th {    text-align:left;}h1,h2,h3,h4,h5,h6 {    font-size:100%;    font-weight:normal;}q:before,q:after {    content:'';}abbr,acronym {    border:0;    font-variant:normal;}/* to preserve line-height and selector appearance */sup {    vertical-align:text-top;}sub {    vertical-align:text-bottom;}input,textarea,select {    font-family:inherit;    font-size:inherit;    font-weight:inherit;}/*to enable resizing for IE*/input,textarea,select {    *font-size:100%;}/*because legend doesn't inherit in IE */legend {    color:#000;}/* YUI CSS Detection Stamp */#yui3-css-stamp.cssreset { display: none; }

常用Css Reset(四)：Universal Selector ‘*’ Reset

/* cssreset.com */* {    margin: 0;    padding: 0;}

常用Css Reset(五)：Normalize.css 1.0

/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ==========================================================================   HTML5 display definitions   ========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {    display: block;} /* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio,canvas,video {    display: inline-block;    *display: inline;    *zoom: 1;} /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) {    display: none;    height: 0;} /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. * Known issue: no IE 6 support. */ [hidden] {    display: none;} /* ==========================================================================   Base   ========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using *    `em` units. * 2. Prevents iOS text size adjust after orientation change, without disabling *    user zoom. */ html {    font-size: 100%; /* 1 */    -webkit-text-size-adjust: 100%; /* 2 */    -ms-text-size-adjust: 100%; /* 2 */} /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ html,button,input,select,textarea {    font-family: sans-serif;} /* * Addresses margins handled incorrectly in IE 6/7. */ body {    margin: 0;} /* ==========================================================================   Links   ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus {    outline: thin dotted;} /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active,a:hover {    outline: 0;} /* ==========================================================================   Typography   ========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 {    font-size: 2em;    margin: 0.67em 0;} h2 {    font-size: 1.5em;    margin: 0.83em 0;} h3 {    font-size: 1.17em;    margin: 1em 0;} h4 {    font-size: 1em;    margin: 1.33em 0;} h5 {    font-size: 0.83em;    margin: 1.67em 0;} h6 {    font-size: 0.75em;    margin: 2.33em 0;} /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] {    border-bottom: 1px dotted;} /* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b,strong {    font-weight: bold;} blockquote {    margin: 1em 40px;} /* * Addresses styling not present in Safari 5 and Chrome. */ dfn {    font-style: italic;} /* * Addresses styling not present in IE 6/7/8/9. */ mark {    background: #ff0;    color: #000;} /* * Addresses margins set differently in IE 6/7. */ p,pre {    margin: 1em 0;} /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code,kbd,pre,samp {    font-family: monospace, serif;    _font-family: 'courier new', monospace;    font-size: 1em;} /* * Improves readability of pre-formatted text in all browsers. */ pre {    white-space: pre;    white-space: pre-wrap;    word-wrap: break-word;} /* * Addresses CSS quotes not supported in IE 6/7. */ q {    quotes: none;} /* * Addresses `quotes` property not supported in Safari 4. */ q:before,q:after {    content: '';    content: none;} small {    font-size: 75%;} /* * Prevents `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;} /* ==========================================================================   Lists   ========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ dl,menu,ol,ul {    margin: 1em 0;} dd {    margin: 0 0 0 40px;} /* * Addresses paddings set differently in IE 6/7. */ menu,ol,ul {    padding: 0 0 0 40px;} /* * Corrects list images handled incorrectly in IE 7. */ nav ul,nav ol {    list-style: none;    list-style-image: none;} /* ==========================================================================   Embedded content   ========================================================================== */ /* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improves image quality when scaled in IE 7. */ img {    border: 0; /* 1 */    -ms-interpolation-mode: bicubic; /* 2 */} /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) {    overflow: hidden;} /* ==========================================================================   Figures   ========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure {    margin: 0;} /* ==========================================================================   Forms   ========================================================================== */ /* * Corrects margin displayed oddly in IE 6/7. */ form {    margin: 0;} /* * Define consistent border, margin, and padding. */ fieldset {    border: 1px solid #c0c0c0;    margin: 0 2px;    padding: 0.35em 0.625em 0.75em;} /* * 1. Corrects color not being inherited in IE 6/7/8/9. * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ legend {    border: 0; /* 1 */    padding: 0;    white-space: normal; /* 2 */    *margin-left: -7px; /* 3 */} /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome. * 3. Improves appearance and consistency in all browsers. */ button,input,select,textarea {    font-size: 100%; /* 1 */    margin: 0; /* 2 */    vertical-align: baseline; /* 3 */    *vertical-align: middle; /* 3 */} /* * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button,input {    line-height: normal;} /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` *    and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type *    `input` and others. * 4. Removes inner spacing in IE 7 without affecting normal text inputs. *    Known issue: inner spacing remains in IE 6. */ button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {    -webkit-appearance: button; /* 2 */    cursor: pointer; /* 3 */    *overflow: visible;  /* 4 */} /* * Re-set default cursor for disabled elements. */ button[disabled],input[disabled] {    cursor: default;} /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. * 3. Removes excess padding in IE 7. *    Known issue: excess padding remains in IE 6. */ input[type="checkbox"],input[type="radio"] {    box-sizing: border-box; /* 1 */    padding: 0; /* 2 */    *height: 13px; /* 3 */    *width: 13px; /* 3 */} /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 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;} /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {    -webkit-appearance: none;} /* * Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner,input::-moz-focus-inner {    border: 0;    padding: 0;} /* * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea {    overflow: auto; /* 1 */    vertical-align: top; /* 2 */} /* ==========================================================================   Tables   ========================================================================== */ /* * Remove most spacing between table cells. */ table {    border-collapse: collapse;    border-spacing: 0;}

         注：本文大部分内容来自http://www.cssreset.com/

 

转载于:https://www.cnblogs.com/humin/p/3515547.html