html中的样式重置,CSS重置样式

先来看看各大型网站的重置样式

新浪初始化

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: 0

}

img {

display: block

}

address,caption,cite,code,dfn,th,var {

font-style: normal;

font-weight: normal

}

ul,ol {

list-style: none

}

input {

padding-top: 0;

padding-bottom: 0;

font-family: "SimSun","宋体"

}

input::-moz-focus-inner {

border: 0;

padding: 0

}

select,input {

vertical-align: middle

}

select,input,textarea {

font-size: 12px;

margin: 0

}

input[type="text"],input[type="password"],textarea {

outline-style: none;

-webkit-appearance: none

}

textarea {

resize: none

}

table {

border-collapse: collapse

}

京东的初始化

* {

margin: 0;

padding: 0

}

em,i {

font-style: normal

}

li {

list-style: none

}

img {

border: 0;

vertical-align: middle

}

button {

cursor: pointer

}

a {

color: #666;

text-decoration: none

}

a:hover {

color: #c81623

}

我对样式重置的看法

一、什么时候会用重置样式？

1、其实每个网站的重置样式应该都是不同的。

2、没有必要的样式或者是会再次对这个标签写样式的时候，浏览器就会二次渲染，所以也要尽量的减少重置样式。

3、我们应该合理灵活的使用标签，在网页中有些样式是一模一样的，比如所有或者是大部分的文本p标签中字体样式一样而且行高也一样，那么可以统一设置。包括其他标签，在大量使用的过程中可以统一设置margin,padding,width,height,display,text-align等，这样可以减少css样式，代码简洁，可读可改性高。

二、怎么用重置样式？

1、重置css可以整体的调整整个网站的基本样式，比如网页占据的大部分字体样式，字体大小，字体颜色，还有最基本的有序无序列表和a链接的样式。

2、在一批拥有同样的头部脚部的样式中，我会把公共的样式放在重置样式表里。

3、还有针对网站的个别标签的样式特殊处理，比如我所有的a链接都应该是蓝色的等。

4、在需要大幅度使用的样式的时候，会另取一个类名主要针对需要此样式的标签，比如flyLeft{float:left};，flyRight{float:right};向左向右浮动的样式，或者是清除浮动的样式。

我的重置样式表

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{

margin: 0;

}

ol,ul{

margin: 0;

padding: 0;

}

li{

list-style: none

}

input,button,textarea{

padding: 0;

}

/*另外：button和input本身有2px的边框，textarea和select本身有1px的边框，根据实际情况调整，或是去掉边框*/

table{

/*为表格设置合并边框模型*/

border-collapse: collapse;

/*设置表格边框之间的空白*/

border-spacing: 0px;

}

/*去掉a链接的下划线*/

a{

text-decoration: none;

}

a:hover{

text-decoration: none;

}

/*个别浏览器对语义化标签的兼容*/

header, section, footer, aside, nav, main, article, figure {

display: block;

}

h1,h2,h3,h4,h5,h6,em,i,b,cite {

/*字体样式不加粗*/

font-weight: normal;

font-style: normal;

}

a,input,button {

/* 清除点击阴影 */

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

body * {

/* 选中文字设置 */

-weibkit-user-select: none;

/* 禁止文字缩放 */

-webkit-text-size-adjust: 100%;

}