CSS Reset的历史(一）
- sprite.evan - 黑客志当艺术家开始准备创作一幅新的画作时，他们不会先去拿镉红或是酞菁蓝的颜料，而是会首先准备好一张新的画布，为什么. 因为对于他们来说，首先需要确保新画布足够平展并且洁净. 许多Web设计师也喜欢使用CSS Reset来”准备“他们的浏览器画布，以确保他们的设计能够在不同的浏览器和系统下拥有同样的呈现. 这篇文章是关于CSS reset的系列文章的第一篇.
为什么css 会使用重置 reset 样式
标签：
构建
| 发表时间：2014-04-08 14:58 | 作者：alon
出处：http://varhi.com
我们知道不同的浏览器客户端默认对css的解析会有区别，这种区别是内置到浏览器中的，也就是浏览器客户端会有其本身的一套css来解析默认的页面，如果 IE/Firefox/Chrome 每个版本的默认样式表都是一致的，那么我们的重置样式可以基于这些浏览器内置的样式，理论上将是不是渲染速度会更快一些呢？实际情况可能并不是这样子，包括IE 他们的不同版本的默认css也是不一样的.如下：
| IE6 | IE7 | IE8 | IE9 | |
|---|---|---|---|---|
| a |
color: #00F;
text-decoration: underline;
|
color: #06C;
text-decoration: underline;
|
||
| a:visited |
color: #800080;
|
|||
| address |
display: block;
font-style: italic;
|
|||
| b |
font-weight: bold;
|
|||
| bdo |
direction: rtl;
unicode-bidi: bidi-override;
|
|||
| blockquote |
display: block;
margin: 14pt 30pt;
|
display: block;
margin: 1em 40px;
|
||
| body |
display: block;
margin: 15px 10px;
zoom: 1;
|
display: block;
margin: 8px;
zoom: 1;
|
||
| button |
background-color: #D4D0C8;
border-style: outset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
|
background-color: #F0F0F0;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
|
background-color: #F0F0F0;
border-width: 3px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px 8px;
text-align: center;
zoom: 1;
|
|
| caption |
display: block;
padding: 1px 3px 5px;
text-align: center;
zoom: 1;
|
display: block;
padding: 1px 300zzz 500zzz;
text-align: center;
zoom: 1;
|
display: table-caption;
text-align: center;
zoom: 1;
|
|
| cite |
font-style: italic;
|
|||
| code |
font-family: monospace;
font-size: 10pt;
|
|||
| col |
border-color: #D4D0C8;
display: block;
|
border-color: #F0F0F0;
display: block;
|
box-sizing: border-box;
display: table-column;
|
|
| colgroup |
border-color: #D4D0C8;
display: block;
|
border-color: #F0F0F0;
display: block;
|
box-sizing: border-box;
display: table-column-group;
|
|
| dd |
display: block;
margin: 0 0 0 30pt;
|
display: block;
margin: 0 0 0 40px;
|
||
| del |
text-decoration: line-through;
|
|||
| dfn |
font-style: italic;
|
|||
| div |
display: block;
|
|||
| dl |
display: block;
margin: 14pt 0;
|
display: block;
margin: 1em 0;
|
||
| dt |
display: block;
|
|||
| em |
font-style: italic;
|
|||
| embed |
zoom: 1;
|
|||
| fieldset |
border-style: groove;
border-width: 2px;
display: block;
zoom: 1;
|
border-style: groove;
border-width: 2px;
display: block;
padding: 0 2px 3px;
zoom: 1;
|
border-style: groove;
border-width: 2px;
display: block;
margin: 0 2px;
padding: 0 2px 3px;
zoom: 1;
|
|
| form |
display: block;
margin: 14pt 0;
|
display: block;
|
||
| h1 |
display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;
|
||
| h2 |
display: block;
font-size: 18pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
page-break-after: avoid;
|
||
| h3 |
display: block;
font-size: 13.55pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
page-break-after: avoid;
|
||
| h4 |
display: block;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 1em;
font-weight: bold;
margin: 1.33em 0;
page-break-after: avoid;
|
||
| h5 |
display: block;
font-size: 10pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
page-break-after: avoid;
|
||
| h6 |
display: block;
font-size: 7.55pt;
font-weight: bold;
margin: 14pt 0;
|
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
page-break-after: avoid;
|
||
| head |
display: none;
|
|||
| hr |
text-align: center;
zoom: 1;
|
outline: 0 none;
text-align: center;
zoom: 1;
|
border-style: inset;
border-width: 1px;
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
overflow: hidden;
text-align: center;
zoom: 1;
|
|
| html |
overflow-x: auto;
overflow-y: scroll;
zoom: 1;
|
display: block;
zoom: 1;
|
||
| i |
font-style: italic;
|
|||
| iframe |
background-color: #FFF;
height: 150px;
width: 300px;
zoom: 1;
|
|||
| img |
zoom: 1;
|
|||
| input |
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
|
background-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
|
||
| ins |
text-decoration: underline;
|
|||
| kbd |
font-family: monospace;
font-size: 10pt;
|
|||
| legend |
zoom: 1;
|
padding: 0 2px;
zoom: 1;
|
||
| li |
display: block;
|
display: list-item;
|
||
| menu |
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
|
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
|
||
| object |
zoom: 1;
|
|||
| ol |
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 14pt 0 14pt 30pt;
|
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 1em 0;
padding: 0 0 0 30pt;
|
||
| optgroup |
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
|
|||
| option |
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
|
|||
| p |
display: block;
margin: 14pt 0;
|
display: block;
margin: 1em 0;
|
||
| pre |
display: block;
font-family: monospace;
font-size: 10pt;
white-space: pre;
|
display: block;
font-family: monospace;
font-size: 10pt;
margin: 1em 0;
white-space: pre;
|
||
| rp |
font-size: 6pt;
|
|||
| rt |
font-size: 6pt;
|
display: ruby-text;
font-size: 6pt;
|
||
| ruby |
display: ruby;
|
|||
| samp |
font-family: monospace;
font-size: 10pt;
|
|||
| script |
display: none;
zoom: 1;
|
|||
| select |
border-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
zoom: 1;
|
background-color: #FFF;
border-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
|
background-color: #FFF;
border-width: 1px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
|
|
| small |
font-size: 10pt;
|
font-size: 0.83em;
|
||
| strong |
font-weight: bold;
|
|||
| style |
display: none;
zoom: 1;
|
|||
| sub |
font-size: 10pt;
|
font-size: 0.83em;
|
||
| sup |
font-size: 10pt;
|
font-size: 0.83em;
|
||
| table |
border-color: #D4D0C8;
display: block;
zoom: 1;
|
border-color: #F0F0F0;
display: block;
zoom: 1;
|
border-color: #F0F0F0;
border-spacing: 2px 2px;
box-sizing: border-box;
display: table;
zoom: 1;
|
|
| tbody |
border-color: #D4D0C8;
display: block;
|
border-color: #F0F0F0;
display: block;
|
box-sizing: border-box;
display: table-row-group;
vertical-align: middle;
|
|
| td |
border-color: #D4D0C8;
display: block;
padding: 1px;
zoom: 1;
|
border-color: #F0F0F0;
display: block;
padding: 1px;
zoom: 1;
|
display: table-cell;
padding: 1px;
vertical-align: middle;
zoom: 1;
|
|
| textarea |
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 1px;
white-space: pre;
zoom: 1;
|
background-color: #FFF;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre;
zoom: 1;
|
background-color: #FFF;
border-width: 1px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre-wrap;
zoom: 1;
|
|
| tfoot |
border-color: #D4D0C8;
display: block;
|
border-color: #F0F0F0;
display: block;
|
box-sizing: border-box;
display: table-footer-group;
vertical-align: middle;
|
|
| th |
border-color: #D4D0C8;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
|
border-color: #F0F0F0;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
|
display: table-cell;
font-weight: bold;
padding: 1px;
text-align: center;
vertical-align: middle;
zoom: 1;
|
|
| thead |
border-color: #D4D0C8;
display: block;
|
border-color: #F0F0F0;
display: block;
|
box-sizing: border-box;
display: table-header-group;
vertical-align: middle;
|
|
| tr |
border-color: #D4D0C8;
display: block;
zoom: 1;
|
border-color: #F0F0F0;
display: block;
zoom: 1;
|
box-sizing: border-box;
display: table-row;
vertical-align: middle;
zoom: 1;
|
|
| ul |
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
|
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
|
||
| var |
font-style: italic;
|
|||
原文来自： http://www.iecss.com/
相关 [css reset] 推荐：
CSS Reset是什麼? 能吃嗎?
- 達 - 黑暗執行緒世上最遙遠的距離不是生與死，而是網頁在不同瀏覽器差了1個pixel，怎麼調都搞不定. 不少網頁設計人員應該都有過經驗，設計得好好的網頁，換個瀏覽器檢視，排版就出現問題. 例如: 用
圖檔與背景圖擋的位置精算位移接合圖檔，在Firefox下密合得天衣無綘，但換到IE、Safari檢視，卻左右相差一個Pixel，甚至在IE的不同版本顯示結果也不盡相同，為了一個Pixel，調來調去調成仇，搞到設計人員想跳樓.
Eric Meyer又更新reset css了
- lostsnow - 走走停停看看前几天Eric Meyer又思考了一下reset.css的问题，于是有所更新，具体为何要这样做，请看原文Reset Revisited.
为什么css 会使用重置 reset 样式
- - 收集分享互联网资源!我们知道不同的浏览器客户端默认对css的解析会有区别，这种区别是内置到浏览器中的，也就是浏览器客户端会有其本身的一套css来解析默认的页面，如果 IE/Firefox/Chrome 每个版本的默认样式表都是一致的，那么我们的重置样式可以基于这些浏览器内置的样式，理论上将是不是渲染速度会更快一些呢. 实际情况可能并不是这样子，包括IE 他们的不同版本的默认css也是不一样的.如下：.
css reset重置样式有那么重要吗？
- - SegmentFault 最新的文章在以前写html代码的时候，一般都会在head里添加重置样式reset.css，其内容如下：. 但是最近在网上看了看网络文章，也感觉有些重置是没有用的. CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”. 有时候看到别人网站站的一些重置是这样的：. div{margin:0; padding:0;}属性呢.
select的最佳预设（reset）
- - 携程UED 我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要 外形CSS属性的支持，打造全兼容select. 我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各浏览器上测试三种情况：height.100.padding.0、height.no.padding.100、no.height.no.padding，结果如 链接图片各浏览器DEMO外观.
CSS图形
- GLORY - 酷壳 - CoolShell.cn下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码. 经测试，IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.
用 Compass 寫 CSS
- Jay - Blog.XDite.net最近在開發一個新產品，整體來說應該是接近寫完了，不過越接近完工，抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass，說這東西超神奇，超好用，還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了，只是文件實在看起來太他媽的眼花繚亂，因為專案進度一直在跑，不太敢貿然換掉寫 CSS 的方式.
CSS 入门
- - 博客 - 伯乐在线级联样式表非常简单，也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”，这样您就可以跨站点应用它 — 也就是说，将样式应用到网站，它就会自行应用到每个网页的每个元素. ●XHTML：可扩展 HTML. 对于网站，将数据与设计分离是一个重要的概念：数据使用 (X)HTML 发送到 浏览器，而设计使用 CSS 应用到该数据.
css 圆角
- - CSDN博客推荐文章作者：kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读：6 评论：0 查看评论.