网站制作学习网经验与学习→正文:什么是CSSReset
字体:

什么是CSSReset

经验与学习 2009/11/9 12:36:50  点击:不统计

通常情况下,它也被写成Reset CSS,即重设浏览器的样式。在各种浏览器中,都会对

CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏

览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器中表现一致。

* {   
 padding: 0;   
 margin: 0;   
 } 

这也是一款CSS Reset的方法,让所有的选择器的padding、margin和border都设置成0。这是

一种强大的方法,也是最简单,最安全的方法,不过,也是最占用资源的方法。对于小型的

网站来说,用这个并不会带来大的资源浪费,但如果是像Yahoo这种架构非常大的网站,则需

要有选择地进行CSS重设,以减少资源浪费。现在www.forasp.cn整理了网上几种常见的css复

位的代码,供大家交流学习:


一、Yahoo的CSS重设代码,也是受最多人喜爱的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;   
 }

 

二、Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.而且这类规则是针对的是某些重要的常用浏览器,比如ie,firefox等

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,    
form, fieldset, input, p, blockquote, table, th, td, embed, object {   
 padding: 0;   
 margin: 0;    
 }   

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

fieldset, img, abbr {   
 border: 0;   
 }  
 
address, caption, cite, code, dfn, em,    
h1, h2, h3, h4, h5, h6, strong, th, var {   
 font-weight: normal;   
 font-style: normal;   
 }  
 
ul {   
 list-style: none;   
 }   

caption, th {   
 text-align: left;   
 }   

h1, h2, h3, h4, h5, h6 {   
 font-size: 1.0em;   
 }   

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

a, ins {   
 text-decoration: none;   
 }

 

三、Erik Meyer’s CSS Reset
作者将Erik Meyer的代码重新整理了.但功能上还是一样的,这套Css Reset是业内是使用最多的

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: baselinebaseline;   
 font-family: inherit;   
 font-weight: inherit;   
 font-style: inherit;   
 font-size: 100%;   
 outline: 0;   
 padding: 0;   
 margin: 0;   
 border: 0;   
 }   

/* remember to define focus styles! */  
:focus {   
 outline: 0;   
 }   

body {   
 background: white;   
 line-height: 1;   
 color: black;   
 }   

ol, ul {   
 list-style: none;   
 }   

/* tables still need cellspacing="0" in the markup */  
table {   
 border-collapse: separate;   
 border-spacing: 0;   
 }   

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

/* remove possible quote marks (") from <q> & <blockquote> */  
blockquote:before, blockquote:after, q:before, q:after {   
 content: "";  
 }  
blockquote, q {  
 quotes: "" "";   
 }   

 

四、Condensed Meyer Reset
总的来说这是对Erik Meyer的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;   
 }   

fieldset, img {    
 border: 0;   
 }   

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

ol, ul {   
 list-style: none;   
 }   

address, caption, cite, code, dfn, em, strong, th, var {   
 font-weight: normal;   
 font-style: normal;   
 }   

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

·上一篇:MD5加密文件 >>    ·下一篇:防止数据库被下载 >>
推荐文章
最新文章