編寫適合所有項(xiàng)目的通用的reset.css

2024-07-11 08:24:16

字體：大中小

供稿：網(wǎng)友

本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
0、引言
每每有新項(xiàng)目，第一步就是應(yīng)當(dāng)使用一個(gè)reset.css來重置樣式。濫用不如不用，直接拿個(gè)現(xiàn)成的reset.css過來將導(dǎo)致后期各種離奇bug的發(fā)生。所以最好還是自己寫一個(gè)reset.css，并且要明白每一條reset都是用來做什么的。reset.css本意就是重置樣式，我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進(jìn)typography.css。具體如何規(guī)劃網(wǎng)站CSS結(jié)構(gòu)，不在文本討論之列，可以參考Smashing Magazine上的文章，國內(nèi)有差強(qiáng)人意的中文譯版。注意，本文把reset分成了兩個(gè)部分，一個(gè)是純r(jià)eset.css，可以用于任何項(xiàng)目。另一個(gè)是用于特定項(xiàng)目的“reset”，自定義修改的內(nèi)容，這些內(nèi)容可以放在layout.css、typography.css之類的文件中，他們共同導(dǎo)入到一個(gè)base.css形成一個(gè)項(xiàng)目的基礎(chǔ)樣式。本文就是來介紹如何寫一個(gè)合適所有項(xiàng)目的通用的reset.css，以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。
1、基礎(chǔ)
牛頓是站在巨人伽利略的肩膀上的，我們也可以這么做。首先我們要選定一個(gè)前進(jìn)的基礎(chǔ)。
請永遠(yuǎn)不要使用
* { margin: 0; padding: 0; }
這問題太多了，在此不多加表述。
目前比較流行的有Eric Meyer的重置樣式和YUI的重置樣式。另有Condensed Meyer Reset簡化Eric Meyer的樣式。有趣的是，Eric的重置樣式也是源于YUI的。而那份簡化版又把Eric的樣式簡化回YUI的樣式了。但同時(shí)，糟糕的是，網(wǎng)上流傳的比較廣的(尤其是國內(nèi))都不是最新的版本。上面兩個(gè)頁面里直接看到的都不是最新的，Eric專門為有一個(gè)reset.css頁面。而YUI當(dāng)前版本(2.7.0)的reset.css實(shí)際地址里，比上面的頁面中還多一些東西。此外，我們還可以基于一些常見的框架，比較著名的比如Blueprint或者Elements CSS Framework（這個(gè)的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并沒有給出具體理由。
這個(gè)問題我基本認(rèn)為是用戶自定義的更重要還是你的設(shè)計(jì)更重要的問題。我個(gè)人的觀點(diǎn)是，如果你的設(shè)計(jì)本身就是白色背景，那么不要設(shè)置背景。一小部分中高水平的用戶，他們會(huì)自定義網(wǎng)頁默認(rèn)背景色。設(shè)置成他們喜歡的背景色，比如淺藍(lán)色。基本常見的瀏覽器都提供了這個(gè)簡單的功能。而我們的背景色重置則會(huì)破壞用戶的選擇——盡管這樣能保證你的設(shè)計(jì)原汁原味的呈現(xiàn)給所有用戶。當(dāng)然我知道，更高端的用戶會(huì)用Stylish之類的Firefox擴(kuò)展來自定義頁面。但不得不說，只會(huì)用“選項(xiàng)”來調(diào)背景色的用戶更多，不是么？而同時(shí)，如果設(shè)計(jì)本身就有其他背景色，比如黑色、藍(lán)色、綠色之類的，OK，這些設(shè)計(jì)當(dāng)然可以設(shè)置背景色。但請不要放進(jìn)reset.css里。這里是重置樣式的地方，不是你設(shè)計(jì)的地方。請把你的設(shè)計(jì)放在更廣袤的土地上。

上一篇：有序列表和段落設(shè)計(jì)華麗的網(wǎng)頁列表數(shù)字

下一篇：W3C標(biāo)準(zhǔn)以及XHTML和HTML