《
CSS网页实例 适合所有项目通用的reset.css》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334542013.htm
接下来要设置的是font-family属性，可以参考射雕的文章。另外，小麦的文章中提到，表单元素的字体在IE中都不能继续父元素的字体，所以要单独设置。
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,
CSS网页制作时实现自动换行的小技巧, 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; }
而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出详细理由。
但这样做有点毛糙。真正有下划线样式的其实只有 :link和:visited所以改成下面这样比较好：
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; }
11，插入和删除(ins/del)
对于这个问题，YUI直接消除了ins的下划线和del的删除线这两个文本装饰：
此外，layout.css中还可以放入自己常用的布局，比如 #wrap{margin:0 auto;width:960px;}之类的规则。看个人喜好而定。
Eric还提示到，需要在html中设置cellspacing=”0″ 来到达完善重置后果。
但此外YUI还设置了
破洛洛文章简介：另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对
而Eric这样做：
html { color: #000; background: #FFF; }
这问题太多了，在此未几加表述。
:link, :visited { text-decoration: none; }
li { list-style: none; }
7，行高(line-height)
对于行高,CSS网页制作教程 CSS属性英文单词的意义解释，YUI并没有给出重置定义，而Eric则给出了重置：
此外，对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样偏向于用YUI的策略，全体重置。
/* Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved. Based on YUI and Eric Meyer Licensed under the BSD License: 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; }
14，我的重置款式
总结上面种种规则，这里给出一下我的CSS重置规则，BSD协定宣布，请随便使用。测试样本（这个是从YUI那里复制过来的，感激YUI为此做出的奉献。）
下载：reset.css reset-min.css
让caption和th元素不要居中。作为重置，是可取的。建议增添此规则。
那么，文字颜色呢？准则上来说，也是不应当设置文字颜色的。然而IE中的表单元素中legend这个对象比较特殊，跟主题联合的比较严密。legend会默认有本人的颜色（跟当前的主题有关）而不会继承父元素的色彩（即使设了color:inherit;）。
从某些角度来说，可以想当然地以为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背风景，人们看到legend元素是玄色的也不会感到奇异。因而，YUI在其reset中设置了legend {color: #000;}是无可非议的。
但反过来说，把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩请求很可能是不同的，放在reset.css里反复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。
1，基础
牛顿是站在伟人伽利略的肩膀上的，我们也可以这么做,CSS网页制作技巧 强制中英文换行和不换行。首先我们要选定一个前进的基础。
请永远不要使用
此外，对于链接颜色,CSS网页制作技巧 图片的自适应居中和兼容处理，可以作为reset后急需设置的规则来处置。直接放入reset.css中不是很合适。
而YUI则没有设置这一条。而在Eric的样式中，可以看到Eric的提醒：务必从新定义获取焦点后的样式！
这点实在很重要，出于可拜访性的角度动身，那些不便于使用鼠标的人基础上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大辅助这类群体的用户，通常建议设置成跟:hover一样。常常设计上会由于这个虚线框而大打折扣。因此这条保留在reset中，并且作为reset.css之后及早定义的规矩。
OK，就决议用Eric的了，对于样式重置，过细一点周密一点总没有错。
可以看到，Eric把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式，而其他元素则不动。我个人比较偏好YUI的做法，因为他这样可以避免给一些无关元素带上不用要的样式。导致元素过多时的性能降落。但Eric的也有可取之处，他这样写，全部reset.css可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来取舍所有元素还有什么差别呢？这已经简直囊括了所有元素了！你怎么用呢？看你自己爱好了。
目前比较流行的有Eric Meyer的重置样式和YUI的重置样式。另有Condensed Meyer Reset简化Eric Meyer的样式。有趣的是，Eric的重置样式也是源于YUI的。而那份简化版又把Eric的样式简化回YUI的样式了 。但同时，蹩脚的是，网上传播的比较广的(尤其是国内)都不是最新的版本。上面两个页面里直接看到的都不是最新的，Eric专门为有一个reset.css页面。而YUI当前版本(2.7.0)的reset.css实际地址里，比上面的页面中还多一些货色。此外，我们还可以基于一些常见的框架，比较有名的比如Blueprint或者Elements CSS Framework（这个的reset也是源自于Eric Meyer的）。OK，筹备工作就差不多了。以上这些都可以作为参考材料来组织我们自己的reset。我这里重要采用YUI，兼带Eric的reset。
仿佛没有优化，不晓得为何没有写到一起去。而Eric则在最开端那条中就已经定义。而其中的问题是，YUI这样定义了，但没有重置字体大小，这点是有所遗憾的。既然是重置样式，就彻底一些，所以建议改成这样的：
此外，YUI并没有给code kbd samp tt 这多少个元素重置字体大小。但实际上在IE中，他们都会被缩小显示。所以此处应该给予重置font-size: 100%;
Eric则在他终极版的reset中去掉了对于这些的样式重置，只保留了 font-size: 100%; 同样他没有给出具体理由。
但通常情况下，我认为还是重置一下这些样式好，比方strong元素，良多时候只是语义罢了，并非盼望他真的加粗。可能会有背景色或者其余方法来强调。而之所以这里都用了inherit这个继承属性而不是定义 font-weight: normal; 可以在 Eric 先前的reset文章中看到。这是为了避免——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情形的发生。所以把YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。
破洛洛文章简介：另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对
del, ins { text-decoration: none; }
body { line-height: 1; }
2，默认颜色
对于页面是不是有默认背景色和远景色，YUI和Eric有着不同的见解。
YUI重置背景色为白色而文字颜色为黑色。
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; } 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; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input, button, textarea, select { *font-size: 100%; }
Eric用了：
只管我没有测试出YUI的有什么问题，但我始终觉得设置ol跟ul会比较稳当。而且，波及的元素更少，机能应该更高一点。固然下载量会多3字节。
同样对于Eric把所有元素都放到了Baseline上，包含上标下标。Eric的说明是，强迫让设计师准确定位这些元素的垂直偏移。
8，列表样式
YUI用了：
但是很可怜，在ie6/ie7当中，不管是strong还是h1-h6,亦或是em等元素，设置了inherit均无法继承父元素属性，仍然保持自己的特点。这就带来了浏览器差异，样式重置本身是为了避免浏览器差别的，但当初带来了浏览器差异，是万万不可取的。对于这个问题我斟酌了良久，到底是为了统一所有浏览器都重置成normal（YUI的主意），还是废弃重置这些元素，让他们顺其天然，来保证在所有浏览器中样式一样（Eric的设法）。我最后决定采取YUI的做法。因为，无论重置成normal还是不重置，这些元素都无奈继承父元素属性。既然如斯，那么退而求其次，保障这些元素都恢复到一般外观，防止在设计的时候还要重置样式。
不得不说，这种让步是仅仅针对IE6和IE7的，兴许在5年后，老板和客户都不要求支持IE7的时候，我们可以释怀勇敢得使用inherit了。
layout.css
首先除了reset.css之外要树立的layout.css，这里目前主要推荐放入.clearfix。扫除浮动很重要。但这不属于样式重置，放在布局当中正合适。
sup { vertical-align: baseline; } sub { vertical-align: baseline; }
12，援用元素的引号
某些浏览器中，q或者blockquote前后会呈现引号。这个并不是谁都爱好的。所以需要重置他。
YUI的比较简单,css网页制作实用技巧9则，只重置了q：
--> [
网站建设之]CSS网页实例:合适所有项目通用的reset.css
0，引言
每每有新项目，第一步就是应当应用一个reset.css来重置样式。滥用不如不必，直接拿个现成的reset.css过来将导致后期各种离奇bug的产生。所以最好还是自己写一个reset.css，并且要清楚每一条reset都是用来做什么的。reset.css本意就是重置样式，我始终倡议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css。 详细如何计划网站CSS构造，不在文本探讨之列，可以参考Smashing Magazine上的文章，海内有差能人意的中文译版。留神，本文把reset分成了两个局部，一个是纯reset,
CSS网页代码编写隔行换色的技巧.css，可以用于任何项目。另一个是用于特定项目的&ldquo,
CSS缩写的语法规则;reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css造成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。
5，外边框(outline)
这个就是元素获取焦点时的虚线框，在ie之外的阅读器上能够像下面Eric做的那样，通过设置outline来打消。
fieldset, img { border: 0; } abbr, acronym { border: 0; font-variant: normal; }
9，表格元素
在表格方面，都比较统一。均是：
/* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }
3，padding和margin
曾经一度风行的* { margin: 0; padding: 0; }也就是出于这个目的。让各个元素的padding和margin都归零，尤其是那些h1和p以及ul/ol/li之类的元素，还有，body本身也是有margin的。肃清元素的padding和margin是很有用的。
YUI这样做：
15，实现一个初步的CSS框架
之条件到了，样式重置作为一个所有项目可以使用的共性存在，而不同的项目应当有其个性。当然还有其他一些共性，不属于样式重置的部分，但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多，这里只是点到为止，不做更多开展。
blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
16，探讨
文章写的比拟匆促，也受限与自己才能所限，只能写到这里。欢送留言探讨，也可发邮件或上Twitter找我。以便进一步完美这个reset。谢谢。
/* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; }
这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，假如你的设计本身就是白色背景，那么不要设置背景,CSS编辑器：TopStyle Pro使用技巧。一小部分中高程度的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。根本常见的浏览器都供给了这个简单的功效。而咱们的背景色重置则会损坏用户的抉择——尽管这样能保证你的设计原汁原味的浮现给所有用户。当然我知道，更高真个用户会用Stylish之类的Firefox扩大来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的处所。请把你的设计放在更广袤的土地上。
所以，简略说来，NO，不要在reset中设置背景色。
/* remember to define focus styles! */ :focus { outline: 0; }
而Eric保存了删除线：
ol, ul { list-style: none; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
另外，对在Firefox之类的支撑outline的浏览其中，除了获取焦点的元素外，浏览器自身并不给元素设置outline属性，所以，像Eric那样把所有元素的outline设成0，我就认为没有太大必要了。
h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特征来定。我个人是不喜欢全局定义hx系列的字体大小的，统一为100%我觉得挺好。
10，高低标以及baseline
YUI写成
行高默认所有元素都会继承的,CSS绝对定位和浮动的分栏布局，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常浏览，但中文就无法阅读了，行间距过于紧密导致轻易看错行。通常在中文环境下得设置1.4到1.5才干是用户畸形阅读。我建议是1.5，这样算出来的值也是整数。好比字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒畅。此外，还有一个不设置成1的重要起因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为显明。所以,CSS给图片加边框，重置的原则是好的，但切不可重置为1。
至于其他需要全局设置的，可以参考前文中的叙述，找到相应的部门添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下，使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘却在写表格的时候加cellspacing=”0″ 来达到完美重置效果。
Tag：项目 通用 所有 适合 网页 实例
typography.css
这里可以放置许多规则，十分重要的是以下三个：
:focus, a, ins
这三个是被重置掉的，但又很主要的内容，提议在reset之后即时在typography中设定全站样式，坚持样式同一。
ins可以独自设置， :focus 最好设置成跟 :hover一样，而a的样式仍是依照LoVe,HAte的法令来设置。
4，边框
YUI里：
如何取舍？我挑选Eric的，为什么我这里不寻求完美的样式重置了呢？很简单，我这个reset的目的是为了让我们写页面的时候尽量避免浏览器默认样式，以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装潢，我信任没有人会反对的。有人会加上其他样式，比如字体变淡之类的，但对于del如此强语义的元素来说，没有什么比用删除线更能表白含意的了。而不像上面那个focus样式，未必人人喜欢虚线框。但好像又没有什么浏览器默认不给del元素加删除线，故这条可以省略。
所以，这里我只重置ins样式，别忘了给ins元素在等下也增加一些样式。
a { text-decoration: none; }
6，字体样式(font style/weight/size/variant)
YUI里，分成了多条：
而Eric则比较周到，把q和blockquote都重置了。
破洛洛文章简介：另一个是用于特定项目的“reset”，自定义修正的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们独特导入到一个base.css构成一个名目的基本样式。本文就是来介绍如何写一个适合所有项目标通用的reset.css，以及先容在设置玩reset.css之后须要针对
Eric已经在上一条中把所有的边框都清掉了，还是推举用YUI的，理由同上。
13，链接
对于链接，YUI和Eric都没有采用样式重置，但从我思考许久后还是决定把链接样式重置放进来。究其原因，还是因为样式重置一来要彻底，二来对于链接样式并非所有设计师都喜欢用下划线装饰。因此，我还是建议把链接的下划线重置掉。
* { margin: 0; padding: 0; }
caption, th { text-align: left; }
sup, sub { font-size: 100%; vertical-align: baseline; }
破洛洛文章简介：另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对
q:before, q:after { content: ''; }
(责任编辑：网站建设)
CSS网页实例 适合所有项目通用的reset.css相关文章