介绍一下normalize.css

最新推荐文章于 2024-08-08 07:26:43 发布

最新推荐文章于 2024-08-08 07:26:43 发布 · 259 阅读

文章标签：

#normalize.css

css解决方案专栏收录该内容

25 篇文章

订阅专栏

本文详细对比了normalize.css与常见的CSS重置样式表reset.css，介绍了normalize.css如何保留有用的默认值、标准化HTML元素样式、纠正浏览器bug、增强可用性并提供更具体的代码解释。

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