幾個感覺比較好的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;
前段時間在一個群里大家討論CSS樣式的初始化問題，有的人剛開始還有疑問，為什么要初始化CSS？我也不知道他們?yōu)槭裁磿岢鲞@么一個問題，也許他們平 時做頁面時根本就沒考慮過瀏覽器兼容的問題。其實不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面差異。最后，大 家都把自己的在設計中對CSS的初始化代碼拿出來比較了以下，我自己以前最愛用的是自己認為寫法簡單而且實用的：
* {
padding: 0;
margin: 0;
}
這確實很簡單，而且也有很多人是這么寫的，認為這最簡單。但是有人有疑問了。這樣用個*通用符是快，但是如果網站很大，CSS文件很大，這樣回減慢頁面的加載速度。仔細想想也有可能。因為這樣寫的話他會把所以標簽給初始化，如果標簽很多是會影響速度。
最后不知道誰給出了Erik Meyer的Css Reset，給人感覺確實不錯，著也應該是大家使用最多的：
程序代碼
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: "" "";
}
最后經過大家對Erik Meyer的Css Reset的討論，認為還可以修改，最后得出了下面的結果感覺是不是又簡潔了點，不過效果都一樣哦：
程序代碼
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;
}
}
