分类： CSS

HTML5种的meter元素非常有用，然而默认样式总是跟不上时代的步伐，所以琢磨了一下自定义样式的方式，仅适用于webkit内核的浏览器。Chrome 26 测试通过。分享给大家。颜色取自 Bootstrap Button。

meter::-webkit-meter-bar {
background: #FFF;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}

测试地址 ：http://shawphy.com/demo/meter.html

@simurai 写的更神奇的用法

扩展阅读：
HTML5 progress元素的样式控制、兼容与实例

title代表的是页面的标题，很多时候跟h1的内容是一样的。
我在写页面的时候感觉总是重复一次很麻烦，
于是就索性把h1给删了，把title给显示出来参与页面布局，
这样整个页面就有趣多了
代码很简单

head,title{display:block;}

是的，只有一句话，让head和title都显示。
此外如果还对其他有兴趣，可以把meta、script还有style等都显示出来

另外，下面这句也会很有趣

body style, body script{
display:block;
white-space: pre;
}

可以让body中的script何style都原样显示出来，
怎么用好就靠大家自己发挥了。

当然，我们亲爱的IE6是不支持上面两个小功能的。
Firefox 3.6.6 和 Chrome 6.0.458.1 测试通过。

最近做了一个项目，尝试了一些以前未曾上尝试过的方法——基于模块设计整个网站的内容。做到后期才发觉如果初期的时候设计的更好一些，能做到面向对象的CSS来设计，那整体开发效率以及代码复用方面会做比现在好。现在的代码还是有点不干净的地方，有些地方有点乱。这可能是这行当的“完美主义”情结吧 :) 希望下次可以做的更好。

1.模块化问题

首先，什么是模块化？我这里指的模块化并非仅仅指CSS模块化，还指的是HTML的模块化。那为什么要模块化？最主要特点是使各个部分相对独立，同时增加代码复用，最终目的是为了降低开发成本提升开发效率。

举个例子，当拿到一个项目的时候，扫一遍所有设计，就可以发现：
哦，一共有10种侧边栏设计，设计师就是把这10种侧边栏翻来覆去放在不同的页面中。那就很简单了，只要完成了这10种侧边栏，那么就算100个1000个页面也都是一样的，只要把HTML复制，粘贴就可以了。最大化的实现的代码复用。

鬼哥写过一篇文章来阐述这个问题：
http://www.cssforest.org/blog/index.php?id=134

2.面向对象的CSS

当进一步观察，很容易发现，有侧边栏都是有一个标题，再下面是是主面板，再有一类侧边栏是标签页的，下面展示的是新闻之类的内容。这个时候就完全可以抽象出两个类，一个是带标题的侧边栏（title_box），另一个是带标签的侧边栏(tab_box)。这样的好处是可以进一步抽象出代码，提高复用率。增加开发速度。
比如前者的HTML可以是这样的：

可能的CSS是：

