我們?cè)趯慶ss之前，首先最好是進(jìn)行css樣式初始化一下，這樣做可以解決不同瀏覽器對(duì)HTML標(biāo)簽解析不夠統(tǒng)一，而造成不兼容的問題。對(duì)于這樣的問題，很多CSS新手都似乎忽略了這個(gè)問題的嚴(yán)重性！看完下面的文字，你就會(huì)明白初始化CSS的重要性，我們還在本文后面提供了一些初始化CSS的通用樣式表！
為什么要初始化CSS樣式表
因?yàn)椴煌臑g覽器對(duì)html元素的margin、padding、borer等屬性的默認(rèn)值是不相同的，如果不進(jìn)行初始化css樣式表，往往就會(huì)出現(xiàn)在不同瀏覽器中顯示效果也不相同，這樣會(huì)造成網(wǎng)頁(yè)顯示異常的情況發(fā)生！通過初始化CSS樣式表，強(qiáng)制讓所有元素的屬性值達(dá)到一樣，瀏覽器中的顯示效果才會(huì)一致，減少或避免出現(xiàn)在某些瀏覽器中不兼容情況的發(fā)生！
初始化CSS的優(yōu)點(diǎn)
1、可以使網(wǎng)頁(yè)在不同瀏覽器中顯示效果一致，減少不兼容性問題的發(fā)生；
2、可以使網(wǎng)頁(yè)代碼更加簡(jiǎn)潔，提高開發(fā)速度；
3、可以使整個(gè)網(wǎng)站的風(fēng)格和樣式更加統(tǒng)一；
初始化CSS的缺點(diǎn)就是會(huì)對(duì)搜索引擎優(yōu)化造成小的影響，不過，比起它的優(yōu)點(diǎn)來說，這點(diǎn)缺點(diǎn)算不了什么！
通過前面的講述，我相信大家已經(jīng)知道，在開發(fā)新網(wǎng)頁(yè)或網(wǎng)站之前，有必要先對(duì)CSS樣式表進(jìn)行初始化操作了。
下面我們就例舉幾個(gè)CSS初始化示范代碼
騰訊官網(wǎng)CSS樣式初始化
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
|
雅虎工程師提供的CSS樣式初始化
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}
.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
|
新浪官網(wǎng)CSS樣式初始化
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}
|
麥站官網(wǎng)CSS樣式初始化
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,code,del,em,img,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td{border:none;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}
body{font-family:"microsoft jhenghei,sans-serif","Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","B8BF53";font-size:12px;margin:0 auto; background:#fff!important}
html,html body{_background-attachment:fixed;}
input:focus{outline:0}
.topArea table{border-collapse:collapse;border-spacing:0}
ol,ul{list-style:none}
th,td{vertical-align:middle}
.Left{float:left}.f_r{float:right}
.r{text-align:right!important}
.c{text-align:center!important}
.l{text-align:left!important}
a{color:#666;text-decoration:none}
a:hover{color:#f60;text-decoration:none}
|
淘寶官網(wǎng)CSS樣式初始化
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, b8bf53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
|
