本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
0、引言
每每有新項目，第一步就是應(yīng)當(dāng)使用一個reset.css來重置樣式。濫用不如不用，直接拿個現(xiàn)成的reset.css過來將導(dǎo)致后期各種離奇bug的發(fā)生。所以最好還是自己寫一個reset.css，并且要明白每一條reset都是用來做什么的。reset.css本意就是重置樣式，我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進typography.css。 具體如何規(guī)劃網(wǎng)站CSS結(jié)構(gòu)，不在文本討論之列，可以參考Smashing Magazine上的文章，國內(nèi)有差強人意的中文譯版。注意，本文把reset分成了兩個部分，一個是純reset.css，可以用于任何項目。另一個是用于特定項目的“reset”，自定義修改的內(nèi)容，這些內(nèi)容可以放在layout.css、typography.css之類的文件中，他們共同導(dǎo)入到一個base.css形成一個項目的基礎(chǔ)樣式。本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
1、基礎(chǔ)
牛頓是站在巨人伽利略的肩膀上的，我們也可以這么做。首先我們要選定一個前進的基礎(chǔ)。
請永遠(yuǎn)不要使用
* { margin: 0; padding: 0; }
這問題太多了，在此不多加表述。
目前比較流行的有Eric Meyer的重置樣式和YUI的重置樣式。另有Condensed Meyer Reset簡化Eric Meyer的樣式。有趣的是，Eric的重置樣式也是源于YUI的。而那份簡化版又把Eric的樣式簡化回YUI的樣式了 。但同時，糟糕的是，網(wǎng)上流傳的比較廣的(尤其是國內(nèi))都不是最新的版本。上面兩個頁面里直接看到的都不是最新的，Eric專門為有一個reset.css頁面。而YUI當(dāng)前版本(2.7.0)的reset.css實際地址里，比上面的頁面中還多一些東西。此外，我們還可以基于一些常見的框架，比較著名的比如Blueprint或者Elements CSS Framework（這個的reset也是源自于Eric Meyer的）。OK，準(zhǔn)備工作就差不多了。以上這些都可以作為參考資料來組織我們自己的reset。我這里主要采用YUI，兼帶Eric的reset。
2、默認(rèn)色彩
對于頁面是不是有默認(rèn)背景色和前景色，YUI和Eric有著不同的看法。
YUI重置背景色為白色而文字顏色為黑色。
html {
color: #000;
background: #FFF;
}
而Eric在當(dāng)前最新版中讓所有顏色為透明，他認(rèn)為透明才是最原始的顏色。雖然他曾一度認(rèn)為也應(yīng)當(dāng)設(shè)置白色背景色、黑色文字顏色。至于最后為什么改了，Eric并沒有給出具體理由。
這個問題我基本認(rèn)為是用戶自定義的更重要還是你的設(shè)計更重要的問題。我個人的觀點是，如果你的設(shè)計本身就是白色背景，那么不要設(shè)置背景。一小部分中高水平的用戶，他們會自定義網(wǎng)頁默認(rèn)背景色。設(shè)置成他們喜歡的背景色，比如淺藍(lán)色。基本常見的瀏覽器都提供了這個簡單的功能。而我們的背景色重置則會破.壞用戶的選擇——盡管這樣能保證你的設(shè)計原汁原味的呈現(xiàn)給所有用戶。當(dāng)然我知道，更高端的用戶會用Stylish之類的Firefox擴展來自定義頁面。但不得不說，只會用“選項”來調(diào)背景色的用戶更多，不是么？而同時，如果設(shè)計本身就有其他背景色，比如黑色、藍(lán)色、綠色之類的，OK，這些設(shè)計當(dāng)然可以設(shè)置背景色。但請不要放進reset.css里。這里是重置樣式的地方，不是你設(shè)計的地方。請把你的設(shè)計放在更廣袤的土地上。
所以，簡單說來，NO，不要在reset中設(shè)置背景色。
那么，文字顏色呢？原則上來說，也是不應(yīng)該設(shè)置文字顏色的。但是IE中的表單元素中l(wèi)egend這個對象比較特別，跟主題結(jié)合的比較緊密。legend會默認(rèn)有自己的顏色（跟當(dāng)前的主題有關(guān)）而不會繼承父元素的顏色（即便設(shè)了color:inherit;）。
從某些角度來說，可以想當(dāng)然地認(rèn)為設(shè)置字體顏色人數(shù)遠(yuǎn)小于設(shè)置背景色的人數(shù)；以及認(rèn)為就算設(shè)置了背景色，人們看到legend元素是黑色的也不會覺得奇怪。因此，YUI在其reset中設(shè)置了legend {color: #000;}是無可厚非的。
但反過來說，把這個放到typography.css或者form.css里豈不是更好？不同的頁面設(shè)計，其對legend的色彩要求很可能是不同的，放在reset.css里重復(fù)定義是沒有必要的。因此這條CSS規(guī)則可以作為在reset.css之后首先應(yīng)當(dāng)設(shè)置的規(guī)則。
#p#
本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
3、padding和margin
曾經(jīng)一度流行的
* { margin: 0; padding: 0; }
也就是出于這個目的。讓各個元素的padding和margin都?xì)w零，尤其是那些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把幾乎所有的元素都寫上了規(guī)則。而YUI只把有padding和margin的元素清空樣式，而其他元素則不動。我個人比較偏好YUI的做法，因為他這樣可以避免給一些無關(guān)元素帶上不必要的樣式。導(dǎo)致元素過多時的性能下降。但Eric的也有可取之處，他這樣寫，整個reset.css可以小上不少字節(jié)，對服務(wù)器的壓力會小一些。但進一步想，這種做法跟用 * 來選擇所有元素還有什么區(qū)別呢？這已經(jīng)幾乎囊括了所有元素了！你怎么用呢？看你自己喜好了。
4、邊框
YUI里：
fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
Eric已經(jīng)在上一條中把所有的邊框都清掉了，還是推薦用YUI的，理由同上。
5、外邊框(outline)
這個就是元素獲取焦點時的虛線框，在ie之外的瀏覽器上可以像下面Eric做的那樣，通過設(shè)置outline來消除。
/* remember to define focus styles! */
:focus {
outline: 0;
}
而YUI則沒有設(shè)置這一條。而在Eric的樣式中，可以看到Eric的提醒：務(wù)必重新定義獲取焦點后的樣式！
這點其實很重要，出于可訪問性的角度出發(fā)，那些不便于使用鼠標(biāo)的人基本上都是用tab導(dǎo)航來瀏覽網(wǎng)頁的。獲取焦點的元素有特定樣式的話可以極大幫助這類群體的用戶，通常建議設(shè)置成跟:hover一樣。經(jīng)常設(shè)計上會因為這個虛線框而大打折扣。因此這條保留在reset中，并且作為reset.css之后及早定義的規(guī)則。
另外，對于在Firefox之類的支持outline的瀏覽其中，除了獲取焦點的元素外，瀏覽器本身并沒有給元素設(shè)置outline屬性，所以，像Eric那樣把所有元素的outline設(shè)成0，我就覺得沒有太大必要了。
#p#
本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
6、字體樣式(font style/weight/size/variant)
YUI里，分成了多條：
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: inherit;
font-weight: inherit;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
Eric則在他最終版的reset中去掉了關(guān)于這些的樣式重置，只保留了
font-size: 100%;
理由見下文。
但通常情況下，我認(rèn)為還是重置一下這些樣式好，比如strong元素，很多時候只是語義而已，并非希望他真的加粗?？赡軙斜尘吧蛘咂渌绞絹韽娬{(diào)。而之所以這里都用了inherit這個繼承屬性而不是定義
font-weight: normal;
可以在 Eric 先前的reset文章 中看到。這是為了防止——父元素字體加粗了，而沒有一個子元素繼承加粗屬性（因為設(shè)置了normal）——這種情況的發(fā)生。所以把YUI中設(shè)置h1-h6的樣式以及abbr和acronym的兩句樣式都改成inherit會比較好。
此外，對于h1-h6的字體大小定義，建議放到專門的typography.css里，不建議放在reset.css里。所以這里我同樣傾向于用YUI的策略，全部重置。
但是很不幸，在ie6/ie7當(dāng)中，不論是strong還是h1-h6,亦或是em等元素，設(shè)置了inherit均無法繼承父元素屬性，依然保持自己的特色。這就帶來了瀏覽器差異，樣式重置本身是為了避免瀏覽器差異的，但現(xiàn)在帶來了瀏覽器差異，是萬萬不可取的。對于這個問題我考慮了很久，到底是為了統(tǒng)一所有瀏覽器都重置成normal（YUI的想法），還是放棄重置這些元素，讓他們順其自然，來保證在所有瀏覽器中樣式一樣（Eric的想法）。我最后決定采用YUI的做法。因為，無論重置成normal還是不重置，這些元素都無法繼承父元素屬性。既然如此，那么退而求其次，保證這些元素都恢復(fù)到普通外觀，避免在設(shè)計的時候還要重置樣式。
不得不說，這種妥協(xié)是僅僅針對IE6和IE7的，也許在5年后，老板和客戶都不要求支持IE7的時候，我們可以放心大膽得使用inherit了。
此外，YUI并沒有給code kbd samp tt 這幾個元素重置字體大小。但實際上在IE中，他們都會被縮小顯示。所以此處應(yīng)當(dāng)給予重置font-size: 100%;
7、行高(line-height)
對于行高，YUI并沒有給出重置定義，而Eric則給出了重置：
body {
line-height: 1;
}
行高默認(rèn)所有元素都會繼承的，所以給body設(shè)置行高為1就足夠了。通常行高設(shè)為1時候，英文照常閱讀，但中文就無法閱讀了，行間距過于緊密導(dǎo)致容易看錯行。通常在中文環(huán)境下得設(shè)置1.4到1.5才能是用戶正常閱讀。我建議是1.5，這樣算出來的值也是整數(shù)。比如字體大小12px的時候行高是18px，字體大小16px時行高24px?？雌饋硪矔容^舒服。此外，還有一個不設(shè)置成1的重要原因是：IE下，行高為1時，中文字頂部會被削掉幾像素，字體加粗時尤為明顯。所以，重置的原則是好的，但切不可重置為1。
#p#
本文就是來介紹如何寫一個合適所有項目的通用的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" 來達(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這樣定義了，但沒有重置字體大小，這點是有所遺憾的。既然是重置樣式，就徹底一些，所以建議改成這樣的：
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
同樣對于Eric把所有元素都放到了Baseline上，包括上標(biāo)下標(biāo)。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的目標(biāo)是為了讓我們寫頁面的時候盡量避免瀏覽器默認(rèn)樣式，以及不同瀏覽器之間默認(rèn)樣式差異帶來的問題。而del元素刪除線的文本裝飾，我相信沒有人會反對的。有人會加上其他樣式，比如字體變淡之類的，但對于del如此強語義的元素來說，沒有什么比用刪除線更能表達(dá)含義的了。而不像上面那個focus樣式，未必人人喜歡虛線框。但似乎又沒有什么瀏覽器默認(rèn)不給del元素加刪除線，故這條可以省略。
所以，這里我只重置ins樣式，別忘了給ins元素在等下也添加一些樣式。
#p#
本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
12、引用元素的引號
某些瀏覽器中，q或者blockquote前后會出現(xiàn)引號。這個并不是誰都喜歡的。所以需要重置他。
YUI的比較簡單，只重置了q：
q:before,
q:after {
content: '';
}
而Eric則比較周到，把q和blockquote都重置了。
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
OK，就決定用Eric的了，對于樣式重置，細(xì)致一點周到一點總沒有錯。
13、鏈接
對于鏈接，YUI和Eric都沒有采取樣式重置，但從我思考許久后還是決定把鏈接樣式重置放進來。究其原因，還是因為樣式重置一來要徹底，二來對于鏈接樣式并非所有設(shè)計師都喜歡用下劃線裝飾。因此，我還是建議把鏈接的下劃線重置掉。
a {
text-decoration: none;
}
但這樣做有點粗糙。真正有下劃線樣式的其實只有 :link和:visited所以改成下面這樣比較好：
:link, :visited {
text-decoration: none;
}
此外，對于鏈接顏色，可以作為reset后急需設(shè)置的規(guī)則來處理。直接放入reset.css中不是很合適。
14、我的重置樣式
總結(jié)上面種種規(guī)則，這里給出一下我的CSS重置規(guī)則，BSD協(xié)議發(fā)布，請隨意使用。測試樣本（這個是從 YUI那里復(fù)制過來的 ，感謝YUI為此做出的貢獻(xiàn)。）
下載：reset.css reset-min.css
/*
Copyright (c) 2009, Shawphy(shawphy.com). All rights reserved.
http://shawphy.com/2009/03/my-own-reset-css.html
Based on YUI http://developer.yahoo.com/yui/reset/
and Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
Licensed under the BSD License:
http://creativecommons.org/licenses/BSD/
version: 1.1 | 20090303
*/
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;
}
fieldset, img {
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
address, caption, cite, code, dfn,
em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
input, button, textarea,
select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
code, kbd, samp, tt {
font-size: 100%;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
*font-size: 100%;
}
body {
line-height: 1.5;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* remember to highlight anchors and inserts somehow! */
:link, :visited , ins {
text-decoration: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
#p#
本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項目要首先要設(shè)置的內(nèi)容。
15、完成一個初步的CSS框架
之前提到了，樣式重置作為一個所有項目可以使用的共性存在，而不同的項目應(yīng)當(dāng)有其個性。當(dāng)然還有其他一些共性，不屬于樣式重置的部分，但同樣重要。再往下講就可以做一個CSS框架了。CSS框架所要考慮的內(nèi)容遠(yuǎn)比一個CSS Reset要考慮的多很多，這里只是點到為止，不做更多展開。
layout.css
首先除了reset.css之外要建立的layout.css，這里目前主要推薦放入.clearfix。清除浮動很重要。但這不屬于樣式重置，放在布局當(dāng)中正合適。
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
此外，layout.css中還可以放入自己常用的布局，比如
#wrap{margin:0 auto;width:960px;}
之類的規(guī)則?？磦€人喜好而定。
typography.css
這里可以放置很多規(guī)則，非常重要的是以下三個：
:focus, a, ins
這三個是被重置掉的，但又很重要的內(nèi)容，建議在reset之后立即在typography中設(shè)定全站樣式，保持樣式統(tǒng)一。
ins可以單獨設(shè)置， :focus 最好設(shè)置成跟 :hover一樣，而a的樣式還是按照LoVe,HAte的法則來設(shè)置。
h1-h6系列也是之前被重置掉的?？梢钥紤]在這里設(shè)置樣式。按站點特性來定。我個人是不喜歡全局定義hx系列的字體大小的，統(tǒng)一為100%我覺得挺好。
接下來要設(shè)置的是font-family屬性，可以參考 射雕的文章 。另外，小麥的文章 中提到，表單元素的字體在IE中都不能繼承父元素的字體，所以要單獨設(shè)置。
至于其他需要全局設(shè)置的，可以參考前文中的敘述，找到相應(yīng)的部分添加到typography.css中即可。這樣就可以在保證reset.css通用性的情況下，使不同的項目又有個性。盡量保證reset.css在所有項目中都是一樣的。有利于項目的開發(fā)。最后不要忘記在寫表格的時候加cellspacing="0" 來達(dá)到完美重置效果。
16、探討
文章寫的比較倉促，也受限與本人能力所限，只能寫到這里。歡迎留言探討，也可發(fā)郵件或上Twitter找我。以便進一步完善這個reset。謝謝。
原文地址： http://shawphy.com/2009/03/my-own-reset-css.html

最新評論