css reset

xiaoyuyyun發表於2013-11-02
CSS

10款瀏覽器CSS Reset的方法

知道CSS Reset是什麼嗎？通常情況下，它也被寫成Reset CSS，即重設瀏覽器的樣式。在各種瀏覽器中，都會對CSS的選擇器預設一些數值，譬如當h1沒有被設定數值時，顯示一定大小。但並不是所有的瀏覽器都使用一樣的數值，所以，有了CSS Reset，以讓網頁的樣式在各瀏覽器中表現一致。

正在使用CSS的你，用過CSS Reset嗎？當然，或許你用了，卻不知道正在用，比如你可能用到：

* { padding: 0; margin: 0; border: 0; }

這也是一款CSS Reset的方法，讓所有的選擇器的padding、margin和border都設定成0。這是一種強大的方法，也是最簡單，最安全的方法，不過，也是最佔用資源的方法。對於小型的網站來說，用這個並不會帶來大的資源浪費，但如果是像Yahoo這種架構非常大的網站，剛需要有選擇地進行CSS重設，以減少資源浪費。下面是Yahoo的CSS重設程式碼，也是受最多人喜愛的CSS Reset方法，YUI選擇的方法是：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
padding: 0; 
margin: 0; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 
fieldset,img { 
border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-weight: normal; 
font-style: normal; 
} 
ol,ul { 
list-style: none; 
} 
caption,th { 
text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-weight: normal; 
font-size: 100%; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border: 0; 
}

OK，相信你也已經瞭解了CSS重設的目的，或許你也可以根據自己的喜好，寫一個自己的CSS重設系統，畢竟大家的需求和習慣的不同的。而你可以參照下面的幾款：

Ateneu Popular 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, 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-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 
} 
:focus { outline: 0;} 
a, a:link, a:visited, a:hover, a:active{text-decoration:none} 
table { border-collapse: separate;border-spacing: 0;} 
th, td {text-align: left; font-weight: normal;} 
img, iframe {border: none; text-decoration:none;} 
ol, ul {list-style: none;} 
input, textarea, select, button {font-size: 100%;font-family: inherit;} 
select {margin: inherit;} 
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

Chris Poteet’s Reset CSS

* { 
vertical-align: baseline; 
font-family: inherit; 
font-style: inherit; 
font-size: 100%; 
border: none; 
padding: 0; 
margin: 0; 
} 
body { 
padding: 5px; 
} 
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { 
margin: 20px 0; 
} 
li, dd, blockquote { 
margin-left: 40px; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
}

Eric Meyer Reset CSS

html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend { 
vertical-align: baseline; 
font-family: inherit; 
font-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
outline: 0; 
padding: 0; 
margin: 0; 
border: 0; 
} 
:focus { 
outline: 0; 
} 
body { 
background: white; 
line-height: 1; 
color: black; 
} 
ol, ul { 
list-style: none; 
} 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
font-weight: normal; 
text-align: left; 
} 
blockquote:before, blockquote:after, q:before, q:after { 
content: ""; 
} 
blockquote, q { 
quotes: "" ""; 
}

Tantek Celik Reset CSS

:link,:visited { text-decoration:none } 
ul,ol { list-style:none } 
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } 
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input 
{ margin:0; padding:0 } 
a img,:link img,:visited img { border:none } 
address { font-style:normal }

Christian Montoya Reset CSS

html, body, form, fieldset { 
margin: 0; 
padding: 0; 
font: 100%/120% Verdana, Arial, Helvetica, sans-serif; 
} 
h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
margin: 1em 0; 
padding: 0; 
} 
li, dd, blockquote { 
margin-left: 1em; 
} 
form label { 
cursor: pointer; 
} 
fieldset { 
border: none; 
} 
input, select, textarea { 
font-size: 100%; 
font-family: inherit; 
}

Rudeworks Reset CSS

* { 
margin: 0; 
padding: 0; 
border: none; 
} 
html { 
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif; 
text-shadow: #000 0px 0px 0px; 
} 
ul { 
list-style: none; 
list-style-type: none; 
} 
h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
font-weight: normal; 
margin: 0 0 1em 0; 
} 
cite, em, dfn { 
font-style: italic; 
} 
sup { 
position: relative; 
bottom: 0.3em; 
vertical-align: baseline; 
} 
sub { 
position: relative; 
bottom: -0.2em; 
vertical-align: baseline; 
} 
li, dd, blockquote { 
margin-left: 1em; 
} 
code, kbd, samp, pre, tt, var, input[type='text'], textarea { 
font-size: 100%; 
font-family: monaco, "Lucida Console", courier, mono-space; 
} 
del { 
text-decoration: line-through; 
} 
ins, dfn { 
border-bottom: 1px solid #ccc; 
} 
small, sup, sub { 
font-size: 85%; 
} 
abbr, acronym { 
text-transform: uppercase; 
font-size: 85%; 
letter-spacing: .1em; 
border-bottom-style: dotted; 
border-bottom-width: 1px; 
} 
a abbr, a acronym { 
border: none; 
} 
sup { 
vertical-align: super; 
} 
sub { 
vertical-align: sub; 
} 
h1 { 
font-size: 2em; 
} 
h2 { 
font-size: 1.8em; 
} 
h3 { 
font-size: 1.6em; 
} 
h4 { 
font-size: 1.4em; 
} 
h5 { 
font-size: 1.2em; 
} 
h6 { 
font-size: 1em; 
} 
a, a:link, a:visited, a:hover, a:active { 
outline: 0; 
text-decoration: none; 
} 
a img { 
border: none; 
text-decoration: none; 
} 
img { 
border: none; 
text-decoration: none; 
} 
label, button { 
cursor: pointer; 
} 
input:focus, select:focus, textarea:focus { 
background-color: #FFF; 
} 
fieldset { 
border: none; 
} 
.clear { 
clear: both; 
} 
.float-left { 
float: left; 
} 
.float-right { 
float: right; 
} 
body { 
text-align: center; 
} 
#wrapper { 
margin: 0 auto; 
text-align: left; 
}

Anieto2K Reset CSS

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, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
center, u, b, i { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: normal; 
font-style: normal; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline 
} 
body { 
line-height: 1 
} 
:focus { 
outline: 0 
} 
ol, ul { 
list-style: none 
} 
table { 
border-collapse: collapse; 
border-spacing: 0 
} 
blockquote:before, blockquote:after, q:before, q:after { 
content: "" 
} 
blockquote, q { 
quotes: "" "" 
} 
input, textarea { 
margin: 0; 
padding: 0 
} 
hr { 
margin: 0; 
padding: 0; 
border: 0; 
color: #000; 
background-color: #000; 
height: 1px 
}

CSSLab 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, 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-weight: inherit; 
font-style: inherit; 
font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 
} 
:focus { 
outline: 0; 
} 
table { 
border-collapse: separate; 
border-spacing: 0; 
} 
caption, th, td { 
text-align: left; 
font-weight: normal; 
} 
a img, iframe { 
border: none; 
} 
ol, ul { 
list-style: none; 
} 
input, textarea, select, button { 
font-size: 100%; 
font-family: inherit; 
} 
select { 
margin: inherit; 
} 
/* Fixes incorrect placement of numbers in ol's in IE6/7 */ 
ol { margin-left:2em; } 
/* == clearfix == */ 
.clearfix:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
} 
.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;}

像你看到的，這些都大同小異，需求不同，方法也就不同。我自己偏向於喜歡Yahoo的CSS Reset，也用了Yahoo的程式碼。你，有自己的CSS Reset體系嗎？或許可以分享出來！

相關文章