樣式重置 css reset

新浪的初始化：

 1 html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
 2     margin: 0;
 3     padding: 0
 4 }
 5 fieldset,img {
 6     border: 0
 7 }
 8 img {
 9     display: block
10 }
11 address,caption,cite,code,dfn,th,var {
12     font-style: normal;
13     font-weight: normal
14 }
15 ul,ol {
16     list-style: none
17 }
18 input {
19     padding-top: 0;
20     padding-bottom: 0;
21     font-family: "SimSun","宋體"
22 }
23 input::-moz-focus-inner {
24     border: 0;
25     padding: 0
26 }
27 select,input {
28     vertical-align: middle
29 }
30 select,input,textarea {
31     font-size: 12px;
32     margin: 0
33 }
34 input[type="text"],input[type="password"],textarea {
35     outline-style: none;
36     -webkit-appearance: none
37 }
38 textarea {
39     resize: none
40 }
41 table {
42     border-collapse: collapse
43 }

京東的初始化：

 1 * {
 2     margin: 0;
 3     padding: 0
 4 }
 5 em,i {
 6     font-style: normal
 7 }
 8 li {
 9     list-style: none
10 }
11 img {
12     border: 0;
13     vertical-align: middle
14 }
15 button {
16     cursor: pointer
17 }
18 a {
19     color: #666;
20     text-decoration: none
21 }
22 a:hover {
23     color: #c81623
24 }

大衆版初始化：

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;
}
h1,h2,h3,h4,h5,h6,em,i {
    font-weight: 100;
    font-style: normal
}
ul,ol,li {
    list-style-type: none
}
a {
    color: #666;
    text-decoration: none;
    outline: 0
}
a:hover {
    text-decoration: none
}　　

 

　　看到這些是否是感受本身平時也是這麼寫的？其實我以前也是這麼寫的，後來看到張鑫旭大神的文章後才知道有一種更好的寫法，更簡單、更高效。本身也已經親測過了div、li、tr、td這種標籤默認就沒有margin和padding，dt標籤的默認的margin和padding就是0，還有dfn, ins, kbd, q, samp, sub, sup, var這些標籤日常咱們網站上也用不到，因此就不必重置，像京東這種一個 * 號所有重置，本着寧肯錯殺三千也不放過一個這麼暴力的作法最好避免，不，應該是杜絕這種寫法，不過你們在寫一個簡單的測試頁面的時候能夠暫時用一下，由於我平時也是這麼寫的，主要是快速不用寫太多標籤，注意只是測試暫時能夠用一下。。。

　　還有一些h一、h二、h三、h四、h五、h6這些標籤也能夠酌情處理，通常用到幾個就寫幾個不用所有重置，像h1這個標籤按其seo方面來考慮，一個頁面最好只有一個，因此不必開始的時候就重置其樣式，等你按設計稿寫樣式的時候又重置一次，這樣就至關於瀏覽器渲染了2次，徹底沒有必要，你可能會說這也沒幾個不會有什麼影響，錯，既然咱們是作重構的就要本着能少則少的理念去作，現在時間就是金錢，即便提升0.1秒的載入時間咱們也是有必要去爭取的。

　　網上特地搜了一下html標籤的默認樣式和瀏覽器默認樣式，整理了一下有興趣的能夠看一下~

