重置默认样式 最近看到一个词叫css reset。什么叫做css reset呢?
我理解为重置css,也就是重置默认样式。我在中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset)。
每个人的用法和写法都不一样。找到一篇关于 可以看看国外使用css reset的比例调查。
这里有一篇总结css reset比较全面的文章,列举了多种css reset的写法,可以看看。 接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css reset怎么写的?
淘宝:
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 ; } h 1 , h 2 , h 3 , h 4 , h 4 , h 5 { 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 : "" ; } |
百度有啊:(架构基本上是模仿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, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , p, form, fieldset, legend, input, textarea, select, button, th, td { margin : 0 ; padding : 0 ; } h 1 , h 2 , h 3 , h 4 , h 5 , h 6 { 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,h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 , pre ,form,fieldset,input,p,blockquote,th,td { margin : 0 ; padding : 0 } /* Normalizes font-size for headers */ h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 { 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呢?
我个人推荐使用(和)的 css reset
Eric Meyer's Reset:
html, body, div, span, applet, object, iframe, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , 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,h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 , 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 ; } h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 { font-size : 100% ; font-weight : normal ; } q:before,q:after { content : '' ; } abbr,acronym { border : 0 ; } |
结合他们的css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。