Css Reset(復位)整理

峡谷中的稻草人

峡谷中的稻草人

2016-02-19 19:48

今天图老师小编要跟大家分享Css Reset(復位)整理,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

  Css Reset是什麽?有些同行叫 "css复位",有些可能叫 "默认css".....

  相信看完全文您会对Css Reset有个重新的认识

  PS:

  程序代码

* {  
padding: 0;  
margin: 0;  
}

  这就是最常用的Css Reset,但是这里会有很多问题.

  原文前部分说了很多关於Css,以及各浏览器的css规则的不同,而制定"Css Reset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱.

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  非常感谢Perishable的整理与归纳

  下面是关於几类Css Reset的简单介绍,作者能力有限,只能理解大概意思,还请各位看官见谅.

  Minimalistic Reset [ Version 1 ]

  相信这一段你经常看到,而且也是我们经常用到的

  程序代码

* {  
padding: 0;  
margin: 0;  
} 
Minimalistic Reset [ Version 2 ]

  border:0的设计有些不靠谱了

  程序代码

* {  
padding: 0;  
margin: 0;  
border: 0;  
}
Minimalistic Reset [ Version 3 ]

  当然这个也是不推荐的,会跟某些默认样式有冲突

  程序代码

* {  
outline: 0;  
padding: 0;  
margin: 0;  
border: 0;  
}
Condensed Universal Reset

  这是作者当前比较锺意的一种写法,保证了相对普遍浏览器样式的统一性.

  程序代码

* {  
vertical-align: baselinebaseline;  
font-weight: inherit;  
font-family: inherit;  
font-style: inherit;  
font-size: 100%;  
border: 0 none;  
outline: 0;  
padding: 0;  
margin: 0;  
}
Poor Man's Reset

  其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理

  也经常在某些站点看到

  程序代码

html, body {  
padding: 0;  
margin: 0;  
}  
html {  
font-size: 1em;  
}  
body {  
font-size: 100%;  
}  
a img, :link img, :visited img {  
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;  
}  

  Yahoo CSS Reset

  yahoo这帮家伙写的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;  
}

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

Css Reset(復位)整理

Web开发
Css Reset(復位)整理

Css Reset(复位)整理

Web开发
Css Reset(复位)整理

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

重置默认样式:css reset

Web开发
重置默认样式:css reset

Css Reset(复位)的简单介绍

Web开发
Css Reset(复位)的简单介绍

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

简化的CSS Reset:15套CSS重设实例

Web开发
简化的CSS Reset:15套CSS重设实例

CSS Hack整理

Web开发
CSS Hack整理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

再见青春的伤感分组名称_我们最后隆重退场

再见青春的伤感分组名称_我们最后隆重退场

网页制作:不同浏览器CSS Hack写法

网页制作:不同浏览器CSS Hack写法
下拉加载更多内容 ↓