[CSS] CSS實踐–CSS Reset

概述

    Web項目中我們經常會使用到CSS Reset這個概念。那麼CSS Reset是什麼了。我們知道不同的瀏覽器對HTML標籤預設的樣式是有差別的，例如ul預設帶有縮排的樣式，在IE下，它的縮排是通過margin實現的，而在Firefox下，它的縮排是由padding實現的。在實際開發中，瀏覽器的預設樣式會給我帶來很多意想不到的麻煩。省去這些麻煩的方式--一開始就將瀏覽器的預設樣式全部覆蓋。這就引申出CSS Reset概念。最簡單的說法CSS Reset就是把瀏覽器提供的預設樣式覆蓋掉。

 

CSS Rest 內容

    項目中我們常用一下的代碼進行Rest CSS。

View Code html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
  display: block;
}

body
{
  cursor: default;
  line-height: 1;
}

ol,
ul
{
  list-style: none;
}

blockquote,
q
{
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after
{
  content: '';
  content: none;
}

table
{
  border-collapse: collapse;
  border-spacing: 0;
}

input,
select
{
  vertical-align: middle;
}

 

CSS Rest 引用  

    http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/ （Reset Styles）

    http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/  （Reworked Reset）

    http://meyerweb.com/eric/tools/css/reset/index.html  （CSS Tools: Reset CSS）

   （如果有需要的話，我可以對這些文章進行翻譯）