Categories: Web前端

h5bp.com的两份css文件的翻译及适应于中文的修改、完善(normalize(翻译、修改).css)

/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* 整合 kissy、yahoo、Dreamweaver、typo */
/* @author shuijingwanwq.com */

/* ==========================================================================
HTML5 display definitions
========================================================================== */
/* ==========================================================================
HTML5 显示定义
========================================================================== */

/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
/**
* 纠正 IE 6/7/8/9 和 Firefox 3 中未定义的 `block` 元素显示
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}

/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
/**
* 纠正 IE 6/7/8/9 和 Firefox 3 中未定义的 `inline-block` 元素显示
*/

audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}

/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
/**
* 防止现代浏览器将没有 controls 属性的 `audio` 元素显示出来
* 删除 iOS 5 设备中多余的高度
*/

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

/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
/**
* 校正 IE 7/8/9,Firefox 3 和 Safari 4 中 `hidden` 属性不起作用的问题
* 已知问题:不支持 IE 6
*/

[hidden] {
display: none;
}

/* ==========================================================================
Base
========================================================================== */
/* ==========================================================================
基础
========================================================================== */

/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
*    user zoom.
* 3. 强制在非 IE 中使用垂直滚动条
*/
/**
* 1、纠正 IE 6/7 中正文字体大小设置为 em 单位时,文本大小调整异常的问题
* 2、在不禁止用户缩放的情况下避免 iOS 设备方向更改后自动调整文本大小
* 3、强制在非 IE 中使用垂直滚动条
*/

html {
font-size: 100%; /* 1 */
overflow-y: scroll; /* 3,Dreamweaver */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}

/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
* 1. html chrome Simsun, others new times
* textarea/button/input/select does not inherit.
* ie8- does not allow ‘inherit’ value.
* textarea chrome/fx monospace ie courier new
* button/input/select chrome/ie arial firefox Simsun
*/
/**
* 校正 `font-family` 在 `textarea` 和其他表单元素间的不一致
* 1、html chrome Simsun, others new times
* textarea/button/input/select does not inherit.
* ie8- does not allow ‘inherit’ value.
* textarea chrome/fx monospace ie courier new
* button/input/select chrome/ie arial firefox Simsun
*/

html,
button,
input,
select,
textarea {
/* font-family: sans-serif; */
font-family: tahoma, arial, \5b8b\4f53, sans-serif; /* 1,kissy */
}

/**
* Address margins handled incorrectly in IE 6/7.
*/
/**
* 校正 IE 6/7 中外边距处理不正确的问题
*/

body {
margin: 0;
}

/* ==========================================================================
Links
========================================================================== */
/* ==========================================================================
链接
========================================================================== */

/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
/**
* 校正 `outline` 在 Chrome 和其他浏览器间的不一致
*/

/**
* kissy.
*/
a {
color: #08c;
text-decoration: none;
/*
* Improves readability when focused and also mouse hovered in all browsers.
* people.opera.com/patrickl/experiments/keyboard/test
*/

}

a:focus {
outline: thin dotted;
}

/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
/**
* 改善在所有浏览器中获取焦点和悬停时的可读性
*/

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

/**
* kissy.
*/
a:hover {
color: #005580;
}

/* ==========================================================================
Typography
========================================================================== */
/* ==========================================================================
排版
========================================================================== */

/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
/**
* 校正 IE 6/7 中字体大小和外边距不同的问题
* 校正 Firefox 4+,Safari 5 和 Chrome 中 `section` 和 `article` 内的字体大小
*/

h1 {
/*
font-size: 2em;
margin: 0.67em 0;
*/
font-size: 18px;
margin: 0;
font-weight: 300;
*font-weight: normal;
}

h2 {
/*
font-size: 1.5em;
margin: 0.83em 0;
*/
font-size: 16px;
margin: 0;
font-weight: 300;
*font-weight: normal;
}

h3 {
/*
font-size: 1.17em;
margin: 1em 0;
*/
font-size: 16px;
margin: 0;
font-weight: 300;
*font-weight: normal;
}

