各浏览器的默认样式都并不太一致,所以我们得建立一个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 条评论
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
这段搞得标题都一样大,所以我个人感觉不是很喜欢。我的做法是
h1 {
200%
}
h2 {
180%
}
依此类推,到 H6 的时候刚好和普通字体一样大(100%)
你好,想请教你一个问题,如何通过js来实现FF下也能让网面变成灰色
mask? 创建一个div,设置它的宽和高,z-index,然后背景黑色透明50%,最后插入body。
恩~再详细点儿~再详细点儿吧~