引言 每每有新項目，第一步就是應當使用一個reset.css來重置樣式。濫用不如不用，直接拿個現成的reset.css過來將導致后期各種離奇bug的發生。所以最好還是自己寫一個reset.css，并且要明白每一條reset都是用來做什么的。reset.css本意就是重置樣式，我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進typography.css。 具體如何規劃網站CSS結構，不在文本討論之列，可以參考Smashing Magazine上的文章，國內有差強人意的中文譯版。注意，本文把reset分成了兩個部分，一個是純reset.css，可以用于任何項目。另一個是用于特定項目的“reset”，自定義修改的內容，這些內容可以放在layout.css、typography.css之類的文件中，他們共同導入到一個base.css形成一個項目的基礎樣式。本文就是來介紹如何寫一個合適所有項目的通用的reset.css，以及介紹在設置玩reset.css之后需要針對不同項目要首先要設置的內容。

1，基礎 牛頓是站在巨人伽利略的肩膀上的，我們也可以這么做。首先我們要選定一個前進的基礎。 請永遠不要使用

* { margin: 0; padding: 0; } 這問題太多了，在此不多加表述。

目前比較流行的有Eric Meyer的重置樣式和YUI的重置樣式。另有Condensed Meyer Reset簡化Eric Meyer的樣式。有趣的是，Eric的重置樣式也是源于YUI的。而那份簡化版又把Eric的樣式簡化回YUI的樣式了 。但同時，糟糕的是，網上流傳的比較廣的(尤其是國內)都不是最新的版本。上面兩個頁面里直接看到的都不是最新的，Eric專門為有一個reset.css頁面。而YUI當前版本(2.7.0)的reset.css實際地址里，比上面的頁面中還多一些東西。此外，我們還可以基于一些常見的框架，比較著名的比如Blueprint或者Elements CSS Framework（這個的reset也是源自于Eric Meyer的）。OK，準備工作就差不多了。以上這些都可以作為參考資料來組織我們自己的reset。我這里主要采用YUI，兼帶Eric的reset。

2，默認色彩 對于頁面是不是有默認背景色和前景色，YUI和Eric有著不同的看法。 YUI重置背景色為白色而文字顏色為黑色。

html { color: #000; background: #FFF; } 而Eric在當前最新版中讓所有顏色為透明，他認為透明才是最原始的顏色。雖然他曾一度認為也應當設置白色背景色、黑色文字顏色。至于最后為什么改了，Eric并沒有給出具體理由。

這個問題我基本認為是用戶自定義的更重要還是你的設計更重要的問題。我個人的觀點是，如果你的設計本身就是白色背景，那么不要設置背景。一小部分中高水平的用戶，他們會自定義網頁默認背景色。設置成他們喜歡的背景色，比如淺藍色。基本常見的瀏覽器都提供了這個簡單的功能。而我們的背景色重置則會破壞用戶的選擇——盡管這樣能保證你的設計原汁原味的呈現給所有用戶。當然我知道，更高端的用戶會用Stylish之類的Firefox擴展來自定義頁面。但不得不說，只會用“選項”來調背景色的用戶更多，不是么？而同時，如果設計本身就有其他背景色，比如黑色、藍色、綠色之類的，OK，這些設計當然可以設置背景色。但請不要放進reset.css里。這里是重置樣式的地方，不是你設計的地方。請把你的設計放在更廣袤的土地上。 所以，簡單說來，NO，不要在reset中設置背景色。

那么，文字顏色呢？原則上來說，也是不應該設置文字顏色的。但是IE中的表單元素中legend這個對象比較特別，跟主題結合的比較緊密。legend會默認有自己的顏色（跟當前的主題有關）而不會繼承父元素的顏色（即便設了color:inherit;）。 從某些角度來說，可以想當然地認為設置字體顏色人數遠小于設置背景色的人數；以及認為就算設置了背景色，人們看到legend元素是黑色的也不會覺得奇怪。因此，YUI在其reset中設置了legend {color: #000;}是無可厚非的。 但反過來說，把這個放到typography.css或者form.css里豈不是更好？不同的頁面設計，其對legend的色彩要求很可能是不同的，放在reset.css里重復定義是沒有必要的。因此這條CSS規則可以作為在reset.css之后首先應當設置的規則。

3，padding和margin 曾經一度流行的* { margin: 0; padding: 0; }也就是出于這個目的。讓各個元素的padding和margin都歸零，尤其是那些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把幾乎所有的元素都寫上了規則。而YUI只把有padding和margin的元素清空樣式，而其他元素則不動。我個人比較偏好YUI的做法，因為他這樣可以避免給一些無關元素帶上不必要的樣式。導致元素過多時的性能下降。但Eric的也有可取之處，他這樣寫，整個reset.css可以小上不少字節，對服務器的壓力會小一些。但進一步想，這種做法跟用 * 來選擇所有元素還有什么區別呢？這已經幾乎囊括了所有元素了！你怎么用呢？看你自己喜好了。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

新聞標題：適合在所有項目通用的reset.css
文章地址：http://www.js-pz168.com/news48/321048.html

成都網站建設公司_創新互聯，為您提供動態網站、軟件開發、做網站、微信公眾號、電子商務、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