引见一下normalize.css

介绍一下normalize.css

前面写过一篇关于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;}

查看更多 下一篇