reset.css用於清除不一樣瀏覽器的差別。
1.{margin:0; padding:0; } 不推薦, 致使CSS渲染引擎在渲染CSS的時候,使用*遍歷整個DOM 樹,影響性能渲染性能。
2.永遠不存在萬能解決方案,只有適合項目的解決方案。所以在使用的時候根據具體需求,適量裁剪和修改後再使用。好比針對淘寶,能夠在 reset.css 的基礎上,修改成 reset-taobao.css.若是是我的博客,一個方案是:reset-blog.css. 真實使用時,請用壓縮後的版本:reset-min.css.css
參考 玉伯和正淳的reset,並有刪減html
/* 清除內外邊距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section /*html5中的結構元素*/ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表單元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; font: inherit; vertical-align: baseline; background:transparent; } article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; } /* 設置默認字體 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋體", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何編碼下都無問題 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 將斜體扶正 */ code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 統一等寬字體 */ small { font-size: 12px; } /* 小於 12px 的中文很難閱讀,讓 small 正常化 */ /* 重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式元素 */ a { text-decoration: none; } a:hover { text-decoration: underline; } abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.這裏用了屬性選擇符,ie6 下無效果 */ border-bottom: 1px dotted; cursor: help; } q:before, q:after { content: ''; } /* 重置表單元素 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 搭車:讓連接裏的 img 無邊框 */ /* 注:optgroup 沒法扶正 */ button, input, select, textarea { font-size: 100%; /* 使得表單元素在 ie 下能繼承字體大小 */ vertical-align:middle; } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; } /* 讓非ie瀏覽器默認也顯示垂直滾動條,防止因滾動條引發的閃爍 */ html { overflow-y: scroll; }
/* html5doctor.com Reset Stylesheet v1.4.1 2010-03-01 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } :focus { outline: 1; } article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; }
網頁安全字體html5
Google: font-family: arial,sans-serif; Yahoo: font: 13px/1.25 "Helvetica Neue",Helvetica,Arial; Apple: font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; Baidu: font: 12px arial; Weibo: font: 12px/1.125 Arial,Helvetica,sans-serif; QQ: font: 12px "宋體","Arial Narrow",HELVETICA; Sina: font-family: "SimSun","宋體","Arial Narrow"; 163 : font:12px/1.5 \5b8b\4f53,Arial,sans-serif; zhihu: font-family: 'Helvetica Neue',Helvetica,Arial,Sans-serif;</
img{ border:none; display:block; max-width:100%; } a:foucus{ outline:none; /* 清除IE8- 瀏覽器 點擊虛線邊框 */