介绍一下normalize.css
程序员文章站
2022-07-13 23:08:09
...
前面写过一篇关于reset.css的一些思考与探究
这篇主要是介绍一下 normalize.css
----- A modern,HTML5-ready alternative to CSS resets
下面部分内容来源于http://necolas.github.com/normalize.css/ 本人简单地做一些简单的翻译工作:
1、它能做什么?
- 保留有用的默认值,这个区别于其他的CSS resets
- 标准化大范围的HTML elements的样式
- 纠正bugs,使浏览器具体通用性
- 通过一些巧妙的改进来增强可用性
- 用具体的说明来讲解代码的用处
2、代码详谈
------ 下面我结合源码来与YUI reset.css进行比较
相同点:
/*一致的*/ table{ border-collapse:collapse; border-spacing:0; }
不同点:
q:before,q:after{ content:''; //YUI reset } q:before,q:after{ content:''; content:none; //normalize 新加的 }
字体方面:
/*YUI reset.css*/ h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; } /*normalize.css*/ h1{ font-size:2em; margin:0.67em 0; } h2{ font-size:1.5em; margin:0.83em 0; } h3{ font-size:1.17em; margin:1em 0; } h4{ font-size:1em; margin:1.33em 0; } h5{ font-size:0.83em; margin:1.67em 0; } h6{ font-size:0.75em; margin:2.33em 0; }
html的设置
------ 关于下面的规则我在chrome浏览器font-size<12px 提到过
html{ font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
增加了对img的处理
/*YUI reset.css*/ img{ border:0; } /*normalize.css*/ img{ border:0; -ms-interpolation-mode:bicubic; /*解决ie7的图片拉伸的bug*/ }
增加了对textarea的设置
textarea{ overflow:auto; /*去掉IE下垂直滚动条*/ vertical-align:top; /*增加可读性和alignment*/ }
增加了对form元素字体设置
html, button, input, select, textarea{ font-family:sans-serif; }
增加了fieldset的设置
/*YUI reset.css*/ fieldset{ border:0; } /*normalize.css*/ fieldset{ border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em; }
增加了对a的设置
a:focus{ outline:thin dotted; /*Chrome下的特殊的outline的重置*/ } a:hover,a:active{ outline:0; }