编写适合所有项目的通用的reset.css
互联网 发布时间：2009-04-02 19:37:50 作者：佚名 
我要评论
我要评论网页制作Webjx文章简介：本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。
0、引言
每每有新项目，第一步就是应当使用一个reset.css来重置样式
本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。
12、引用元素的引号
某些浏览器中，q或者blockquote前后会出现引号。这个并不是谁都喜欢的。所以需要重置他。
YUI的比较简单，只重置了q：
q:before,
q:after {
content: '';
}
而Eric则比较周到，把q和blockquote都重置了。
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
OK，就决定用Eric的了，对于样式重置，细致一点周到一点总没有错。
13、链接
对于链接，YUI和Eric都没有采取样式重置，但从我思考许久后还是决定把链接样式重置放进来。究其原因，还是因为样式重置一来要彻底，二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此，我还是建议把链接的下划线重置掉。
a {
text-decoration: none;
}
但这样做有点粗糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好：
:link, :visited {
text-decoration: none;
}
此外，对于链接颜色，可以作为reset后急需设置的规则来处理。直接放入reset.css中不是很合适。
14、我的重置样式
总结上面种种规则，这里给出一下我的CSS重置规则，BSD协议发布，请随意使用。测试样本（这个是从 YUI那里复制过来的 ，感谢YUI为此做出的贡献。）
下载：reset.css reset-min.css
/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version: 1.1 | 20090303
*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
相关文章
- 每个浏览器都有一套CSS样式表用于保证网页正常显示，为了精准写出WEB页面 通常一开始就重新定义标签样式，介绍两个比较不错的Reset.css 分别来自雅虎YUI和Eric Meyer2014-01-26
- 全局CSS想必大家并不陌生吧，主要就是一些基础全局的样式设置，提高书写效率，本文整理了一些方便大家使用，感兴趣的朋友可以了解下2013-09-12
- CSS样式清除和重置是前端开发必需要做的事情，结合了前辈们的经验整理了一份CSS重置样式代码不敢独享特此与大家分享下，感兴趣的朋友可不要错过了哈2013-05-20
CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致
CSS Reset是指重设浏览器的样式,在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小;有了CSS Reset，让网页的样式在各浏览器中表现2012-12-21- reset.css本意就是重置样式，我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css2012-04-01
- 网页制作Webjx文章简介：Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为2009-04-02
- 这篇文章主要介绍了CSS样式重置代码，一般保存为reset.css修改了默认的css设置，方便布局与提高浏览器兼容性2014-06-11
最新评论