我比较喜欢的reset css

September 30, 2008 - by Macji - HTML/CSS/JS/PHP - css, reset

各浏览器的默认样式都并不太一致,所以我们得建立一个reset.css,使各浏览器对各元素的默认属性都一致。reset css这大家都见得多了,对常用的莫过

*{margin:0;padding:0}

YUI的reset

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;
}

这些reset没有最佳的,只有最适合自己项目的。


动手来做我喜欢的reset css,而且也简单的。首先重置你的margin和pading


html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,  
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}  

重置标题字体大小为100%


h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

设置文字大小100%的基数。


body{
    line-height: 1;  
    font-size: 88%;
}

一般浏览器默认文字大小是1em,大约是16px,那body文字大小88%后,大约14px,所以h系列的大小也在14px左右。如果想给文字设置为12px,那么p{font-size:90%}。
最终重置css


html{/* for firefox */
    overflow:-moz-scrollbars-vertical;
    overflow-x:auto;
}
html, body, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,  
ol, li, dl, dt, dd, form, fieldset, input, th, td, a{  
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    list-style: none;
}
body{
    line-height: 1;
    font-size: 88%;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
}

我这里没有设置字体,具体参照 web 安全字体 吧。上面这些元素是最常用的,但现在用的比较多的有sup、sub、cite等,也可以考虑重置为无表现样式。


扩展阅读:http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

本博客所有文章遵循创作共用版权协议,要求署名、非商业、保持一致。转载时请先阅读以上许可协议,并以超链接形式注明出处。
这篇文章发表于2008年09月30日 12:47:45, 并被分类于HTML/CSS/JS/PHP. 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论, 也可以发表你的评论, 或者在您自己的网站中引用(trackback)该篇日志.

已有 4 条评论

  1. 明城 : September 30, 2008 - Permalink

    h1,h2,h3,h4,h5,h6{
    font-size:100%;
    }

    这段搞得标题都一样大,所以我个人感觉不是很喜欢。我的做法是

    h1 {
    200%
    }

    h2 {
    180%
    }

    依此类推,到 H6 的时候刚好和普通字体一样大(100%)

  2. shamas : September 30, 2008 - Permalink

    你好,想请教你一个问题,如何通过js来实现FF下也能让网面变成灰色

  3. Macji : September 30, 2008 - Permalink

    mask? 创建一个div,设置它的宽和高,z-index,然后背景黑色透明50%,最后插入body。

  4. 爱月 : September 30, 2008 - Permalink

    恩~再详细点儿~再详细点儿吧~

发表评论

添加新评论