reset css是什麼

reset css是指reset.css重置瀏覽器標籤的樣式表，其作用就是將瀏覽器的預設樣式全部去掉，更準確地說就是透過重新定義標籤樣式，也就是把瀏覽器提供的預設樣式覆蓋掉。

本文操作環境：windows7系統、CSS3版，DELL G3電腦

reset.css 重置瀏覽器標籤的樣式表

HTML標籤在瀏覽器裡有預設的樣式，例如p 標籤有上下邊距，strong標籤有字體加粗樣式，em標籤有字體傾斜樣式。不同瀏覽器的預設樣式之間也會有差別，例如ul預設帶有縮排的樣式，在IE下，它的縮排是透過margin實現的，而Firefox下，它的縮排是由padding實現的。

在切換頁面的時候，瀏覽器的預設樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的預設樣式全部去掉，更準確地說就是透過重新定義標籤樣式。 “覆蓋”瀏覽器的CSS預設屬性。最簡單的說法就是把瀏覽器提供的預設樣式覆蓋掉！這就是CSS reset。

重置作用

因為瀏覽器的品種很多，每個瀏覽器的預設樣式也是不同的，例如bb9345e55eb71822850ff156dfde57c8標籤，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不同的，所以，透過重設button標籤的CSS屬性，然後再將它統一定義，就可以產生相同的顯示效果。

最簡單的CSS Reset內容寥寥幾行就能完成：

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

(但由於性能較低，不推薦使用)

這個方法讓所有的選擇器的padding、margin和border都設定成0。也有內容更多的，例如YUI的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;
}
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的CSS Reset V1.0|200802內容：

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

#Eric Meyer V2.0|20110126

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是根據個人需求不同可以按需自訂的。

推薦學習：《css影片教學》

以上是reset css是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！