.title_box {margin-bottom:10px;border:1px solid #aaa;}
.title_box h3{border-bottom:1px solid #aaa;}
.title_box .act{float:right}
.title_box .panel{margin:0 10px;}

为了保证代码的简洁易读，一些小的padding或者背景修饰我就不写了。
其中act是action的意思，这里偷学来的XD

是的，以上的HTML以及CSS代码就共同构建了一个基本的侧边栏类
他所具有的特诊是有边框，下面空开10px，右上角还有个“更多”

有同学可能会问，我为何要把act类放在那个span上而不是a上？为何要把panel放在一个div上？放在ul上不是可以减少代码么？这里我之所以这样写，是为了最少代码与开发成本之间平衡的考虑。所有成本中，人力成本是最高的，服务器有钱都可以加，但是代码得更快速的写出来才是要紧的。这么写的话可以最大保证通用性。同时，另一个理论用于支持这种写法的是：只有无语义的div和span适合拿来做布局，而有语义的元素不应当参与到布局中。当然，我这里只是一种权衡。

这么写是很灵活的一种写法。如果不需要“更多”，直接删除即可，如果不需要标题，直接删除即可。进一步来看，这段HTML可以应用到整个网站各个地方而不仅限于侧边栏。只要是形式相同的地方都可以用。

3.进一步实现继承和扩展

这里带来的一个问题是如何控制宽度。侧边栏和正文部分宽度不同，有些地方需求又各异，如何保证宽度？跳出思维局限来看，是不是所有某一宽度的div都同属一类？是的，他们是同一类的，所以只要定好了宽度，继承就可以了！

如果应用了栅格化布局，就能很容易理解这一点，那么上面的代码就应该是这样的

前面的g5就代表了其占了5个栅格！这个模块首先是占了5个格子的宽度，然后他是一个带标题的模块。进一步看，如果这个格子在不同的地方背景色不同，那可以继承了前面两个类的基础上，再加上一个 bg_blue于是这就成了：

没错，他就是一个占5个格子的带标题的模块，背景色是蓝色的。
好，可能他在某个地方是左浮动的，需要加上float:left，但不是所有的title_box都需要做浮动，那自然加上一个left类即可：

所以，挑选一个合适的基于栅格的框架很有意义，如YUI,BluePrint，或者OOCSS。
可以参考一下OOCSS，我很欣赏其中的思想
前端观察对其的介绍：http://www.qianduan.net/object-oriented-css.html

针对面向对象CSS的一个很好的PPT
http://www.slideshare.net/stubbornella/object-oriented-css

面向对象的CSS框架（OOCSS）的项目地址
http://wiki.github.com/stubbornella/oocss

我除了不喜欢其中到处都是为了圆角而设计的CSS之外，其他都很喜欢。

另外，写的时候，我搜索了一下，才发现这种思想08年初嗷嗷就已经有啦，我Out啦：
http://www.aoao.org.cn/blog/2008/01/oo-style/

4.这不是银弹

要坚信，在解决一个问题的同时必然会带来其他问题。

优先级问题
其中一个问题是优先级问题，由于模块细分，优先级很容易弄得焦头烂额。我的经验是每个类都负责一个部分——布局归布局，色彩背景归色彩背景。只有把各个类细分出来，才能避免样式的冲突。最后，id也是必不可少的。也需要important。比如上面，我就会定义一个noborder类，表示这个容器一定没有边框。用于个别地方是一个title_box但没有边框的情况。这个类里我就设置了

.noborder{border:0 !important;}

这样就能保证在任何时候，都不会有边框了。

同时，我对于文件规划，通常是一个页面只引入这个页面的css，比如首页的index.css
在这个css里再用import依次导入用于
重置的reset.css（重置标签类，其实一个标签本身不就是一个类么？div类，span类，本身就具有block或者inline属性，我们只是在其上面在扩展而已）
global.css（用于设置header和footer以及中间主体部分的布局，因为这两个部分一般整站是不会变的）
layout.css（用于设置栅格，构建内容以及侧边栏的宽度等。）
module.css（用于建立如title_box这种中等模块）
submod.css（这里放一些细节的模块，比如某一个新闻列表的完整细节样式设定）
如果模块较多，还可能分成若干的子块，侧边栏放侧边栏，中间的放中间。因为我相信绝大多数情况下侧边栏将永远是侧边栏，而不会跑到中间去。
如果有必要，也会建立form.css，专门设置表单元素，定义表单元素的外观。我会在里边设置一些 blue_btn，red_btn之类的class来定义不同颜色的button.
而后，在这个首页的index.css里写特定的样式。
这种规划的方法在很多文章中都能见到影子，如今再回头看，又有了更深一层的体会。

另外，import有潜在的性能问题。见这里。
只是我实在抵御不住import带来的便利性，在html里加入一堆的link是多么痛苦的事情。而且大多数时候对性能的要求没那么高，为此我宁可节约一点人力成本。这是种取舍，因网站需求而异。但总体顺序还是不变的。
而解决这个性能问题的方法是用 条件CSS，可以参考这里
和这里
id与class
命名的时候到底是以id为主，还是class为主，想必各位同学看到这里也该明白在下的观点了——以class为主，id为辅。因为同一段HTML可能用到页面的任何地方，而id在同页面里是不能重复的。而且，为了体现继承扩展的关系，应当使用class了。
那么id还用不用？当然要用，且不论id在写JS时候的速度，实际在写页面的时候，肯定会某一个模块做“个性化”定义，这就需要使用id了。个性化的东西写在id里，这样就不用担心干扰其他模块了，最大避免触一发动全身的窘境。通用与独立同在。

聪明的同学一定想到了什么，对，是不是记得曾经看到过启蒙读物上，一再强调，千万不要把一个类明明为left，因为指不准哪天他就不在左边了。不要定义为blue，因为哪天就改成红色了？是的，那个说没错，但我这里也没错。我们说的是两个东西。

修改CSS还是修改HTML

曾经看到的那些，都是建立在一旦HTML写完，需求变的时候不许改HTML，只许改CSS的基础上的。但实际上，又多少机会能让你只改CSS而不改动HTML的呢？另外，既然有一套完善的CSS了，为何不直接简单修改一下HTML呢？如果背景变变成了红色，我只需要修改一下class，从bg_blue改成bg_red就可以了，何乐而不为？由此看来，class取名成left和right并非很糟糕的决定，只要合理利用，完全可以应付多样的需求。

开发成本VS维护成本
这样做之后带来的问题就是开发成本与维护成本的矛盾。这样开发确实很快速。但问题是以前小改动起来是不需要动HTML的，而现在改一次就得改HTML，而这方面一旦页面做好后就可能归其他部门那边管了，修改测试上传都得惊动其他部门，这方面如何协调是一个问题。
换句话说：面向对象CSS保持CSS框架不变而修改HTML，而原先那种是保持HTML不变而修改CSS
这方面我没有太多经验，欢迎大家探讨。
Twinsen有过类似的探讨( http://www.twinsenliang.net/skill/20081129.html ) 他就很反对这么来。
其中的大部分观点都赞同，只是最近我也在反思：
到底多大机会能让我碰上“left_box”和“right_box”的互换。全站的blue_button换成红色呢？
如果只是一两个页面的话，修改CSS的成本更低，还是保持CSS不动修改HTML的成本更低？

增加学习成本
当公司招募新人的时候，不得不对其进行培训，以使其学会使用这套自建的框架体系。但带来的好处是使整个网站风格统一，给进一步维护带来方便。所以我认为增加的这点学习成本是值得的。
同时，如果你都已经跳槽到别处了，没留下好的文档，人家学不会也没关系。直接抛开这套体系也能过日子。因为本身这套体系是从reset开始对各个标签初始化对象的，而后逐渐增加class以扩展对应属性。
也就是说，新人也可以抛开这套东西，直接用自己的写法来写。当然，这好不好已经不在今天的讨论范围了。这里只是为了说：这个框架也可以让新手不管这些约束直接写自己的。

class过长导致文件过大
这可以通过压缩来解决。用正则找出css和html中所有的class，以出现频率排序，然后分别从abcdeft…开始，先单字母，后双字母 a一直到zz应该有26*27种组合，足够一般网站应用了。google应该也是这样做的。抱歉这段时间比较慢，代码就没写了。

副作用：js必须用id而不是class了，否则压缩后会找不到对应的class
解决思路：约定JS中保存class的字符串变量为 foo_cls=”bar”，那么只要用正则找到对应_cls结尾的变量进行对应替换即可。
这本身是面向对象的CSS，而进一步压缩这里仅提供一种思路。

总结

结构和样式分离是好事，我这里提出的观点反而有点逆潮流，试图通过HTML中的class属性来控制表现。我认为这是一种理性回归，至少我们不用一个ID下面写一堆的针对他的样式，冗余，容易出错，效率还高。同时这种方式与直接在元素上写style也是有本质区别的，模块化，面向对象的思想体现在其中，合理控制每一个类的颗粒度，或者说控制范围。
我这种介于结构—样式的完全分离与结构—样式完全整合之间的一种状态，试图寻找一种平衡，提升开发效率并降低维护成本。

谨以此文做以探讨。

扩展阅读

重构之美－跨越Web标准，触碰语义网[分离：通用也许是个美丽陷阱] ——另一个反对的声音
面向对象的CSS－－OOCSS 国人写的通过JS增加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，可以用于任何项目。另一个是用于特定项目的“reset”，自定义修改的内容，这些内容可以放在layout.css、typography.css之类的文件中，他们共同导入到一个base.css形成一个项目的基础样式。本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。

1，基础
牛顿是站在巨人伽利略的肩膀上的，我们也可以这么做。首先我们要选定一个前进的基础。
请永远不要使用
* { margin: 0; padding: 0; }
这问题太多了，在此不多加表述。

目前比较流行的有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。

2，默认色彩
对于页面是不是有默认背景色和前景色，YUI和Eric有着不同的看法。
YUI重置背景色为白色而文字颜色为黑色。

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

而Eric在当前最新版中让所有颜色为透明，他认为透明才是最原始的颜色。虽然他曾一度认为也应当设置白色背景色、黑色文字颜色。至于最后为什么改了，Eric并没有给出具体理由。

这个问题我基本认为是用户自定义的更重要还是你的设计更重要的问题。我个人的观点是，如果你的设计本身就是白色背景，那么不要设置背景。一小部分中高水平的用户，他们会自定义网页默认背景色。设置成他们喜欢的背景色，比如浅蓝色。基本常见的浏览器都提供了这个简单的功能。而我们的背景色重置则会破坏用户的选择——尽管这样能保证你的设计原汁原味的呈现给所有用户。当然我知道，更高端的用户会用Stylish之类的Firefox扩展来自定义页面。但不得不说，只会用“选项”来调背景色的用户更多，不是么？而同时，如果设计本身就有其他背景色，比如黑色、蓝色、绿色之类的，OK，这些设计当然可以设置背景色。但请不要放进reset.css里。这里是重置样式的地方，不是你设计的地方。请把你的设计放在更广袤的土地上。
所以，简单说来，NO，不要在reset中设置背景色。

那么，文字颜色呢？原则上来说，也是不应该设置文字颜色的。但是IE中的表单元素中legend这个对象比较特别，跟主题结合的比较紧密。legend会默认有自己的颜色（跟当前的主题有关）而不会继承父元素的颜色（即便设了color:inherit;）。
从某些角度来说，可以想当然地认为设置字体颜色人数远小于设置背景色的人数；以及认为就算设置了背景色，人们看到legend元素是黑色的也不会觉得奇怪。因此，YUI在其reset中设置了legend {color: #000;}是无可厚非的。
但反过来说，把这个放到typography.css或者form.css里岂不是更好？不同的页面设计，其对legend的色彩要求很可能是不同的，放在reset.css里重复定义是没有必要的。因此这条CSS规则可以作为在reset.css之后首先应当设置的规则。

3，padding和margin
曾经一度流行的* { margin: 0; padding: 0; }也就是出于这个目的。让各个元素的padding和margin都归零，尤其是那些h1和p以及ul/ol/li之类的元素，还有，body本身也是有margin的。清除元素的padding和margin是很有用的。
YUI这样做：

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

而Eric这样做：

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, 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把几乎所有的元素都写上了规则。而YUI只把有padding和margin的元素清空样式，而其他元素则不动。我个人比较偏好YUI的做法，因为他这样可以避免给一些无关元素带上不必要的样式。导致元素过多时的性能下降。但Eric的也有可取之处，他这样写，整个reset.css可以小上不少字节，对服务器的压力会小一些。但进一步想，这种做法跟用 * 来选择所有元素还有什么区别呢？这已经几乎囊括了所有元素了！你怎么用呢？看你自己喜好了。

4，边框
YUI里：

fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}

Eric已经在上一条中把所有的边框都清掉了，还是推荐用YUI的，理由同上。

5，外边框(outline)
这个就是元素获取焦点时的虚线框，在ie之外的浏览器上可以像下面Eric做的那样，通过设置outline来消除。

/* remember to define focus styles! */
:focus {
outline: 0;
}

而YUI则没有设置这一条。而在Eric的样式中，可以看到Eric的提醒：务必重新定义获取焦点后的样式！
这点其实很重要，出于可访问性的角度出发，那些不便于使用鼠标的人基本上都是用tab导航来浏览网页的。获取焦点的元素有特定样式的话可以极大帮助这类群体的用户，通常建议设置成跟:hover一样。经常设计上会因为这个虚线框而大打折扣。因此这条保留在reset中，并且作为reset.css之后及早定义的规则。

另外，对于在Firefox之类的支持outline的浏览其中，除了获取焦点的元素外，浏览器本身并没有给元素设置outline属性，所以，像Eric那样把所有元素的outline设成0，我就觉得没有太大必要了。

6，字体样式(font style/weight/size/variant)
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则在他最终版的reset中去掉了关于这些的样式重置，只保留了 font-size: 100%; 同样他没有给出具体理由。
但通常情况下，我认为还是重置一下这些样式好，比如strong元素，很多时候只是语义而已，并非希望他真的加粗。可能会有背景色或者其他方式来强调。而之所以这里都用了inherit这个继承属性而不是定义 font-weight: normal; 可以在 Eric 先前的reset文章中看到。这是为了防止——父元素字体加粗了，而没有一个子元素继承加粗属性（因为设置了normal）——这种情况的发生。所以把YUI中设置h1-h6的样式以及abbr和acronym的两句样式都改成inherit会比较好。

此外，对于h1-h6的字体大小定义，建议放到专门的typography.css里，不建议放在reset.css里。所以这里我同样倾向于用YUI的策略，全部重置。

但是很不幸，在ie6/ie7当中，不论是strong还是h1-h6,亦或是em等元素，设置了inherit均无法继承父元素属性，依然保持自己的特色。这就带来了浏览器差异，样式重置本身是为了避免浏览器差异的，但现在带来了浏览器差异，是万万不可取的。对于这个问题我考虑了很久，到底是为了统一所有浏览器都重置成normal（YUI的想法），还是放弃重置这些元素，让他们顺其自然，来保证在所有浏览器中样式一样（Eric的想法）。我最后决定采用YUI的做法。因为，无论重置成normal还是不重置，这些元素都无法继承父元素属性。既然如此，那么退而求其次，保证这些元素都恢复到普通外观，避免在设计的时候还要重置样式。
不得不说，这种妥协是仅仅针对IE6和IE7的，也许在5年后，老板和客户都不要求支持IE7的时候，我们可以放心大胆得使用inherit了。

此外，YUI并没有给code kbd samp tt 这几个元素重置字体大小。但实际上在IE中，他们都会被缩小显示。所以此处应当给予重置font-size: 100%;

7，行高(line-height)
对于行高，YUI并没有给出重置定义，而Eric则给出了重置：

body {
line-height: 1;
}

行高默认所有元素都会继承的，所以给body设置行高为1就足够了。通常行高设为1时候，英文照常阅读，但中文就无法阅读了，行间距过于紧密导致容易看错行。通常在中文环境下得设置1.4到1.5才能是用户正常阅读。我建议是1.5，这样算出来的值也是整数。比如字体大小12px的时候行高是18px，字体大小16px时行高24px。看起来也会比较舒服。此外，还有一个不设置成1的重要原因是：IE下，行高为1时，中文字顶部会被削掉几像素，字体加粗时尤为明显。所以，重置的原则是好的，但切不可重置为1。

8，列表样式
YUI用了：

li {
list-style: none;
}

Eric用了：

ol, ul {
list-style: none;
}

尽管我没有测试出YUI的有什么问题，但我始终觉得设置ol和ul会比较稳妥。而且，波及的元素更少，性能应该更高一点。虽然下载量会多3字节。

9，表格元素
在表格方面，都比较统一。均是：

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Eric还提醒到，需要在html中设置cellspacing=”0″ 来达到完美重置效果。
但此外YUI还设置了

caption, th {
text-align: left;
}

让caption和th元素不要居中。作为重置，是可取的。建议添加此规则。

10，上下标以及baseline
YUI写成

sup {
vertical-align: baseline;
}

sub {
vertical-align: baseline;
}

似乎没有优化，不知道为何没有写到一起去。而Eric则在最开始那条中就已经定义。而其中的问题是，YUI这样定义了，但没有重置字体大小，这点是有所遗憾的。既然是重置样式，就彻底一些，所以建议改成这样的：

sup, sub {
font-size: 100%;
vertical-align: baseline;
}

同样对于Eric把所有元素都放到了Baseline上，包括上标下标。Eric的解释是，强制让设计师精确定位这些元素的垂直偏移。

11，插入和删除(ins/del)
对于这个问题，YUI直接清除了ins的下划线和del的删除线这两个文本装饰：

del, ins {
text-decoration: none;
}

而Eric保留了删除线：

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

如何取舍？我选择Eric的，为什么我这里不追求完美的样式重置了呢？很简单，我这个reset的目标是为了让我们写页面的时候尽量避免浏览器默认样式，以及不同浏览器之间默认样式差异带来的问题。而del元素删除线的文本装饰，我相信没有人会反对的。有人会加上其他样式，比如字体变淡之类的，但对于del如此强语义的元素来说，没有什么比用删除线更能表达含义的了。而不像上面那个focus样式，未必人人喜欢虚线框。但似乎又没有什么浏览器默认不给del元素加删除线，故这条可以省略。
所以，这里我只重置ins样式，别忘了给ins元素在等下也添加一些样式。

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

15，完成一个初步的CSS框架
之前提到了，样式重置作为一个所有项目可以使用的共性存在，而不同的项目应当有其个性。当然还有其他一些共性，不属于样式重置的部分，但同样重要。再往下讲就可以做一个CSS框架了。CSS框架所要考虑的内容远比一个CSS Reset要考虑的多很多，这里只是点到为止，不做更多展开。

layout.css
首先除了reset.css之外要建立的layout.css，这里目前主要推荐放入.clearfix。清除浮动很重要。但这不属于样式重置，放在布局当中正合适。

.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 */

此外，layout.css中还可以放入自己常用的布局，比如 #wrap{margin:0 auto;width:960px;}之类的规则。看个人喜好而定。

typography.css
这里可以放置很多规则，非常重要的是以下三个：
:focus, a, ins
这三个是被重置掉的，但又很重要的内容，建议在reset之后立即在typography中设定全站样式，保持样式统一。
ins可以单独设置， :focus 最好设置成跟 :hover一样，而a的样式还是按照LoVe,HAte的法则来设置。

h1-h6系列也是之前被重置掉的。可以考虑在这里设置样式。按站点特性来定。我个人是不喜欢全局定义hx系列的字体大小的，统一为100%我觉得挺好。

接下来要设置的是font-family属性，可以参考射雕的文章。另外，小麦的文章中提到，表单元素的字体在IE中都不能继承父元素的字体，所以要单独设置。

至于其他需要全局设置的，可以参考前文中的叙述，找到相应的部分添加到typography.css中即可。这样就可以在保证reset.css通用性的情况下，使不同的项目又有个性。尽量保证reset.css在所有项目中都是一样的。有利于项目的开发。最后不要忘记在写表格的时候加cellspacing=”0″ 来达到完美重置效果。

16，探讨
文章写的比较仓促，也受限与本人能力所限，只能写到这里。欢迎留言探讨，也可发邮件或上Twitter找我。以便进一步完善这个reset。谢谢。

今天遇到这个问题
描述起来也蛮麻烦的
搜也搜不到，所以问了群里的朋友，
感谢Robin还有$一揪就出来，
他俩对此问题进行了深入的讨论，
感谢他们细心解答，真相才得以水落石出。
最后本文采用了$一揪就出来的方法：

如下代码

这里看不见，确可以复制到选中前边的框子，然后复制吧。
你可以复制所有本文

给最开始的span设置了text-indent属性之后，导致了整个父元素p的text-indent属性
IE6/7都确认有这个bug，可以说是一种反继承。

解决的方法是多一个标签,避开问题多多的text-indent，
设置内层标签的行高,以及padding-left。就能够大致解决问题了。
即保证了效果，也保证了文本的不丢失，为残障人士，搜索引擎，以及想要复制文章的人给予方便。
至少可以不用空格了，使用空格虽然可以轻松达到效果，无需使用text-indent了，但这显然不好。

这里看不见，确可以复制到。选中前边的框子，然后复制吧
你可以复制所有本文

今日出现个离奇的问题
IE下设置了button 如下css
button{border: none;background-image: url(button_gray_4.gif);}

结果发现IE下按钮始终是系统默认样式，并非我设定的样式。

捣鼓了半天，发现如果这样设
button{border: none;background: url(button_gray_4.gif);}

就又离奇的行了。真是莫名的……
同时也发现，这个跟最开始的dtd声明有关，如果去除了顶部的

，也就有效了。。。无语啊。。。

而如果对button 的border先设一个的话，也会有效：比如
border: 1px;border:none;background-image: url(button_gray_4.gif);

但如果图片不存早的话，表现效果也不相同……

无背景图
有背景图
有背景图