最近看到一個字叫css reset。什麼叫做css reset呢?我理解為重設css,也就是重設預設樣式。
我在html下的預設樣式中講到,有些標籤元素在html下有一個預設屬性值,我們在寫css頁面的時候,為了避免在css中重複定義它們,我們需要重置預設樣式(css reset)。每個人的用法和寫法都不一樣。找到一篇關於css reset的調查文章, 可以看看國外使用css reset的比例調查。
接下來我也查看了國內的兩個網站,用firebug按f12看看他們的css reset怎麼寫的?
淘寶(www.taobao.com):
html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { background-color:#ffffff; color:#666666; font-family:helvetica,arial,sans-serif; font-size:12px; padding:0 10px; text-align:left; } select { font-size:12px; } table { border-collapse:collapse; } fieldset, img { border:0 none; } fieldset { margin:0; padding:0; } fieldset p { margin:0; padding:0 0 0 8px; } legend { display:none; } address, caption, em, strong, th, i { font-style:normal; font-weight:400; } table caption { margin-left:-1px; } hr { border-bottom:1px solid #ffffff; border-top:1px solid #e4e4e4; border-width:1px 0; clear:both; height:2px; margin:5px 0; overflow:hidden; } ol, ul { list-style-image:none; list-style-position:outside; list-style-type:none; } caption, th { text-align:left; } q:before, q:after, blockquote:before, blockquote:after { content:""; }
百度有啊(www.youa.com):(架構基本上是模仿yui來做的)
body { font-family:arial,helvetica,sans-serif; font-size:13px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:1.4; text-align:center; } body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td { margin:0; padding:0; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } table { font-size:inherit; } input, select { font-family:arial,helvetica,clean,sans-serif; font-size:100%; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; } button { overflow:visible; } th, em, strong, b, address, cite { font-style:normal; font-weight:normal; } li { list-style-image:none; list-style-position:outside; list-style-type:none; } img, fieldset { border:0 none; } ins { text-decoration:none; }
在《超越css》一書中建議我們做網站開始重置所有預設樣式:
/* normalizes margin,padding */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0} /* normalizes font-size for headers */ h1,h2,h3,h4,h5,h6 { font-size:100%} /* removes list-style from lists */ ol,ul { list-style:none } /* normalizes font-size and font-weight to normal */ address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal } /* removes list-style from lists */ table { border-collapse:collapse; border-spacing:0 } /* removes border from fieldset and img */ fieldset,img { border:0 } /* left-aligns text in caption and th */ caption,th { text-align:left } /* removes quotation marks from q */ q:before,q:after { content:''}
那我們實際寫程式碼的時候該怎麼來css reset呢?
我個人建議使用(eric meyer和yui)的 css reset
Eric Meyer's 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, 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; } YUI: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }
結合他們的css reset寫法,再根據自己的實際狀況,一定能寫出符合自己網站的完美的css reset。