欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

介绍一下normalize.css

程序员文章站 2022-07-13 23:08:15
...

前面写过一篇关于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;
}
相关标签: normalize.css