Normalize.css 中文注释版,方便跟我一样的菜鸟学习。

在学习Bootstrap的时候,接触到了Normalize.css。查了一下相关的资料。觉得用这个来做CSS样式的重置话还是不错的。就用谷歌英语翻译了一下,方便想我一样的学渣研究学习。

Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS resetNormalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

Normalize.css是一种CSS reset的替代方案。经过@necolas@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样。

我们创造normalize.css有下面这几个目的:

  • 保护有用的浏览器默认样式而不是完全去掉它们
  • 一般化的样式:为大部分HTML元素提供
  • 修复浏览器自身的bug并保证各浏览器的一致性
  • 优化CSS可用性:用一些小技巧
  • 解释代码:用注释和详细的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则,但我们还是在合适的地方使用了更实用的默认值。

Normalize.css (图)

下面是中文注释的normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/*翻译李大壮|www.lidazhuang.com*/
/**
* 1. 在所有浏览器中更改默认字体系列 (opinionated).
* 2. 更正所有浏览器中的行高.
* 3. 防止在更改方向后调整字体大小
* IE on Windows Phone and in iOS.
*/

/* 文件
========================================================================== */

html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}

/* 部分
========================================================================== */

/**
* 删除所有浏览器中的边距 (opinionated).
*/

body {
margin: 0;
}

/**
* 在IE9-添加正确的显示。
*/

article,
aside,
footer,
header,
nav,
section {
display: block;
}

/**
* 修正`section` `article` 中h1在Chrome, Firefox, and Safari 的字体大小与边距问题
*/

h1 {
font-size: 2em;
margin: 0.67em 0;
}

/* 分组内容
========================================================================== */

/**
* 在IE9-添加正确的显示。
* 1. 在IE添加正确的显示。
*/

figcaption,
figure,
main { /* 1. 在IE添加正确的显示。*/
display: block;
}

/**
*在IE8-添加正确的显示。
*/

figure {
margin: 1em 40px;
}

/**
* 1. 在Firefox中添加正确的框大小。
* 2. 在Edge和IE中显示溢出。
*/

hr {
box-sizing: content-box; /*在Firefox中添加正确的框大小。 */
height: 0; /* 在Edge和IE中显示溢出。 */
overflow: visible; /* 在Edge和IE中显示溢出。 */
}

/**
* 1. 更正所有浏览器中字体大小的继承和缩放。
* 2. 在所有浏览器中更正 em字体大小。
*/

pre {
font-family: monospace, monospace; /* 更正所有浏览器中字体大小的继承和缩放。 */
font-size: 1em; /* 在所有浏览器中更正 em字体大小。 */
}

/* 文本级语义
========================================================================== */

/**
* 1. 删除IE 10中活动链接上的灰色背景。
* 2. 删除iOS 8+和Safari 8+中带下划线的链接中的间隙。
*/

a {
background-color: transparent; /* 删除IE 10中活动链接上的灰色背景。 */
-webkit-text-decoration-skip: objects; /* 删除iOS 8+和Safari 8+中带下划线的链接中的间隙。 */
}

/**
* 在所有浏览器中删除A标签活动状态或者鼠标经过时状态的轮廓。
*/

a:active,
a:hover {
outline-width: 0;
}

/**
* 1. 删除Firefox 39-中的底部边框。
* 2. 在Chrome,Edge,IE,Opera和Safari中添加正确的文字装饰。
*/

abbr[title] {
border-bottom: none; /* 删除Firefox 39-中的底部边框。 */
text-decoration: underline; /* 在Chrome,Edge,IE,Opera和Safari中添加正确的文字装饰。 */
text-decoration: underline dotted; /* 在Chrome,Edge,IE,Opera和Safari中添加正确的文字装饰。 */
}

/**
* 通过Safari 6中的下一个规则防止重复应用“边框”。
*/

b,
strong {
font-weight: inherit;
}

/**
* 在Chrome,Edge和Safari中添加正确的字体重量。
*/

b,
strong {
font-weight: bolder;
}

/**
* 1. 更正所有浏览器中字体大小的继承和缩放。
* 2.更正所有浏览器中em的字体大小。
*/

code,
kbd,
samp {
font-family: monospace, monospace; /* 更正所有浏览器中字体大小的继承和缩放。 */
font-size: 1em; /* 更正所有浏览器中em的字体大小。 */
}

/**
* 在Android 4.3-中添加正确的字体样式。
*/

dfn {
font-style: italic;
}

/**
* 在IE9-中添加正确的背景和颜色。
*/

mark {
background-color: #ff0;
color: #000;
}

/**
* 在所有浏览器中添加正确的字体大小。
*/

small {
font-size: 80%;
}

/**
* 防止`sub`和`sub`元素影响所有浏览器中的行高。
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/* 嵌入内容
========================================================================== */

/**
* 在IE9-中添加正确的显示。
*/

audio,
video {
display: inline-block;
}

/**
* 在iOS 4-7中添加正确的显示。
*/

audio:not([controls]) {
display: none;
height: 0;
}

/**
* 删除IE 10中链接内图像上的边框。
*/

img {
border-style: none;
}

/**
* 隐藏IE中的溢出。
*/

svg:not(:root) {
overflow: hidden;
}

/* 表单
========================================================================== */

