重設預設樣式 css reset

來源:互聯網
上載者:User

標籤:lis   bsp   margin   ram   insert   center   define   move   after   

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 { 
 
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。 

重設預設樣式 css reset

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.