本文就是來(lái)介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對(duì)不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
8、列表樣式
YUI用了：
li {
list-style: none;
}
Eric用了：
ol, ul {
list-style: none;
}
盡管我沒有測(cè)試出YUI的有什么問題，但我始終覺得設(shè)置ol和ul會(huì)比較穩(wěn)妥。而且，波及的元素更少，性能應(yīng)該更高一點(diǎn)。雖然下載量會(huì)多3字節(jié)。
9、表格元素
在表格方面，都比較統(tǒng)一。均是：
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Eric還提醒到，需要在html中設(shè)置cellspacing="0" 來(lái)達(dá)到完美重置效果。
但此外YUI還設(shè)置了
caption, th {
text-align: left;
}
讓caption和th元素不要居中。作為重置，是可取的。建議添加此規(guī)則。
10、上下標(biāo)以及baseline
YUI寫成
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}
似乎沒有優(yōu)化，不知道為何沒有寫到一起去。而Eric則在最開始那條中就已經(jīng)定義。而其中的問題是，YUI這樣定義了，但沒有重置字體大小，這點(diǎn)是有所遺憾的。既然是重置樣式，就徹底一些，所以建議改成這樣的：
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
同樣對(duì)于Eric把所有元素都放到了Baseline上，包括上標(biāo)下標(biāo)。Eric的解釋是，強(qiáng)制讓設(shè)計(jì)師精確定位這些元素的垂直偏移。
11、插入和刪除(ins/del)
對(duì)于這個(gè)問題，YUI直接清除了ins的下劃線和del的刪除線這兩個(gè)文本裝飾：
del, ins {
text-decoration: none;
}
而Eric保留了刪除線：
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
如何取舍？我選擇Eric的，為什么我這里不追求完美的樣式重置了呢？很簡(jiǎn)單，我這個(gè)reset的目標(biāo)是為了讓我們寫頁(yè)面的時(shí)候盡量避免瀏覽器默認(rèn)樣式，以及不同瀏覽器之間默認(rèn)樣式差異帶來(lái)的問題。而del元素刪除線的文本裝飾，我相信沒有人會(huì)反對(duì)的。有人會(huì)加上其他樣式，比如字體變淡之類的，但對(duì)于del如此強(qiáng)語(yǔ)義的元素來(lái)說(shuō)，沒有什么比用刪除線更能表達(dá)含義的了。而不像上面那個(gè)focus樣式，未必人人喜歡虛線框。但似乎又沒有什么瀏覽器默認(rèn)不給del元素加刪除線，故這條可以省略。
所以，這里我只重置ins樣式，別忘了給ins元素在等下也添加一些樣式。

最新評(píng)論