CSS代碼分享

CSS代碼分享：瀏覽器CSS Reset方法十例-WEB標準+兼容教程

來源:我愛CSS　作者:52CSS　更新時間:2009-09-24　點擊: 47次

　　CSS  Reset是指重設瀏覽器的樣式。在52CSS .com以前的文章中，也介紹過相似的知識，但不夠深入，今天我們看十個CSS Reset方法的例子，學習這種方法的應用。
　　在各種瀏覽器中，都會對CSS的選擇器默認一些數值，譬如當h1沒有被設置數值時，顯示一定大小。但並不是所有的瀏覽器都使用一樣的數值，所以有了CSS Reset，以讓網頁的樣式在各瀏覽器中表現一致。

一、Generic Reset CSS

Example Source Code [www.52css.com]

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

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

二、Ateneu Popular CSS Reset

Example Source Code

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

Example Source Code

* { 
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; 
}

 
四、Yahoo’s CSS Reset

Example Source Code

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;   
}  

五、Eric Meyer Reset CSS

Example Source Code

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

Example Source Code

: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

Example Source Code

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

Example Source Code

* { 
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

Example Source Code

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

Example Source Code

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體系嗎？或許可以分享出來，在52CSS.com發表評論，說說您的經驗吧！