博客园  :: 联系 :: 管理

【集】reset.css 收藏

Posted on 2010-08-04 09:37  独孤雁  阅读(339)  评论(0编辑  收藏  举报

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

 

 

 

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

 

代码
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;
}

 

 

 

OK,相信你也已经了解了CSS重设的目的,或许你也可以根据自己的喜好,写一个自己的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;
}

 

 

 

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%;
font-family
: inherit;
vertical-align
: baseline;
}
:focus
{
outline
: 0;
}
table
{
border-collapse
: separate;
border-spacing
: 0;
}
caption, th, td
{
text-align
: left;
font-weight
: normal;
}
a img, iframe
{
border
: none;
}
ol, ul
{
list-style
: none;
}
input, textarea, select, button
{
font-size
: 100%;
font-family
: inherit;
}
select
{
margin
: inherit;
}
/* Fixes incorrect placement of numbers in ol's in IE6/7 */
ol
{ margin-left:2em; }
/* == clearfix == */
.clearfix:after
{
content
: ".";
display
: block;
height
: 0;
clear
: both;
visibility
: hidden;
}
.clearfix
{display: inline-block;}
* html .clearfix
{height: 1%;}
.clearfix
{display: block;}

 

KISSY CSS Reset

代码
/*
KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
/* structural elements 结构元素 */
dl, dt, dd, ul, ol, li,
/* list elements 列表元素 */
pre,
/* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea,
/* form elements 表单元素 */
th, td
{ /* table elements 表格元素 */
margin
: 0;
padding
: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea
{ /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font
: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}

h1
{ font-size: 18px; /* 18px / 12px = 1.5 */ }
h2
{ font-size: 16px; }
h3
{ font-size: 14px; }
h4, h5, h6
{ font-size: 100%; }

address, cite, dfn, em, var
{ font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt
{ font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small
{ font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

/* 重置列表元素 */
ul, ol
{ list-style: none; }

/* 重置文本格式元素 */
a
{ text-decoration: none; }
a:hover
{ text-decoration: underline; }

abbr[title], acronym[title]
{ /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom
: 1px dotted;
cursor
: help;
}

q:before, q:after
{ content: ''; }

/* 重置表单元素 */
legend
{ color: #000; } /* for ie6 */
fieldset, img
{ border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea
{
font-size
: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table
{
border-collapse
: collapse;
border-spacing
: 0;
}

/* 重置 hr */
hr
{
border
: none;
height
: 1px;
}

/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html
{ overflow-y: scroll; }
测试页面在这里:CSS Reset Test.