css reset的重置做用(可取仍是不可取,取決於你)

 

一.重置的理由

　　當今流行的瀏覽器中,有些都是以本身的方式去理解css規範,這就會到只有的瀏覽器對css的解釋與設計師的css定義初衷相沖突,使得網頁的樣子在某些瀏覽器下能正確按照設計師的想法顯示.,可是有些瀏覽器卻沒有按照設計師想要的樣子顯示出來,這就致使瀏覽器的兼容性問題

　　因此,經過重置button標籤的css屬性,而後再將它統必定義,就能夠產生相同的顯示效果

　　css reset的做用就是讓各個瀏覽器的css樣式有一個統一的基準,而這個基準更多的就是"清零"!

如下是一整段的css reset的樣式重置信息展現:

 1 html, body, div, span, object, iframe,
 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 3 abbr, address, cite, code,
 4 del, dfn, em, img, ins, kbd, q, samp,
 5 small, strong, sub, sup, var,
 6 b, i,
 7 dl, dt, dd, ol, ul, li,
 8 fieldset, form, label, legend,
 9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, figcaption, figure, 
11 footer, header, hgroup, menu, nav, section, summary,
12 time, mark, audio, video {
13     margin:0;
14     padding:0;
15     border:0;
16     outline:0;
17     font-size:100%;
18     vertical-align:baseline;
19     background:transparent;
20 }
21 
22 body {
23     line-height:1;
24 }
25 
26 :focus {
27     outline: 1;
28 }
29 
30 article,aside,canvas,details,figcaption,figure,
31 footer,header,hgroup,menu,nav,section,summary { 
32     display:block;
33 }
34 
35 nav ul {
36     list-style:none;
37 }
38 
39 blockquote, q {
40     quotes:none;
41 }
42 
43 blockquote:before, blockquote:after,
44 q:before, q:after {
45     content:'';
46     content:none;
47 }
48 
49 a {
50     margin:0;
51     padding:0;
52     border:0;
53     font-size:100%;
54     vertical-align:baseline;
55     background:transparent;
56 }
57 
58 ins {
59     background-color:#ff9;
60     color:#000;
61     text-decoration:none;
62 }
63 
64 mark {
65     background-color:#ff9;
66     color:#000; 
67     font-style:italic;
68     font-weight:bold;
69 }
70 
71 del {
72     text-decoration: line-through;
73 }
74 
75 abbr[title], dfn[title] {
76     border-bottom:1px dotted #000;
77     cursor:help;
78 }
79 
80 table {
81     border-collapse:collapse;
82     border-spacing:0;
83 }
84 
85 hr {
86     display:block;
87     height:1px;
88     border:0;   
89     border-top:1px solid #cccccc;
90     margin:1em 0;
91     padding:0;
92 }
93 
94 input, select {
95     vertical-align:middle;
96 }

對於上述的代碼,我作如下的幾點說明:

　　1.該部分是對於瀏覽器部分的css進行重置,我的認爲並不是全部的代碼都是須要如此的操做出來,畢竟其中含有的不少標籤在你寫頁面的過程當中不必定會用到

　　2.根據本身的實際的狀況選擇適合本身的代碼來使用,不要 照抄,這是前輩們總結出來的經驗

以上代碼也能夠簡化成下面的代碼形式:

1 body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{
2     margin:0;
3 } 
4  ol,ul{
5     margin:0;
6     padding:0;
7 }

根據實際的狀況合理的使用相關的reset的代碼,由於若是你的css文件自己就比較大的話,增長相關的reset代碼也會使得你的css文件變得更大點,對於公司來講,這點是不可取!!!