reset.css

關於reset.css

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; }

HTML5 reset css

/* 
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;
}

Web頁面字體設置

網頁安全字體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- 瀏覽器 點擊虛線邊框 */

YUI reset.css
張鑫旭 HTML5 reset css
其餘參考web

相關文章
相關標籤/搜索