在各種瀏覽器中,都會對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} |