Css Reset的作用

时间：2015-1-11类别：Web前端

Css Reset的作用

Css Reset的作用

一、为什么要重置它

当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。

所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

二、CSS Reset 的几种形式

1、最简化的CSS Reset

CSS 代码复制


* {...}{
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

2、实用型CSS Reset

CSS 代码复制


* {...}{
       vertical-align: baseline;
       font-weight: inherit; 
       font-family: inherit; 
       font-style: inherit;
       font-size: 100%;
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

3、Yahoo(YUI) CSS Reset

CSS 代码复制


body,li,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; 
} 
table {...}{ 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
fieldset,img {...}{ 
    border: 0; 
} 
address,caption,cite,code,dfn,em,strong,th,var {...}{ 
    font-weight: normal; 
    font-style: normal; 
} 
ol,ul {...}{ 
    list-style: none; 
} 
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; 
}

4、Eric Meyer’s CSS Reset

CSS 代码复制


html, body, li, 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; 
} 
:focus {...}{ 
    outline: 0; 
} 
body {...}{ 
    background: white; 
    line-height: 1; 
    color: black; 
} 
ol, ul {...}{ 
    list-style: none; 
} 
table {...}{ 
    border-collapse: separate; 
    border-spacing: 0; 
} 
caption, th, td {...}{ 
    font-weight: normal; 
    text-align: left; 
} 
blockquote:before, blockquote:after, q:before, q:after {...}{ 
    content: “”; 
} 
blockquote, q {...}{ 
    quotes: “” “”; 
}

5、Rudeworks Reset CSS

CSS 代码复制


* {...}{ 
    margin: 0; 
    padding: 0; 
    border: none; 
} 
html {...}{ 
    font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif; 
    text-shadow: #000 0px 0px 0px; 
} 
ul {...}{ 
    list-style: none; 
    list-style-type: none; 
} 
h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address {...}{ 
    font-weight: normal; 
    margin: 0 0 1em 0; 
} 
cite, em, dfn {...}{ 
    font-style: italic; 
} 
sup {...}{ 
    position: relative; 
    bottom: 0.3em; 
    vertical-align: baseline; 
} 
sub {...}{ 
    position: relative; 
    bottom: -0.2em; 
    vertical-align: baseline; 
} 
li, dd, blockquote {...}{ 
    margin-left: 1em; 
} 
code, kbd, samp, pre, tt, var, input[type='text'], textarea {...}{ 
    font-size: 100%; 
    font-family: monaco, “Lucida Console”, courier, mono-space; 
} 
del {...}{ 
    text-decoration: line-through; 
} 
ins, dfn {...}{ 
    border-bottom: 1px solid #ccc; 
} 
small, sup, sub {...}{ 
    font-size: 85%; 
} 
标签：css

Css Reset的作用

Css Reset的作用

猜您喜欢

热门推荐