h5bp.com的两份css文件的翻译及适应于中文的修改、完善（main（翻译、修改）.css）

/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/*
* HTML5 样板
*
* 以下是诸多跨浏览器样式研究的结果
* 内嵌致谢，非常感谢 Nicolas Gallagher、Jonathan Neal、Kroc Camen 和 H5BP 开发团队和小组
*/
/* 整合 kissy、yahoo、Dreamweaver、typo */
/* @author shuijingwanwq.com */

/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
/* ==========================================================================
基本样式：自己认为的默认值
========================================================================== */

html,
button,
input,
select,
textarea {
/* color: #222; */
color: #333; /* kissy */
}

/*
* 1. Use KISSY CSS default font-size 12px
* 2. chrome rgba(0,0,0,0), others transparent
* 3. firefox 21px(1.3) others normal(1.13)
*/
body {
/* font-size: 1em; */
font-size: 12px; /* 1，kissy */
color: #333;
background-color: #fff;
/* 2，kissy */
line-height: 1.5; /* 3，kissy */
}

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
/*
* 删除选定高亮部分的文本阴影：h5bp.com/i
* 这些选定内容声明必须有所区别
* 自定义背景颜色以符合您的设计
*/

::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}

::selection {
background: #b3d4fc;
text-shadow: none;
}

/*
* A better looking default horizontal rule
*/
/*
* 一个更好的预设水平线
*/

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
/*
* 删除图像容器上的图像与边框之间的间隙：h5bp.com/i/440
*/

img {
vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/
/*
* 删除 fieldset 的默认样式
*/

fieldset {
border: 0;
margin: 0;
padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/
/*
* 仅允许垂直调整大小
*/

textarea {
resize: vertical;
}

/* ==========================================================================
Chrome Frame prompt
========================================================================== */
/* ==========================================================================
Chrome 框架提示
========================================================================== */

.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}

/* ==========================================================================
Author’s custom styles
========================================================================== */
/* ==========================================================================
作者自定义样式
========================================================================== */

/* ==========================================================================
Helper classes
========================================================================== */
/* ==========================================================================
Helper 类
========================================================================== */

/*
* Image replacement
*/
/*
* 用于图像替换
*/

.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}

.ir:before {
content: “”;
display: block;
width: 0;
height: 150%;
}

/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
/*
* 同时在屏幕读取器和浏览器中隐藏：h5bp.com/u
*/

.hidden {
display: none !important;
visibility: hidden;
}

/*
* 仅可视隐藏，但在屏幕读取器中可用：h5bp.com/v
*/

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
/*
* 扩展 .visuallyhidden 类以允许元素可在通过键盘浏览时成为焦点：h5bp.com/p
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

/*
* Hide visually and from screenreaders, but maintain layout
*/
/*
* 可视隐藏且在屏幕读取器中隐藏，但保留布局
*/

.invisible {
visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
/*
* Clearfix: 包含浮动
*
* 针对现代浏览器
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
content: ” “; /* 1 */
display: table; /* 2 */
}

.clearfix:after {
clear: both;
}

/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
/*
* 仅针对 IE 6/7
* Include this rule to trigger hasLayout and contain floats.
*/

.clearfix {
*zoom: 1;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary (‘mobile first’) styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
/* ==========================================================================
打印样式
已内嵌以避免必要的 HTTP 连接：h5bp.com/r
========================================================================== */

@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */ /* 黑白打印速度更快：h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}

a,
a:visited {
text-decoration: underline;
}

a[href]:after {
content: ” (” attr(href) “)”;
}

abbr[title]:after {
content: ” (” attr(title) “)”;
}

/*
* Don’t show links for images, or javascript/internal links
*/
/*
* 不显示图像链接或 javascript/内部链接
*/

.ir a:after,
a[href^=”javascript:”]:after,
a[href^=”#”]:after {
content: “”;
}

pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group; /* h5bp.com/t */
}

tr,
img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

@page {
margin: 0.5cm;
}

p,
h2,
h3 {
orphans: 3;
widows: 3;
}

h2,
h3 {
page-break-after: avoid;
}
}