/*html標籤默認樣式*/
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上列表元素默認狀態下以塊狀顯示，未顯示的將之內聯元素顯示，該列表針對HTML4版本，部分元素在HTML5中已廢棄*/ 
li { display: list-item }/*默認以列表顯示*/ 
head { display: none }/*默認不顯示*/ 
table { display: table }/*默認爲表格顯示*/ 
tr { display: table-row }/*默認爲表格行顯示*/ 
thead { display: table-header-group }/*默認爲表格頭部分組顯示*/ 
tbody { display: table-row-group }/*默認爲表格行分組顯示*/ 
tfoot { display: table-footer-group }/*默認爲表格底部分組顯示*/ 
col { display: table-column }/*默認爲表格列顯示*/ 
colgroup { display: table-column-group }/*默認爲表格列分組顯示*/ 
td, th { display: table-cell; }/*默認爲單元格顯示*/ 
caption { display: table-caption }/*默認爲表格標題顯示*/ 
th { font-weight: bolder; text-align: center }/*默認爲表格標題顯示，呈現加粗居中狀態*/ 
caption { text-align: center }/*默認爲表格標題顯示，呈現居中狀態*/ 
body { margin: 8px; line-height: 1.12 } 
h1 { font-size: 2em; margin: .67em 0 } 
h2 { font-size: 1.5em; margin: .75em 0 } 
h3 { font-size: 1.17em; margin: .83em 0 } 
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } 
h5 { font-size: .83em; margin: 1.5em 0 } 
h6 { font-size: .75em; margin: 1.67em 0 } 
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder } 
blockquote { margin-left: 40px; margin-right: 40px } 
i, cite, em,var, address { font-style: italic } 
pre, tt, code, kbd, samp { font-family: monospace } 
pre { white-space: pre } 
button, textarea, input, object, select { display:inline-block; } 
big { font-size: 1.17em } 
small, sub, sup { font-size: .83em } 
sub { vertical-align: sub }/*定義sub元素默認爲下標顯示*/ 
sup { vertical-align: super }/*定義sub元素默認爲上標顯示*/ 
table { border-spacing: 2px; } 
thead, tbody, tfoot { vertical-align: middle }/*定義表頭、主體表、表腳元素默認爲垂直對齊*/ 
td, th { vertical-align: inherit }/*定義單元格、列標題默認爲垂直對齊默認爲繼承*/ 
s, strike, del { text-decoration: line-through }/*定義這些元素默認爲刪除線顯示*/ 
hr { border: 1px inset }/*定義分割線默認爲1px寬的3D凹邊效果*/ 
ol, ul, dir, menu, dd { margin-left: 40px } 
ol { list-style-type: decimal } 
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } 
u, ins { text-decoration: underline } 
br:before { content: ""A" }/*定義換行元素的僞對象內容樣式*/ 
:before, :after { white-space: pre-line }/*定義僞對象空格字符的默認樣式*/ 
center { text-align: center } 
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } 
:link, :visited { text-decoration: underline } 
:focus { outline: thin dotted invert } 
/* Begin bidirectionality settings (do not change) */ 
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override}
/*定義BDO元素當其屬性爲DIR="ltr"時的默認文本讀寫顯示順序*/ 
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override}
/*定義BDO元素當其屬性爲DIR="rtl"時的默認文本讀寫顯示順序*/ 
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed}
/*定義任何元素當其屬性爲DIR="ltr"時的默認文本讀寫顯示順序*/ 
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed}
/*定義任何元素當其屬性爲DIR="rtl"時的默認文本讀寫顯示順序*/ 
@media print { /*定義標題和列表默認的打印樣式*/ 
h1 { page-break-before: always } 
h1, h2, h3, h4, h5, h6 { page-break-after: avoid } 
ul, ol, dl { page-break-before: avoid } 
} 



/*瀏覽器默認樣式*/

//一、頁邊距
//IE默認爲10px，經過body的margin屬性設置
//FF默認爲8px，經過body的padding屬性設置
//要清除頁邊距必定要清除這兩個屬性值

 body {
margin:0;
padding:0;
}

//二、段間距
//IE默認爲19px，經過p的margin-top屬性設置
//FF默認爲1.12em，經過p的margin-bottom屬性設
//p默認爲塊狀顯示，要清除段間距，通常能夠設置

 p {
margin-top:0;
margin-bottom:0;
 }

//三、標題樣式
//h1~h6默認加粗顯示：font-weight:bold;。
//默認大小請參上表
//還有是這樣的寫的

 h1 {font-size:xx-large;}
 h2 {font-size:x-large;}
 h3 {font-size:large;}
 h4 {font-size:medium;}
 h5 {font-size:small;}
 h6 {font-size:x-small;}

/*個大瀏覽器默認字體大小爲16px，即等於medium，h1~h6元素默認以塊狀顯示字體顯示爲粗體，要清除標題樣式，通常能夠設置*/

hx {
font-weight:normal;
font-size:value;
 }

//四、列表樣式
//IE默認爲40px，經過ul、ol的margin屬性設置
//FF默認爲40px，經過ul、ol的padding屬性設置
//dl無縮進，但起內部的說明元素dd默認縮進40px，而名稱元素dt沒有縮進。
//要清除列表樣式，通常能夠設置

ul, ol, dd {
list-style-type:none;
margin-left:0;
padding-left:0;
}

// 元素居中
// IE默認爲text-align:center;
// FF默認爲margin-left:auto;margin-right:auto;

//五、超連接樣式a 樣式默認帶有下劃線，顯示顏色爲藍色，被訪問過的超連接變紫色，要清除連接樣式，通常能夠設置

a {
text-decoration:none;
color:#colorname;
}

//六、鼠標樣式
//IE默認爲cursor:hand;
//FF默認爲cursor:pointer;該聲明在IE中也有效

//七、圖片連接樣式
//IE默認爲紫色2px的邊框線
//FF默認爲藍色2px的邊框線
//要清除圖片連接樣式，通常能夠設置

img {
border:0;
}

View Code

　　總結一下，咱們寫代碼的時候能夠參考別人的代碼，找到本身須要的，不用所有都copy過來，即浪費代碼又浪費性能。好了就到這裏吧，若是文中有錯誤的地方還望指正，咱們共同進步吧。

　　今天週一上班感受好睏啊，現在天氣冷了早上根本就起不來，有多少人跟我同樣週一是一個迷糊的一天。。。