本文就是來(lái)介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對(duì)不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
3、padding和margin
曾經(jīng)一度流行的
* { margin: 0; padding: 0; }
也就是出于這個(gè)目的。讓各個(gè)元素的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的元素清空樣式，而其他元素則不動(dòng)。我個(gè)人比較偏好YUI的做法，因?yàn)樗@樣可以避免給一些無(wú)關(guān)元素帶上不必要的樣式。導(dǎo)致元素過(guò)多時(shí)的性能下降。但Eric的也有可取之處，他這樣寫，整個(gè)reset.css可以小上不少字節(jié)，對(duì)服務(wù)器的壓力會(huì)小一些。但進(jìn)一步想，這種做法跟用 * 來(lái)選擇所有元素還有什么區(qū)別呢？這已經(jīng)幾乎囊括了所有元素了！你怎么用呢？看你自己喜好了。
4、邊框
YUI里：
fieldset, img {
border: 0;
}
abbr, acronym {
border: 0;
font-variant: normal;
}
Eric已經(jīng)在上一條中把所有的邊框都清掉了，還是推薦用YUI的，理由同上。
5、外邊框(outline)
這個(gè)就是元素獲取焦點(diǎn)時(shí)的虛線框，在ie之外的瀏覽器上可以像下面Eric做的那樣，通過(guò)設(shè)置outline來(lái)消除。
/* remember to define focus styles! */
:focus {
outline: 0;
}
而YUI則沒(méi)有設(shè)置這一條。而在Eric的樣式中，可以看到Eric的提醒：務(wù)必重新定義獲取焦點(diǎn)后的樣式！
這點(diǎn)其實(shí)很重要，出于可訪問(wèn)性的角度出發(fā)，那些不便于使用鼠標(biāo)的人基本上都是用tab導(dǎo)航來(lái)瀏覽網(wǎng)頁(yè)的。獲取焦點(diǎn)的元素有特定樣式的話可以極大幫助這類群體的用戶，通常建議設(shè)置成跟:hover一樣。經(jīng)常設(shè)計(jì)上會(huì)因?yàn)檫@個(gè)虛線框而大打折扣。因此這條保留在reset中，并且作為reset.css之后及早定義的規(guī)則。
另外，對(duì)于在Firefox之類的支持outline的瀏覽其中，除了獲取焦點(diǎn)的元素外，瀏覽器本身并沒(méi)有給元素設(shè)置outline屬性，所以，像Eric那樣把所有元素的outline設(shè)成0，我就覺(jué)得沒(méi)有太大必要了。

最新評(píng)論