Css Reset是什麼？有些同行叫 "css復位"，有些可能叫 "默認css".....
相信看完全文您會對Css Reset有個重新的認識
原文地址...
PS：
程序代碼
* {;
padding: 0;;
margin: 0;;
}
這就是最常用的Css Reset，但是這裡會有很多問題。
原文前部分說了很多關於Css，以及各瀏覽器的css規則的不同，而制定"Css Reset"也是為了兼容與統一，正確有效的使用"Css Reset"可以在某種程度上節約時間與金錢。
非常感謝Perishable的整理與歸納
下面是關於幾類Css Reset的簡單介紹，作者能力有限，只能理解大概意思，還請各位看官見諒。
Minimalistic Reset [ Version 1 ]
相信這一段你經常看到，而且也是我們經常用到的
程序代碼
* {;
padding: 0;;
margin: 0;;
};
Minimalistic Reset [ Version 2 ]
border:0的設計有些不靠譜了
程序代碼
* {;
padding: 0;;
margin: 0;;
border: 0;;
}
Minimalistic Reset [ Version 3 ]
當然這個也是不推薦的，會跟某些默認樣式有衝突
程序代碼
* {;
outline: 0;;
padding: 0;;
margin: 0;;
border: 0;;
}
Condensed Universal Reset
這是作者當前比較鍾意的一種寫法，保證了相對普遍瀏覽器樣式的統一性。
程序代碼
* {;
vertical-align: baselinebaseline;;
font-weight: inherit;;
font-family: inherit;;
font-style: inherit;;
font-size: 100%;;
border: 0 none;;
outline: 0;;
padding: 0;;
margin: 0;;
}
Poor Man's Reset
其實這也是我們常用的一類Css Reset.對字體的大小復位，以及圖片鏈接的邊框處理
也經常在某些站點看到
程序代碼
html, body {;
padding: 0;;
margin: 0;;
};
html {;
font-size: 1em;;
};
body {;
font-size: 100%;;
};
a img, :link img, :visited img {;
border: 0;;
};
Shaun Inman's Global Reset
作者認為Shaun寫這類的Css Reset是有某種目的性
而且這類規則是針對的是某些重要的常用瀏覽器
比如ie、firefox等
程序代碼
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,;;
form, fieldset, input, p, blockquote, table, th, td, embed, object {;
padding: 0;;
margin: 0;;;
};
table {;
border-collapse: collapse;;
border-spacing: 0;;
};
fieldset, img, abbr {;
border: 0;;
};
address, caption, cite, code, dfn, em,;;
h1, h2, h3, h4, h5, h6, strong, th, var {;
font-weight: normal;;
font-style: normal;;
};
ul {;
list-style: none;;
};
caption, th {;
text-align: left;;
};
h1, h2, h3, h4, h5, h6 {;
font-size: 1.0em;;
};
q:before, q:after {;
content: '';;
};
a, ins {;
text-decoration: none;;
};
Yahoo CSS Reset
yahoo這幫傢伙寫的Reset個人覺得可以推薦
程序代碼
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;;
}
Erik Meyer's CSS Reset
作者將Erik Meyer的代碼重新整理了，但功能上還是一樣的
這套Css Reset是業內是使用最多的
程序代碼
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: baselinebaseline;;
font-family: inherit;;
font-weight: inherit;;
font-style: inherit;;
font-size: 100%;;
outline: 0;;
padding: 0;;
margin: 0;;
border: 0;;
};
/* remember to define focus styles! */
:focus {;
outline: 0;;
};
body {;
background: white;;
line-height: 1;;
color: black;;
};
ol, ul {;
list-style: none;;
};
/* tables still need cellspacing="0" in the markup */
table {;
border-collapse: separate;;
border-spacing: 0;;
};
caption, th, td {;
font-weight: normal;;
text-align: left;;
};
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {;
content: "";
}
blockquote, q {
quotes: "" "";;
};
Condensed Meyer Reset
總的來說這是對Erik Meyer的Css Reset的修改與提升
程序代碼
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;;
};
fieldset, img {;;
border: 0;;
};
table {;
border-collapse: collapse;;
border-spacing: 0;;
};
ol, ul {;
list-style: none;;
};
address, caption, cite, code, dfn, em, strong, th, var {;
font-weight: normal;;
font-style: normal;;
};
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;;
}
