您的位置:首页 > Web前端 > CSS

CSS 样式的重置 --设计一款属于自己的重置样式

2016-07-16 22:50 441 查看


CSS样式的重置


   关于CSS样式的重置没有什么规范,适合自己的才是最好的,我们需要的就是能够一次书写可以多次使用,尽量使我们的重置样式变得更加全面,能满足基本的网页编写,下面我们举几个例子:

1.以新浪为例:

<span style="font-size:32px;">html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }</span>


2、以腾讯为例:

<span style="font-size:32px;">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;}
a{color:#172c45;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}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:0;}</span>

3、搜狐

<span style="font-size:32px;">body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}</span>


 看完这三个例子,我们就可以集各家之长,书写属于自己专有的重置样式了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息