网络编程
位置:首页>> 网络编程>> 网页设计>> css学习笔记: 重置默认样式 css reset(2)

css学习笔记: 重置默认样式 css reset(2)

作者:好好 来源:好好blog 发布时间:2009-07-19 14:30:00 

标签:css,reset,重置,样式

《超越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 MeyerYUI)的 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。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com