幾個(gè)感覺(jué)比較好的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;
}
/*合并邊線(xiàn),邊線(xiàn)空間至零.*/
table {
border-collapse:collapse;
border-spacing:0;
}
/*清除邊線(xiàn)*/
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樣式的初始化問(wèn)題，有的人剛開(kāi)始還有疑問(wèn)，為什么要初始化CSS？我也不知道他們?yōu)槭裁磿?huì)提出這么一個(gè)問(wèn)題，也許他們平 時(shí)做頁(yè)面時(shí)根本就沒(méi)考慮過(guò)瀏覽器兼容的問(wèn)題。其實(shí)不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面差異。最后，大 家都把自己的在設(shè)計(jì)中對(duì)CSS的初始化代碼拿出來(lái)比較了以下，我自己以前最?lèi)?ài)用的是自己認(rèn)為寫(xiě)法簡(jiǎn)單而且實(shí)用的：
* {
padding: 0;
margin: 0;
}
這確實(shí)很簡(jiǎn)單，而且也有很多人是這么寫(xiě)的，認(rèn)為這最簡(jiǎn)單。但是有人有疑問(wèn)了。這樣用個(gè)*通用符是快，但是如果網(wǎng)站很大，CSS文件很大，這樣回減慢頁(yè)面的加載速度。仔細(xì)想想也有可能。因?yàn)檫@樣寫(xiě)的話(huà)他會(huì)把所以標(biāo)簽給初始化，如果標(biāo)簽很多是會(huì)影響速度。

最后不知道誰(shuí)給出了Erik Meyer的Css Reset，給人感覺(jué)確實(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)過(guò)大家對(duì)Erik Meyer的Css Reset的討論，認(rèn)為還可以修改，最后得出了下面的結(jié)果感覺(jué)是不是又簡(jiǎn)潔了點(diǎn)，不過(guò)效果都一樣哦：

 程序代碼
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;
}

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