编写适合所有项目的通用的reset.css

本文就是来介绍如何写一个合适所有项目的通用的reset.css，以及介绍在设置玩reset.css之后需要针对不同项目要首先要设置的内容。
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元素在等下也添加一些样式。

最新评论