现在的位置: 首页 > 综合 > 正文

CSS代码分享:浏览器CSS Reset方法十例

2013年06月27日 ⁄ 综合 ⁄ 共 5771字 ⁄ 字号 评论关闭

CSS Reset是指重设浏览器的样式。在52CSS.com以前的文章中,也介绍过相似的知识,但不够深入,今天我们看十个CSS Reset方法的例子,学习这种方法的应用。

在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致。

一、Generic Reset CSS

* {

padding: 0;

margin: 0;

border: 0;

}

这也是一款CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法,也是最简单,最安全的方法,不过,也是最占用资源的方法。对于小型的网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,刚需要有选择地进行CSS重设,以减少资源浪费。

二、Ateneu Popular CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,

h4, h5, h6, p, blockquote, pre, a, abbr, acronym,

address, big, cite, code, del, dfn, em, font, img, ins,

kbd, q, s, samp, small, strike, strong, sub, sup, tt,

var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

:focus { outline: 0;}

a, a:link, a:visited, a:hover, a:active{text-decoration:none}

table { border-collapse: separate;border-spacing: 0;}

th, td {text-align: left; font-weight: normal;}

img, iframe {border: none; text-decoration:none;}

ol, ul {list-style: none;}

input, textarea, select, button {font-size: 100%;font-family: inherit;}

select {margin: inherit;}

hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}



三、Chris Poteet’s Reset CSS

* {

vertical-align: baseline;

font-family: inherit;

font-style: inherit;

font-size: 100%;

border: none;

padding: 0;

margin: 0;

}

body {

padding: 5px;

}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {

margin: 20px 0;

}

li, dd, blockquote {

margin-left: 40px;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

四、Yahoo’s CSS Reset

body,div,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;

}

五、Eric Meyer Reset CSS

html, body, div, 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: “” “”;

}

六、Tantek Celik Reset CSS

:link,:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input

{ margin:0; padding:0 }

a img,:link img,:visited img { border:none }

address { font-style:normal }

七、Christian Montoya Reset CSS

html, body, form, fieldset {

margin: 0;

padding: 0;

font: 100%/120% Verdana, Arial, Helvetica, sans-serif;

}

h1, h2, h3, h4, h5, h6, p, pre,

blockquote, ul, ol, dl, address {

margin: 1em 0;

padding: 0;

}

li, dd, blockquote {

margin-left: 1em;

}

form label {

cursor: pointer;

}

fieldset {

border: none;

}

input, select, textarea {

font-size: 100%;

font-family: inherit;

}

八、Rudeworks Reset 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%;

}

abbr, acronym {

text-transform: uppercase;

font-size: 85%;

letter-spacing: .1em;

border-bottom-style: dotted;

border-bottom-width: 1px;

}

a abbr, a acronym {

border: none;

}

sup {

vertical-align: super;

}

sub {

vertical-align: sub;

}

h1 {

font-size: 2em;

}

h2 {

font-size: 1.8em;

}

h3 {

font-size: 1.6em;

}

h4 {

font-size: 1.4em;

}

h5 {

font-size: 1.2em;

}

h6 {

font-size: 1em;

}

a, a:link, a:visited, a:hover, a:active {

outline: 0;

text-decoration: none;

}

a img {

border: none;

text-decoration: none;

}

img {

border: none;

text-decoration: none;

}

label, button {

cursor: pointer;

}

input:focus, select:focus, textarea:focus {

background-color: #FFF;

}

fieldset {

border: none;

}

.clear {

clear: both;

}

.float-left {

float: left;

}

.float-right {

float: right;

}

body {

text-align: center;

}

#wrapper {

margin: 0 auto;

text-align: left;

}

九、Anieto2K Reset CSS

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p,

blockquote, pre, a, abbr, acronym, address, big,

cite, code, del, dfn, em, font, img,

ins, kbd, q, s, samp, small, strike,

strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

center, u, b, i {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: normal;

font-style: normal;

font-size: 100%;

font-family: inherit;

vertical-align: baseline

}

body {

line-height: 1

}

:focus {

outline: 0

}

ol, ul {

list-style: none

}

table {

border-collapse: collapse;

border-spacing: 0

}

blockquote:before, blockquote:after, q:before, q:after {

content: “”

}

blockquote, q {

quotes: “” “”

}

input, textarea {

margin: 0;

padding: 0

}

hr {

margin: 0;

padding: 0;

border: 0;

color: #000;

background-color: #000;

height: 1px

}

十、CSSLab CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,

h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,

big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend, table, caption, tbody, tfoot,

thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

抱歉!评论已关闭.