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,我就觉得没有太大必要了。
出处:蓝色理想
责任编辑:bluehearts
上一页 打造自己的Reset.css [1] 下一页 打造自己的Reset.css [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|