一.重置的理由
當今流行的瀏覽器中,有些都是以自己的方式去理解css規范,這就會到只有的瀏覽器對css的解釋與設計師的css定義初衷相沖突,使得網頁的樣子在某些瀏覽器下能正確按照設計師的想法顯示.,但是有些瀏覽器卻沒有按照設計師想要的樣子顯示出來,這就導致瀏覽器的兼容性問題
所以,通過重置button標簽的css屬性,然后再將它統一定義,就可以產生相同的顯示效果
css reset的作用就是讓各個瀏覽器的css樣式有一個統一的基准,而這個基准更多的就是"清零"!
以下是一整段的css reset的樣式重置信息展示:
1 html, body, div, span, object, iframe, 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 abbr, address, cite, code, 4 del, dfn, em, img, ins, kbd, q, samp, 5 small, strong, sub, sup, var, 6 b, i, 7 dl, dt, dd, ol, ul, li, 8 fieldset, form, label, legend, 9 table, caption, tbody, tfoot, thead, tr, th, td, 10 article, aside, canvas, details, figcaption, figure, 11 footer, header, hgroup, menu, nav, section, summary, 12 time, mark, audio, video { 13 margin:0; 14 padding:0; 15 border:0; 16 outline:0; 17 font-size:100%; 18 vertical-align:baseline; 19 background:transparent; 20 } 21 22 body { 23 line-height:1; 24 } 25 26 :focus { 27 outline: 1; 28 } 29 30 article,aside,canvas,details,figcaption,figure, 31 footer,header,hgroup,menu,nav,section,summary { 32 display:block; 33 } 34 35 nav ul { 36 list-style:none; 37 } 38 39 blockquote, q { 40 quotes:none; 41 } 42 43 blockquote:before, blockquote:after, 44 q:before, q:after { 45 content:''; 46 content:none; 47 } 48 49 a { 50 margin:0; 51 padding:0; 52 border:0; 53 font-size:100%; 54 vertical-align:baseline; 55 background:transparent; 56 } 57 58 ins { 59 background-color:#ff9; 60 color:#000; 61 text-decoration:none; 62 } 63 64 mark { 65 background-color:#ff9; 66 color:#000; 67 font-style:italic; 68 font-weight:bold; 69 } 70 71 del { 72 text-decoration: line-through; 73 } 74 75 abbr[title], dfn[title] { 76 border-bottom:1px dotted #000; 77 cursor:help; 78 } 79 80 table { 81 border-collapse:collapse; 82 border-spacing:0; 83 } 84 85 hr { 86 display:block; 87 height:1px; 88 border:0; 89 border-top:1px solid #cccccc; 90 margin:1em 0; 91 padding:0; 92 } 93 94 input, select { 95 vertical-align:middle; 96 }
對於上述的代碼,我做以下的幾點說明:
1.該部分是對於瀏覽器部分的css進行重置,個人認為並非所有的代碼都是需要如此的操作出來,畢竟其中含有的很多標簽在你寫頁面的過程中不一定會用到
2.根據自己的實際的情況選擇適合自己的代碼來使用,不要 照抄,這是前輩們總結出來的經驗
以上代碼也可以簡化成下面的代碼形式:
1 body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{ 2 margin:0; 3 } 4 ol,ul{ 5 margin:0; 6 padding:0; 7 }
根據實際的情況合理的使用相關的reset的代碼,因為如果你的css文件本身就比較大的話,增加相關的reset代碼也會使得你的css文件變得更大點,對於公司來說,這點是不可取!!!