Css Reset(复位)整理

九阴争茎oO

九阴争茎oO

2016-02-19 19:53

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐Css Reset(复位)整理,希望大家看完后也有个好心情,快快行动吧!

Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....
相信看完全文您会对Css Reset有个重新的认识

原文地址:
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

PS:

* {   
 padding: 0;   
 margin: 0;   
 } 

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

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

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

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

非常感谢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;   
 }   

展开更多 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刺客新符文搭配推荐

ACCESS通过网络同步数据

ACCESS通过网络同步数据

插入的Flash添加透明或其他参数

插入的Flash添加透明或其他参数
下拉加载更多内容 ↓