Home  >  Article  >  Web Front-end  >  css initialization code

css initialization code

高洛峰
高洛峰Original
2016-11-24 09:15:022818browse

一、初始化CSS的作用:

       由于不同的浏览器对CSS的初始化不同,会造成不同的效果。因此每次新开发网站或新网页时候我们通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,为我们节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁,不用考虑很多。


二、需要初始化地方:

        初始化的项一般包括margin,border,padding,color,font等等,大致需要初始化有h1到h4标签、table、文字大小、文字没有链接颜色、超链接样式、DIV、居中、ol、 ul、li、img等等的样式。



三、一些css初始化例子

最耗资源的,最简单的

* { padding: 0; margin: 0; border: 0; } 
yahoo(https://www.yahoo.com/)的初始化
html {https://www.yahoo.com/    background: none repeat scroll 0 0 #FFFFFF;    color: #000000;}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 none;}address, caption, cite, code, dfn, em, strong, th, var {    font-style: normal;    font-weight: normal;}li {    list-style: none outside 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 none;    font-variant: normal;}sup {    vertical-align: text-top;}sub {    vertical-align: text-bottom;}input, textarea, select {    font-family: inherit;    font-size: inherit;    font-weight: inherit;}input, textarea, select {}legend {    color: #000000;}body {    font: 13px/1.231 arial,helvetica,clean,sans-serif;}select, input, button, textarea {    font: 99% arial,helvetica,clean,sans-serif;}table {    font-size: inherit;}pre, code, kbd, samp, tt {    font-family: monospace;    line-height: 100%;}a {    text-decoration: none;}a:hover, a:focus {    text-decoration: underline;}strong {    font-weight: bold;}input[type="submit"] {    cursor: pointer;}button {    cursor: pointer;}


腾讯QQ官网(http://www.qq.com)初始化

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}
新浪官网(http://www.sina.com.cn/)初始化
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;}

淘宝官网(http://www.taobao.com/)初始化

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, \5b8b\4f53; }
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; }
网易官网(http://www.163.com/)初始化
html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}


博客园(http://www.cnblogs.com/)初始化

/*version: 2.7.0*/
html,body{color:#000;background:#FFF;}
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;
}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{
    font-style:inherit;font-weight:inherit;
}
del,ins{text-decoration:none;}
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;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{
    font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;
}
input,button,textarea,select{*font-size:100%;}
.clear{clear:both;}
input::-moz-focus-inner{ border: 0;padding: 0;}
/*added*/
input[type=button],input[type=submit] {-webkit-appearance: button;}


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:div left and right layoutNext article:div left and right layout