CSS reset

2011-12-21 08:37

     HTML标签在浏览器里有默认的样式,比如p标签有上下边距,strong标签字体加粗等等。而不同的浏览器,默认样式会有差别。比如ul默认带有缩进的样式,在IE下,缩进是通过margin实现的,在firefox下,缩进是由padding实现的。浏览器的默认样式往往会带来麻烦,所以,现在比较流行的解决办法是一开始就把浏览器的默认样式全部去掉,确切就是通过重新定义标签的样式,“覆盖”默认样式,就如同drupal的“覆写”,这个就是CSS reset。

     雅虎YUI的CSS reset代码:

       html{color:#000;background:#FFF;} 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, 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;} 
li{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;font-variant:normal;} 
sup{vertical-align:text-top;} 
sub{vertical-align:text-bottom;} 
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;} 
input, textarea, select{*font-size:100%;} 
legend{color:#000;}
 
    meyerweb.com的代码:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)

*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section
{
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after
{
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

 

点击微信扫一扫

最近留言

没有数据
扫描二维码访问
欢迎使用手机扫描二维码访问