幾個(gè)感覺比較好的CSS初始化方法
2009年10月30日 星期五 18:05
1.
charset ”utf-8″;
html {background:url(/www/pic/head_back.gif) repeat-x top #FFF}
body {width:920px;font:12px Arial;margin:0 auto;padding:0;color:#000;}
a{color:#000; text-decoration:none}
a:hover {color:#f00; text-decoration:underline}
ul,ol,p,dl{margin:0;padding:0}
ul,ol,dl{height:100%;overflow:hidden}
li{list-style:none}
img {border:none}
h1,h2,h3,h4{font:12px Verdana;margin:0;padding:0}
input {font:12px Verdana}
2.

/*為背景定義了顏色*/
/*html {
color:#000;
background:#FFF;
}*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
/*合并邊線,邊線空間至零.*/
table {
border-collapse:collapse;
border-spacing:0;
}
/*清除邊線*/
fieldset, img {
border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
li {
list-style:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
/*添加空字符清除融合*/
q:before, q:after {
content:”;
}
abbr, acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input, textarea, select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
/*在ie下重定義*/
input, textarea, select {
*font-size:100%;
}
/*because legend doesn’t inherit in IE */
/*IE下legend不繼承 */
legend {
color:#000;
前段時(shí)間在一個(gè)群里大家討論CSS樣式的初始化問題，有的人剛開始還有疑問，為什么要初始化CSS？我也不知道他們?yōu)槭裁磿岢鲞@么一個(gè)問題，也許他們平 時(shí)做頁面時(shí)根本就沒考慮過瀏覽器兼容的問題。其實(shí)不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面差異。最后，大 家都把自己的在設(shè)計(jì)中對CSS的初始化代碼拿出來比較了以下，我自己以前最愛用的是自己認(rèn)為寫法簡單而且實(shí)用的：
* {
padding: 0;
margin: 0;
}
這確實(shí)很簡單，而且也有很多人是這么寫的，認(rèn)為這最簡單。但是有人有疑問了。這樣用個(gè)*通用符是快，但是如果網(wǎng)站很大，CSS文件很大，這樣回減慢頁面的加載速度。仔細(xì)想想也有可能。因?yàn)檫@樣寫的話他會把所以標(biāo)簽給初始化，如果標(biāo)簽很多是會影響速度。

最后不知道誰給出了Erik Meyer的Css Reset，給人感覺確實(shí)不錯(cuò)，著也應(yīng)該是大家使用最多的：

 程序代碼
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

最后經(jīng)過大家對Erik Meyer的Css Reset的討論，認(rèn)為還可以修改，最后得出了下面的結(jié)果感覺是不是又簡潔了點(diǎn)，不過效果都一樣哦：

 程序代碼
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;
}
fieldset, img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-weight: normal;
font-style: normal;
}
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;
}

本文來自CSDN博客，轉(zhuǎn)載請標(biāo)明出處：http://blog.csdn.net/bartidler/archive/2009/11/15/4810287.aspx