在学习Bootstrap的时候,接触到了Normalize.css。查了一下相关的资料。觉得用这个来做CSS样式的重置话还是不错的。就用谷歌英语翻译了一下,方便想我一样的学渣研究学习。
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset
,Normalize.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 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
原创文章,作者:大壮同学,如若转载,请注明出处:https://www.lidazhuang.cn/web/864.html