一份適合中文的CSS RESET — Dawn CSS Reset

以下內容摘自 http://mingelz.com/2009/08/dawn-css-reset/

之前在做頁面時，一直使用YUI的CSS Reset，後來還跟著它升級到了3.0beta1 版。當然，我每次都會在YUI的基礎上適當精簡，以方便自己在項目中的使用。後來陸續看到了Shawphy的《打造自己的 reset.css》和射鵰的《Reset CSS 研究（技術篇）》，然後便想到既然巨人們就在眼前，我何不站在他們肩膀上總結一套自己的CSS Reset呢，於是就有了下文：

 

首先我對自己所熟知的4套CSS Reset進行一個簡單的評價（一家之言，歡迎各位拍磚）：

• YUI CSS Reset：是我之前一直在用的Reset，按照元素的作用及預設樣式分類，將它們的預設樣式去除，最終基本所有元素在所有瀏覽器下長的都一樣，當然相比Eric的Reset，YUI仁慈了許多；
• Eric Reset CSS：殺傷力最大的一套Reset，從第一處定義就可以看到，把所有元素的內外邊距、邊框置為0，連outline都不放過，連:focus的outline都不放過……經Eric之手，世界終於清靜了……個人感覺Eric的思路是“HTML元素預設樣式性本惡”，所以要全部除之而後快，但這樣難免讓一些本可以協助我們的樣式也一起灰飛煙滅了；
• Shawphy CSS Reset：Shawphy站在了YUI和Eric的肩膀上，感覺Shawphy更傾向於Eric的版本，殺傷力同樣巨大，不過在文末Shawphy又講到在reset.css之後要立即將一些被重設的樣式根據項目需要在layout.css和typography.css中重新定義；
• KISSY CSS Reset：也就是射鵰在部落格上闡述的Reset，感覺受YUI的影響比較大，不過正如部落格中所說，這份Reset更適應中文，我正是因為受到了這份Reset的很多啟發才決定總結自己的Reset。

註：以上總結中的4個連結為非壓縮版，除了Eric的版本外，其他三個都可以將URL最後的reset.css改名為reset-min.css得到壓縮版。

下邊由本人操刀的Dawn CSS Reset閃亮登場，這份Reset受到了YUI和KISSY的影響與啟發，在此表示感謝。

為了讓大家更好的理解我在處理這些重設樣式時的想法，並將之與YUI和KISSY的異同做一個對比，下邊就使用一個表格對每句重設樣式進行說明：