h4 {
/*
font-size: 1em;
margin: 1.33em 0;
*/
margin: 0;
font-weight: 300;
*font-weight: normal;
}

h5 {
/*
font-size: 0.83em;
margin: 1.67em 0;
*/
margin: 0;
font-weight: 300;
*font-weight: normal;
}

h6 {
/*
font-size: 0.67em;
margin: 2.33em 0;
*/
margin: 0;
font-weight: 300;
*font-weight: normal;
}

/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
/**
* 校正 IE 7/8/9, Safari 5 和 Chrome 中样式不呈现的问题
*/

abbr[title] {
border-bottom: 1px dotted;
}

/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
/**
* 校正 Firefox 3+, Safari 4/5 和 Chrome 中 `bolder` 的样式
*/

b,
strong {
font-weight: bold;
}

blockquote {
/* margin: 1em 40px; */
margin: 0;
}

/**
* Address styling not present in Safari 5 and Chrome.
*/
/**
* 校正 Safari 5 和 Chrome 中样式不呈现的问题
*/

dfn {
font-style: italic;
}

/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
/**
* 校正 Firefox 和其他浏览器间的差异
* 已知问题:不支持 IE 6/7
*/

hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}

/**
* Address styling not present in IE 6/7/8/9.
*/
/**
* 校正 IE 6/7/8/9 中样式不呈现的问题
*/

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

/**
* Address margins set differently in IE 6/7.
*/
/**
* 校正 IE 6/7 中外边距不同的问题
*/

p,
pre {
/* margin: 1em 0; */
margin: 0;
}

/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
/**
* 纠正 IE 6,Safari 4/5 和 Chrome 中奇怪的字体设置,重新声明固定宽度字体系列
*/

code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: ‘courier new’, monospace;
font-size: 1em;
}

/**
* Improve readability of pre-formatted text in all browsers.
*/
/**
* 改善所有浏览器中预先格式化文本的可读性
*/

pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

/**
* Address CSS quotes not supported in IE 6/7.
*/
/**
* 校正 IE 6/7 中 CSS quotes 不支持的问题
*/

q {
quotes: none;
}

/**
* Address `quotes` property not supported in Safari 4.
*/
/**
* 校正 Safari 4 中 `quotes` 属性不支持的问题
*/

q:before,
q:after {
content: ”;
content: none;
}

/**
* Address inconsistent and variable font size in all browsers.
*/
/**
* 校正所有浏览器中易变且不一致的字体大小
*/

small {
/* font-size: 80%; */
font-size: 75%; /* kissy */
}

/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
/**
* 防止所有浏览器中的上标和下标内容影响到行高(line-height)
*/

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

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

/* ==========================================================================
Lists
========================================================================== */
/* ==========================================================================
列表
========================================================================== */

/**
* Address margins set differently in IE 6/7.
*/
/**
* 校正 IE 6/7 中外边距不同的问题
*/

dl,
menu,
ol,
ul {
/* margin: 1em 0; */
margin: 0; /* yahoo */
}

dd {
/* margin: 0 0 0 40px; */
margin: 0; /* yahoo */
}

/**
* Address paddings set differently in IE 6/7.
*/
/**
* 校正 IE 6/7 中内边距不同的问题
*/

menu,
ol,
ul {
/* padding: 0 0 0 40px; */
padding: 0; /* yahoo */
}

/**
* Correct list images handled incorrectly in IE 7.
*/
/**
* 纠正 IE 7 中列表图象处理不正确的问题
*/

nav ul,
nav ol {
list-style: none;
list-style-image: none;
}

/* ==========================================================================
Embedded content
========================================================================== */
/* ==========================================================================
嵌入内容
========================================================================== */

/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
/**
* 1、删除在 IE 6/7/8/9 和 Firefox 3 中嵌入到 `a` 元素时的边框
* 2、改善在 IE7 中缩放时的图像质量
*/

img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}

/**
* Correct overflow displayed oddly in IE 9.
*/
/**
* 纠正 IE 9 中奇怪的 `overflow` 表现(未隐藏的溢出)
*/

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

/* ==========================================================================
Figures
========================================================================== */
/* ==========================================================================

========================================================================== */

