css Reset程式碼分享

antzone發表於2017-04-03

css的Reset重置,即重設瀏覽器的樣式。

在各種瀏覽器中,都會對CSS的選擇器預設一些數值,譬如當h1沒有被設定數值時,顯示一定大小。但並不是所有的瀏覽器都使用一樣的數值,所以,有了CSS Reset,以讓網頁的樣式在各瀏覽器中表現一致。

如果頁面簡單的話,我們可以只是使用簡單的重置,程式碼如下:

[CSS] 純文字檢視 複製程式碼
* { 
  padding: 0; 
  margin: 0; 
  border: 0; 
}

雖然上面的方式雖然很強大,也可以讓我們少些很多程式碼,其實非常的浪費資源,因為*這個萬用字元火力太強了,要匹配到頁面中的每一個元素,下面就分享一個比較好的css reset程式碼:

[CSS] 純文字檢視 複製程式碼
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
  padding: 0; 
  margin: 0; 
} 
table{ 
  border-collapse: collapse; 
  border-spacing: 0; 
} 
fieldset,img{ 
  border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var{ 
  font-weight: normal; 
  font-style: normal; 
} 
ol,ul { 
  list-style: none; 
} 
caption,th { 
  text-align: left; 
} 
h1,h2,h3,h4,h5,h6 { 
  font-weight: normal; 
  font-size: 100%; 
} 
q:before,q:after { 
  content:''; 
} 
abbr,acronym { 
  border: 0; 
}

相關文章