YUI[http://developer.yahoo.com/yui/]KISSY[http://code.google.com/p/kissy/]Dawn[http://mingelz.com]備忘1body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,
form,fieldset,legend,input,textarea,
p,blockquote,
th,td
{margin:0;padding:0;}body,
h1,h2,h3,h4,h5,h6,hr,p,blockquote,
dl,dt,dd,ul,ol,li,
pre,
form,fieldset,legend,button,input,textarea,
th,td
{margin:0;padding:0;}body,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,ul,ol,li,
th,td,
p,blockquote,pre,
form,fieldset,legend,input,button,textarea,
hr
{margin:0;padding:0;}1、div、code是沒有內外邊距的，可去除；
2、input根據不同的type，可能有內外邊距，應加上；
3、hr是有外邊距的，但我們實際使用中該值不定，應加上；2h1,h2,h3,h4,h5,h6
{font-size:100%;font-weight:normal;}h1{font-size:18px;}
h2{font-size:16px;}
h3{font-size:14px;}
h4,h5,h6{font-size:100%;}h1,h2,h3,h4,h5,h6
{font-size:100%;}1、對於不同頁面，hn的字型大小不可能相同；
2、標題肯定是要著重顯示的，不加粗才屬於特例；
結論：只重設字型大小，不重設字型粗細；3li
{list-style:none;}ul,ol
{list-style:none;}li
{list-style:none;}1、list-style樣式確實是定義在li標籤上的；4fieldset,img
{border:0;}fieldset,img
{border:0;}fieldset,img
{border:0;}1、input、select、textarea預設也有邊框，基於優雅降級的思想沒有將它們的邊框在Reset中清除，當使用背景圖片修飾時，記得清除邊框；5table
{border-collapse:collapse;border-spacing:0;}table
{border-collapse:collapse;border-spacing:0;}table
{border-collapse:collapse;border-spacing:0;}-6q:before,q:after
{content:”;}q:before,q:after
{content:”;}q:before,q:after
{content:”;}1、q標籤預設會在內容前加前引號（“）在內容後加後引號(”)，可能會影響實際效果，故去除；7abbr,acronym
{border:0;font-variant:normal;}abbr[title],acronym[title]
{border-bottom:1px dotted;cursor:help;}abbr[title]
{border-bottom:1px dotted;cursor:help;}1、IE6不支援abbr標籤，HTML5“拋棄”了acronym標籤；
2、IE6不支援屬性選擇符；
結論：既然使用了屬性選擇符，也就代表著不再對IE6提供支援，就讓我們大膽的對IE6及它的acronym說Byebye吧！8address,caption,cite,code,dfn,em,strong,th,var
{font-style:normal;font-weight:normal;}

caption,th
{text-align:left;}

address,cite,dfn,em,var
{font-style:normal;}address,cite,dfn,em,var
{font-style:normal;}1、address、cite、dfn、em、var預設為斜體，可扶正；
2、caption、strong、th預設為粗體，對於這種語義化標籤不加粗才屬於特例，可保留；
3、capton、th預設為置中，可保留，原因同上，不置中才屬於特例；
4、code預設無此方面樣式，可去除；
5、單獨說下em和strong，em表示強調、strong表示更強的強調，所以這裡我去除em樣式而保留strong樣式，一般強調使用em，沒有任何樣式，而對於strong還不加粗那真的屬於特例了；9input,textarea,select
{font-family:inherit;font-size:inherit;font-weight:inherit;}

input,textarea,select
{*font-size:100%;}

button,input,select,textarea
{font-size:100%;}button,input,select,textarea
{font-size:100%;}1、表單元素在IE中預設不繼承字型大小；
2、button預設不繼承字型大小，應添加上；
3、optgroup預設為斜體，且無法扶正；10legend
{color:#000;}legend
{color:#000;}legend
{color:#000;}1、IE6下legend元素顏色繼承自Windows系統的主題樣式；
2、請在頁面配置時根據實際需要修改legend顏色；11html
{color:#000;background:#FFF;}--1、所有瀏覽器預設相同；
2、背景顏色可能會繼承自Windows系統的佈景主題色彩；
結論：在實際項目中根據需要定義不同顏色；12sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}--1、所有瀏覽器預設樣式為：
sup{vertical-align:super;}
sub{vertical-align:sub}
2、super比text-top更高、sub比text-bottom更低；
3、在預設樣式下，如果行高太小，sub、sup會被遮擋；13-code,kbd,pre,samp,tt
{font-family:”Courier New”,Courier,monospace;}code,kbd,samp
{font-family:”Courier New”,monospace;}1、pre只是對文本預格式化，並不代表內容一定是代碼，所以沒有必要為pre標籤定義等寬字型，如果pre中為代碼，應使用：
<pre><code> … </code></pre>
2、HTML5已將tt標籤“拋棄”；
結論：可只定義code、kbd、samp三個標籤，或保留預設；14-small
{font-size:12px;}-1、KISSY指出小於12px的中文難於閱讀，故使之正常化；
2、HTML5“拋棄”了big標籤，卻留著small，不知何故……
結論：推薦不使用small標籤，從Reset做起；15-hr
{border:none;height:1px;}hr
{border:none;height:1px;}1、hr預設：border:1px inset，height為2；
2、hr顏色在FF下由background-color定義、在IE下由color定義，故：請在實際使用中將兩個屬性都寫上；
3、hr的盒模型在IE/FF下與在Chrome下不同，不推薦使用；16-body,
button,input,select,textarea
{font:12px/1 Tahoma,Helvetica,Arial,”\5b8b\4f53″,sans-serif;}body,
button,input,select,textarea
{font:12px/1 Arial,Tahoma,Helvetica,SimSun,san-serif;}1、小於12px的中文難於閱讀；
2、在12px字型下小於12px的行高，文字會有重疊；
3、與字型大小相同的行高可避免不同瀏覽器對行高的解析差異，從而避免對齊問題，對具體常值內容再單獨定義行高更合適；
4、表單元素在IE6下不繼承，需單獨設定字型樣式；
5、KISSY對“宋體”二字使用ASCII碼“\5b8b\4f53”表示，防止文本編碼不同出現樣式定義問題；
我在此推薦使用字型的英文表示方法（注意字型名有空格時要用引號括住），更加易讀，如：
宋體：SimSun、
黑體：SimHei、
新宋體：NSimSun、
仿宋：FangSong、
楷體：KaiTi、
仿宋_GB2312：FangSong_GB2312、
楷體_GB2312：KaiTi_GB2312、
微軟雅黑體：Microsoft YaHei；17-a{text-decoration:none;}
a:hover{text-decoration:underline;}-因為連結樣式在具體頁面表現各不相同，我傾向於不在Reset中重設，而在實際項目中定義；18-html
{overflow-y:scroll;}-1、在FF等非IE瀏覽器下，如果頁面內容不滿一屏時，預設是沒有縱向捲軸的，增加此捲軸可以布局時更準確；
2、在設計時可以添加此屬性，但發布時建議將它去除；

好，就這些了，我想通過上邊表格的對比，各位看官也對我的這份Dawn CSS Reset有了初步認識。正如所有發布過CSS Reset的人所說，“這不是萬能的”、“沒有銀彈”。所以各位如有何意見建議，歡迎在文後討論。也希望我的總結能夠對各位看官有所協助。再囉嗦一句，這份Reset已經在數個項目中使用過，暫時沒有遇到什麼問題，呵呵。

PS：在此向因顯示器不夠寬，導致瀏覽器被上面表格撐出橫向捲軸的朋友們致歉~我已為表格外的div設定了overflow:auto，應該不會破壞skin的布局了~

最後給出最終的代碼：

/**
 * Dawn CSS Reset
 * Version: 1.0 beta
 * Update: 2009-07-27
 * Author: mingelz
 * URI: http://mingelz.com | http://www.cnblogs.com/mingelz
 * License: http://creativecommons.org/licenses/by-sa/3.0/
*/
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
li{list-style:none;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
q:before,q:after{content:'';}
abbr[title]{border-bottom:1px dotted;cursor:help;}
address,cite,dfn,em,var{font-style:normal;}
button,input,select,textarea{font-size:100%;}
legend{color:#000;}
code,kbd,samp{font-family:"Courier New",monospace;}
hr{border:none;height:1px;}
body,button,input,select,textarea{font:12px/1 Arial,Tahoma,Helvetica,SimSun,san-serif;}

最後更新日期：2009-8-12

版本更新歷史：
v1.0beta[2009-8-12]：在實際項目中使用了一段時間，決定將之發布出來，因考慮到通用性，添加了對legend的重設；
v0.4[2009-7-27]：去掉了acronym標籤的定義，HTM5已經拋棄了它，我們也對它說Byebye吧，當然也希望IE6早日Byebye；
v0.3[2009-7-23]：對每個標籤進行了梳理，在YUI和KISSY的基礎上總結出了一套新CSS Reset代碼；
v0.2[2009-7-22]：對v0.1的代碼進行了部分精簡；
v0.1[2009-7-22]：在YUI的基礎上添加了部分KISSY的代碼；