/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
/**
* 校正 IE 6/7/8/9,Safari 5 和 Opera 11 中外边距不呈现的问题
*/

figure {
margin: 0;
}

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

/**
* Correct margin displayed oddly in IE 6/7.
*/
/**
* 纠正 IE 6/7 中奇怪的外边距显示的问题
*/

form {
margin: 0;
}

/**
* Define consistent border, margin, and padding.
*/
/**
* 定义一致的边框、外边距和内边距
*/

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

/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
/**
* 1、纠正 IE 6/7/8/9 中非继承的颜色
* 2、纠正 Firefox 3 中非换行的文本
* 3、纠正 IE 6/7 中显示异常的对齐
*/

legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}

/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
*    and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
/**
* 1、纠正所有浏览器中非继承的字体大小
* 2、校正 IE 6/7,Firefox 3+,Safari 5 和 Chrome 中外边距不同的问题(删除外边距)
* 3、改善在所有浏览器中一致地垂直对齐显示
*/

button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}

/**
* Address Firefox 3+ setting `line-height` on `input` using `` in
* the UA stylesheet.
*/
/**
* 校正 Firefox 3+ 用户代理样式表 (UA stylesheet) 中在 `input` 上设置 `line-height` 时使用 `` 的问题(将行高定义为正常)
*/

button,
input {
line-height: normal;
}

/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
/**
* 校正 `text-transform` 属性在 `button` 和 `select` 中的不一致
* 所有其他形式的控制元素不继承 `text-transform` 属性值
* 纠正 Chrome,Safari 5+ 和 IE 6+ 中 `button` 样式不继承的问题
* 纠正 Firefox 4+ 和 Opera 中 `select` 样式不继承的问题
*/

button,
select {
text-transform: none;
}

/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
*    Known issue: inner spacing remains in IE 6.
*/
/**
* 1、避免 Android 4.0.* 中的 WebKit bug,该 bug 会破坏原生的 `audio` 和 `video` 控制器
* 2、允许 iOS 中可点击的表单元素的样式
* 3、改善图片类型以及其他类型的 `input` 中指针的可用性以及样式的一致性(显示手形光标,表示可以点击的表单元素)
* 4、在不影响正常的文本输入的情况下删除 IE 7 中的内间距
*    已知问题:在 IE 6 中仍然存在内间距
*/

button,
html input[type=”button”], /* 1 */
input[type=”reset”],
input[type=”submit”] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible;  /* 4 */
}

/**
* Re-set default cursor for disabled elements.
*/
/**
* 重置 disabled 元素的默认指针样式
*/

button[disabled],
html input[disabled] {
cursor: default;
}

/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
*    Known issue: excess padding remains in IE 6.
*/
/**
* 1、校正 IE 8/9 中 box sizing 被设置为 `content-box` 的问题
* 2、删除 IE 8/9 中多余的内边距
* 3、删除 IE 7 中多余的内边距
*    已知问题:在 IE 6 中仍然存在多余的内边距
*/

input[type=”checkbox”],
input[type=”radio”] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}

/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof).
*/
/**
* 1、校正 Safari 5 和 Chrome 中 `appearance` 被设置为 `searchfield` 的问题
* 2、校正 Safari 5 和 Chrome 中 `box-sizing` 被设置为 `border-box` 的问题
*    (include `-moz` to future-proof)
*/

input[type=”search”] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}

/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
/**
* 删除 OS X 中 Safari 5 和 Chrome 内部的内边距以及搜索框的取消按钮
*/

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

/**
* Remove inner padding and border in Firefox 3+.
*/
/**
* 删除 Firefox 3+ 中的内边距和边框
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
/**
* 1、删除 IE 6/7/8/9 中的默认垂直滚动条
* 2、改善所有浏览器下的文字对齐以及可读性
*/

textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}

/* ==========================================================================
Tables
========================================================================== */
/* ==========================================================================
表格
========================================================================== */

/**
* Remove most spacing between table cells.
*/
/**
* 删除单元格间大部分的间距
*/

table {
border-collapse: collapse;
border-spacing: 0;
}

永夜

View Comments

  • Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something informative to read?