Reset CSS:只選對的,不選"貴"的

  玉伯和正淳一塊兒整理的一份 reset.css: css

 1 /*
 2 KISSY CSS Reset
 3 理念:清除和重置是緊密不可分的
 4 特點:1.適應中文 2.基於最新主流瀏覽器
 5 維護:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
 6 */
 7 
 8 /* 清除內外邊距 */
 9 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */
10 dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
11 pre, /* text formatting elements 文本格式元素 */
12 fieldset, lengend, button, input, textarea, /* form elements 表單元素 */
13 th, td { /* table elements 表格元素 */
14     margin: 0;
15     padding: 0;
16 }
17 
18 /* 設置默認字體 */
19 body,
20 button, input, select, textarea { /* for ie */
21     /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/
22     font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何編碼下都無問題 */
23 }
24 
25 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
26 h2 { font-size: 16px; }
27 h3 { font-size: 14px; }
28 h4, h5, h6 { font-size: 100%; }
29 
30 address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */
31 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 統一等寬字體 */
32 small { font-size: 12px; } /* 小於 12px 的中文很難閱讀,讓 small 正常化 */
33 
34 /* 重置列表元素 */
35 ul, ol { list-style: none; }
36 
37 /* 重置文本格式元素 */
38 a { text-decoration: none; }
39 a:hover { text-decoration: underline; }
40 
41 abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.這裏用了屬性選擇符,ie6 下無效果 */
42     border-bottom: 1px dotted;
43     cursor: help;
44 }
45 
46 q:before, q:after { content: ''; }
47 
48 /* 重置表單元素 */
49 legend { color: #000; } /* for ie6 */
50 fieldset, img { border: none; } /* img 搭車:讓連接裏的 img 無邊框 */
51 /* 注:optgroup 沒法扶正 */
52 button, input, select, textarea {
53     font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */
54 }
55 
56 /* 重置表格元素 */
57 table {
58     border-collapse: collapse;
59     border-spacing: 0;
60 }
61 
62 /* 重置 hr */
63 hr {
64     border: none;
65     height: 1px;
66 }
67 
68 /* 讓非ie瀏覽器默認也顯示垂直滾動條,防止因滾動條引發的閃爍 */
69 html { overflow-y: scroll; }

測試過的瀏覽器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+       html

 解釋一些和 YUI cssreset 的差別點:瀏覽器

1 清除內外邊距的元素,去掉了 div, code(在測試瀏覽器中,沒發現有邊距), 增長了 button(感受是 YUI 遺漏了). 
2 去掉了 YUI 裏對 html 顏色和背景色的設置。在測試瀏覽器中,沒有發現差別。(要設的話,推薦background: transparent) 
3 對於 address, caption, …, em, strong 等文本格式元素,作了調整。保留了 strong 和 th 的粗體。 
4 對 abbr 和 acronym 作了調整,使得在非 ie6 下可視性更好。 
5 去掉了 sup 和 sub 的樣式,直接用瀏覽器默認的便可。 
6 對於 input, select, textarea 表單元素,去掉了針對 ie 的 inherit, 只保留了 font-size 的 inherit hack. 由於其它 hack 經測試已失效。 
7 增長了一些元素的默認樣式。

此外,對總體代碼的組織形式作了調整,按照元素的類別將代碼進行了分組svn

如何使用

請記住:永遠不存在萬能解決方案,永遠沒有銀彈。測試

所以個人建議和 Eric 是同樣的:請根據具體需求,適量裁剪和修改後再使用字體

好比針對淘寶,能夠在 reset.css 的基礎上,修改成 reset-taobao.css.ui

若是是我的博客,我我的喜歡的一個方案是:reset-blog.css.google

相關測試頁面請查看:cssreset svn.
真實使用時,請用壓縮後的版本:reset-min.css.編碼

對於 reset.css 自己,咱們期待它能儘可能多的適用於各類場景,但不期待它能解決全部問題。目前而言,reset.css 裏的默認樣式,是玉伯和正淳等各位同事和朋友們實踐經驗的總結,算是「精挑細選」,但不期待能解決全部問題。spa

最後,期待你的參與和建議。若是這份 reset.css 能有幸在你的項目中獲得使用,則很是期待你的反饋。

做者建議:

1.真是項目中能夠這樣:Reset css +fonts.css /base.css/layout.css.......相結合的方式

2.在reset css中 沒用到的元素能夠直接拿掉,減小代碼量

3.在reset css中作好版本維護信息,方便擴展

最後建議:

網上全部的Reset css 都不是你本身的Reset css ,包括玉伯整理的這個,使用前請深思本文開頭的話,量身打造,只選對的,不選"貴"的。

 

 

本文轉載自http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html

相關文章
相關標籤/搜索