/**
* 1. 更改所有浏览器中的字体样式(建议)。
* 2. 删除Firefox和Safari中的边距。
*/

button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 更改所有浏览器中的字体样式(建议)。 */
font-size: 100%; /* 更改所有浏览器中的字体样式(建议)。 */
line-height: 1.15; /* 更改所有浏览器中的字体样式(建议)。 */
margin: 0; /* 删除Firefox和Safari中的边距。 */
}

/**
* 在IE中显示溢出。
* 1. 在Edge中显示溢出。
*/

button,
input { /*在Edge中显示溢出。 */
overflow: visible;
}

/**
* 删除Edge,Firefox和IE中的文本变换的继承。
* 1. 在Firefox中删除文本变换的继承。
*/

button,
select { /* 在Firefox中删除文本变换的继承。*/
text-transform: none;
}

/**
* 1. 防止WebKit错误,其中(2)销毁本地音频和视频控件在Android 4。
* 2. 更正了iOS和Safari中无法创建可点击类型的样式。
*/

button,
html [type=”button”], /* 防止WebKit错误,其中(2)销毁本地音频和视频控件在Android 4。 */
[type=”reset”],
[type=”submit”] {
-webkit-appearance: button; /* 更正了iOS和Safari中无法创建可点击类型的样式。 */
}

/**
* 删除Firefox中的内边框和内边距。
*/

button::-moz-focus-inner,
[type=”button”]::-moz-focus-inner,
[type=”reset”]::-moz-focus-inner,
[type=”submit”]::-moz-focus-inner {
border-style: none;
padding: 0;
}

/**
*恢复由上一个规则未设置的焦点样式。
*/

button:-moz-focusring,
[type=”button”]:-moz-focusring,
[type=”reset”]:-moz-focusring,
[type=”submit”]:-moz-focusring {
outline: 1px dotted ButtonText;
}

/**
* 更改所有浏览器中的边框,边距和内边距。
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

/**
* 1. 更正在Edge和IE中包装的文本。
* 2. 更正IE中的“fieldset”元素的颜色继承。
* 3. 删除填充,以便开发人员在所有浏览器中清除`fieldset`元素时不会出现。
*/

legend {
box-sizing: border-box; /* 更正在Edge和IE中包装的文本。*/
color: inherit; /* 更正IE中的“fieldset”元素的颜色继承。 */
display: table; /* 更正在Edge和IE中包装的文本。 */
max-width: 100%; /* 更正在Edge和IE中包装的文本。 */
padding: 0; /* 删除填充,以便开发人员在所有浏览器中清除`fieldset`元素时不会出现。*/
white-space: normal; /* /* 更正在Edge和IE中包装的文本。*/ */
}

/**
* 1. 在IE9-中添加正确的显示。
* 2. 在Chrome,Firefox和Opera中添加正确的垂直对齐方式。
*/

progress {
display: inline-block; /* 在IE9-中添加正确的显示。 */
vertical-align: baseline; /*在Chrome,Firefox和Opera中添加正确的垂直对齐方式。*/
}

/**
* 删除IE中的默认垂直滚动条。
*/

textarea {
overflow: auto;
}

/**
* 1. 在IE 10-中添加正确的框大小。
* 2. 删除IE 10中的填充。
*/

[type=”checkbox”],
[type=”radio”] {
box-sizing: border-box; /* 在IE 10-中添加正确的框大小。 */
padding: 0; /* 删除IE 10中的填充。 */
}

/**
* 更正Chrome中的增量和减少按钮的游标样式。
*/

[type=”number”]::-webkit-inner-spin-button,
[type=”number”]::-webkit-outer-spin-button {
height: auto;
}

/**
* 1. 更正Chrome和Safari中的妙明奇妙的外观。
* 2. 更正Safari中的大纲样式。
*/

[type=”search”] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}

/**
* 在Mac操作系统上删除Chrome和Safari中的内部填充和取消按钮。
*/

[type=”search”]::-webkit-search-cancel-button,
[type=”search”]::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
* 1. 更正了iOS和Safari中无法创建可点击类型的样式。
* 2. 在Safari中将字体属性更改为“inherit”。
*/

::-webkit-file-upload-button {
-webkit-appearance: button; /* 更正了iOS和Safari中无法创建可点击类型的样式。 */
font: inherit; /* 在Safari中将字体属性更改为“inherit”。 */
}

/* 交互
========================================================================== */

/*
* 在IE9-中添加正确的显示。
* 1. 在Edge,IE和Firefox中添加正确的显示。
*/

details, /* 在Edge,IE和Firefox中添加正确的显示。 */
menu {
display: block;
}

/*
* 在所有浏览器中添加正确的显示。
*/

summary {
display: list-item;
}

/* 脚本
========================================================================== */

/**
* 在IE9-中添加正确的显示。
*/

canvas {
display: inline-block;
}

/**
*在IE中添加正确的显示。
*/

template {
display: none;
}

/* 隐藏
========================================================================== */

/**
* 在IE 10-中添加正确的显示。
*/

[hidden] {
display: none;
}

百度网盘下载地址:链接:http://pan.baidu.com/s/1c10gwX6 密码:2shb

原创文章,作者:Da Zhuang,如若转载,请注明出处:https://www.lidazhuang.cn/web/864.html

(0)
上一篇 2016年9月30日
下一篇 2016年10月25日
联系我