本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
8、列表樣式
YUI用了：
li {
list-style: none;
}
Eric用了：
ol, ul {
list-style: none;
}
盡管我沒有測試出YUI的有什么問題，但我始終覺得設(shè)置ol和ul會比較穩(wěn)妥。而且，波及的元素更少，性能應(yīng)該更高一點。雖然下載量會多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" 來達到完美重置效果。
但此外YUI還設(shè)置了
caption, th {
text-align: left;
}
讓caption和th元素不要居中。作為重置，是可取的。建議添加此規(guī)則。
10、上下標以及baseline
YUI寫成
sup {
vertical-align: baseline;
}
sub {
vertical-align: baseline;
}
似乎沒有優(yōu)化，不知道為何沒有寫到一起去。而Eric則在最開始那條中就已經(jīng)定義。而其中的問題是，YUI這樣定義了，但沒有重置字體大小，這點是有所遺憾的。既然是重置樣式，就徹底一些，所以建議改成這樣的：
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
同樣對于Eric把所有元素都放到了Baseline上，包括上標下標。Eric的解釋是，強制讓設(shè)計師精確定位這些元素的垂直偏移。
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元素在等下也添加一些樣式。

最新評論