CSS Reset--重置預設樣式
阿新 • • 發佈：2018-12-14
CSS Reset，意為重置預設樣式。HTML中絕大部分標籤元素在網頁顯示中都有一個預設屬性值，通常為了避免重複定義元素樣式，需要進行重置預設樣式（CSS Reset）。
實現方式有很多，根據自己的專案需要，更多的是自己編寫適合自己專案的CSS Reset，下面給一些其他大型專案的例子，作為參考。 1、 - 以下是CSS Reset 2.0標準：
/* 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 如下是一些常用的自定義的共通樣式：
/* 自定義的共通樣式 */
/* custom */
a {
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
li {
list-style: none;
}
html, body {
width: 100%;
}
body {
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
2、HTML5 Doctor CSS Reset
/**
* html5doctor.com
Reset Stylesheet v1.6.1
* Richard Clark
* 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;
}
3、Yahoo! (YUI 3) Reset CSS
/** * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * https://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;
}
4、淘寶（CSS Reset）
html {
overflow-x: auto;
overflow-y: scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight: 400;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
padding: 0 10px;
text-align: left;
}
select {
font-size: 12px;
}
table {
border-collapse: collapse;
}
fieldset, img {
border: 0 none;
}
fieldset {
margin: 0;
padding: 0;
}
fieldset p {
margin: 0;
padding: 0 0 0 8px;
}
legend {
display: none;
}
address, caption, em, strong, th, i {
font-style: normal;
font-weight: 400;
}
table caption {
margin-left: -1px;
}
hr {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #E4E4E4;
border-width: 1px 0;
clear: both;
height: 2px;
margin: 5px 0;
overflow: hidden;
}
ol, ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
caption, th {
text-align: left;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
}
5、百度（CSS Reset）
body {
font-family: arial, helvetica, sans-serif;
font-size: 13px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4;
text-align: center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
table {
font-size: inherit;
}
input, select {
font-family: arial, helvetica, clean, sans-serif;
font-size: 100%;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
}
button {
overflow: visible;
}
th, em, strong, b, address, cite {
font-style: normal;
font-weight: normal;
}
li {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
img, fieldset {
border: 0 none;
}
ins {
text-decoration: none;
}
6、Eric Meyer（CSS Reset）
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}