CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

编写适合所有项目的通用的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元素在等下也添加一些样式。