DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 幾個CSS重置默認樣式reset.css代碼
幾個CSS重置默認樣式reset.css代碼
編輯:CSS詳解     

因為各大浏覽器存在兼容性問題,同一個CSS屬性在不同浏覽器下的表現不一定相同,有經驗的前端設計者都會自定義一個重置浏覽器默認樣式的CSS文件,在這個文件中定義一些針對不同浏覽器最終表現一致的代碼,大家最為熟悉的也許就是*{margin:0 0}了,其實這是最簡單照顧兼容性的代碼,一般情況下,僅有這個是不夠的,筆者收集了幾個前端設計網站使用的reset.css代碼,為您做參考,你可復制這些代碼保存為reset.CSS文件,在每個頁面中引入即可。

CSS重置浏覽器樣式代碼一:

01 body,ul,li,p,h1,h2,h3,h4,h5,h6,img,br,hr,table,tr,td,dl,dt,dd,form { 02     margin0; 03     padding0; 04 } 05 body { 06     font-familyArial,"微軟雅黑"; 07     font-size12px; 08     color#434343; 09 } 10 .clear { 11     clearboth; 12     font-size0px; 13 } 14 ul,li { 15     list-stylenone; 16 } 17 img { 18     bordernone; 19 } 20 /*一般鏈接*/ 21 a { 22     text-decorationnone; 23     color#555; 24 } 25 a: hover { 26     color#3366ff; 27 }

CSS重置浏覽器代碼二:

01 Html, body, div, span, applet, object, iframe, 02 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 03 a, abbr, acronym, address, big, cite, code, 04 del, dfn, em, font, img, ins, kbd, q, s, samp, 05 small, strike, strong, sub, sup, tt, var, 06 b, u, i, center, 07 dl, dt, dd, ol, ul, li, 08 fIEldset, form, label, legend, 09 table, caption, tbody, tfoot, thead, tr, th, td { backgroundtransparentborder0margin0padding0;vertical-alignbaselinefont-size100%font: inherit; -webkit-text-size-adjust: none; } 10 body { line-height1; } 11 table { border-collapsecollapseborder-spacing0; } 12 object, :focus { outlinenone; } 13 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section /* Html 5 */ display:block; } 14 blockquote, q { quotesnone; } 15 blockquote:before, blockquote:after, q:before, q:after { content''contentnone; } 16 a img { bordernone; } 17 input,button,textarea,select,optgroup,option{ font-size100%font: inherit; } 18 .al { text-alignleft; } 19 .ar { text-alignright; } 20 .ac { text-aligncenter; } 21 .lc { margin0 auto; } 22 .fl, .il .fl { floatleft; } 23 .fr, .il .fr { floatright; } 24 .fc, .il .fc { floatnoneclearboth; } 25 .rel { positionrelative; } 26 .abs { positionabsolute; } 27 .il { list-stylenone; } 28 .il li { floatleft; }

CSS重置浏覽器代碼三:來自Eric Meyer網站:

01 Html, body, div, span, applet, object, iframe, 02 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 03 a, abbr, acronym, address, big, cite, code, 04 del, dfn, em, font, img, ins, kbd, q, s, samp, 05 small, strike, strong, sub, sup, tt, var, 06 dl, dt, dd, ol, ul, li, 07 fIEldset, form, label, legend, 08 table, caption, tbody, tfoot, thead, tr, th, td { 09     margin0; 10     padding0; 11     border0; 12     outline0; 13     font-weight: inherit; 14     font-style: inherit; 15     font-size100%; 16     font-family: inherit; 17     vertical-alignbaseline; 18 } 19 : focus { 20     outline0; 21 } 22 body { 23     line-height1; 24     colorblack; 25     backgroundwhite; 26 } 27 ol, ul { 28     list-stylenone; 29 } 30 table { 31     border-collapseseparate; 32     border-spacing0; 33 } 34 caption, th, td { 35     text-alignleft; 36     font-weightnormal; 37 } 38 blockquote: before, blockquote: after, 39 q: before, q: after { 40     content""; 41 } 42 blockquote, q { 43     quotes"" ""; 44 }

如果你確定用不上代碼中對某一選擇器的定義,可以刪除掉。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved