Merge pull request #39 from zcdev/zcdev-patch-1

Updated overall zh-CN translation

Author: AllThingsSmitty

translations/zh-CN/README.md

@@ -4,7 +4,7 @@
 
 # CSS 专业的技巧 [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
 
-提示的集合，以帮助把你的CSS技巧亲。
+提示的收集，以帮助提升你的CSS技巧。
 
 > 对于其他大名单退房 [@sindresorhus](https://github.com/sindresorhus/)的策展的名单 [真棒名单](https://github.com/sindresorhus/awesome/).
 
@@ -20,31 +20,31 @@
 <div id="protips"></div>
 ## 专业的技巧
 
-1. [使用 `:not()` 选择器决定导航菜单是否显示边框](#use-not-to-applyunapply-borders-on-navigation)
-1. [给 `body` 元素加行高](#add-line-height-to-body)
+1. [使用 :not() 选择器来决定表单是否显示边框](#use-not-to-applyunapply-borders-on-navigation)
+1. [为 body 元素添加行高](#add-line-height-to-body)
 1. [垂直居中任何元素](#vertically-center-anything)
 1. [逗号分隔的列表](#comma-separated-lists)
-1. [使用负的 `nth-child` 选择元素](#select-items-using-negative-nth-child)
+1. [使用负的 'nth-child' 来选择元素](#select-items-using-negative-nth-child)
 1. [使用 SVG 图标](#use-svg-for-icons)
-1. [使用 "形似猫头鹰" 的选择器](#use-the-lobotomized-owl-selector)
-1. [使用 `max-height` 实现纯 CSS 滑块](#use-max-height-for-pure-css-sliders)
-1. [继承 `box-sizing`](#inherit-box-sizing)
-1. [格子等宽的表格](#equal-width-table-cells)
-1. [利用 Flexbox 去除多余的 Margin](#get-rid-of-margin-hacks-with-flexbox)
-1. [利用属性选择器选择空链接](#use-attribute-selectors-with-empty-links)
-1. [给"默认"链接定义样式](#style-default-links)
-1. [垂直节奏一致性](#consistent-vertical-rhythm)
+1. [使用 「形似猫头鹰」的选择器](#use-the-lobotomized-owl-selector)
+1. [使用 'max-height' 来建立纯 CSS 的滑块](#use-max-height-for-pure-css-sliders)
+1. [继承 'box-sizing'](#inherit-box-sizing)
+1. [创造格子等宽的表格](#equal-width-table-cells)
+1. [利用 Flexbox 去除多余的外边距](#get-rid-of-margin-hacks-with-flexbox)
+1. [利用属性选择器来选择空链接](#use-attribute-selectors-with-empty-links)
+1. [给「预设」链接定义样式](#style-default-links)
+1. [一致的垂直节奏](#consistent-vertical-rhythm)
 1. [内在比例盒](#intrinsic-ratio-boxes)
-1. [风格破碎的形象](#style-broken-images)
-1. [使用 `rem` 全球上浆; 使用 `em` 本地浆纱](#use-rem-for-global-sizing-use-em-for-local-sizing)
-1. [隱藏自動播放的影片，沒有靜音](#hide-autoplay-videos-that-arent-muted)
-1. [使用`:root`柔性型](#use-root-for-flexible-type)
+1. [为破碎图象定义样式](#style-broken-images)
+1. [用 rem 来调整全局大小；用 em 来调整局部大小](#use-rem-for-global-sizing-use-em-for-local-sizing)
+1. [隐藏没有静音、自动播放的影片](#hide-autoplay-videos-that-arent-muted)
+1. [使用选择器 ':root' 来控制字体弹性](#use-root-for-flexible-type)
 
 
 <div id="use-not-to-applyunapply-borders-on-navigation"></div>
-### 使用 `:not()` 选择器决定导航菜单是否显示边框
+### 使用 `:not()` 选择器来决定表单是否显示边框
 
-与其加上边框...
+与其加上边框……
 
 ```css
 /* 添加边框 */
@@ -53,7 +53,7 @@
 }
 ```
 
-...然后去掉最后一个元素的边框...
+……然后去掉最后一个元素的边框……
 
 ```css
 /* 去掉边框 */
@@ -62,23 +62,23 @@
 }
 ```
 
-...不如使用 `:not()` 伪类实现同样的效果：
+...不如使用 `:not()` 伪类来达成同样的效果：
 
 ```css
 .nav li:not(:last-child) {
   border-right: 1px solid #666;
 }
 ```
 
-当然，也可以使用 `.nav li + li` 或者 `.nav li:first-child ~ li` 实现，但是 `:not()` 选择器的实现更清晰明了，一目了然。
+当然，也可以使用 `.nav li + li` 或者 `.nav li:first-child ~ li` 来达成，但是 `:not()` 选择器的方式更清晰明了，一目了然。
 
 <sup>[回目录](#table-of-contents)</sup>
 
 
 <div id="add-line-height-to-body"></div>
-### 给 `body` 元素加行高
+### 为 `body` 元素添加行高
 
-不必给每一个 `<p>`，`<h*>`，_等元素_逐一添加 `line-height`，给 `body` 元素添加就好了：
+不必为每一个 `<p>`，`<h*>`，_等元素_逐一添加 `line-height`，为 `body` 元素添加就好了：
 
 ```css
 body {
@@ -94,7 +94,7 @@ body {
 <div id="vertically-center-anything"></div>
 ### 垂直居中任何元素
 
-这不是黑魔法，就是可以垂直居中任何元素：
+这不是黑魔法，真的可以垂直居中任何元素：
 
 ```css
 html, body {
@@ -111,7 +111,7 @@ body {
 }
 ```
 
-这还不够？垂直方向，水平方向...任何元素，任何时间，任何地方？CSS-Tricks [有篇好文](https://css-tricks.com/centering-css-complete-guide/) 讲到了各种居中的实现。
+这还不够？垂直方向，水平方向……任何元素，任何时间，任何地方？CSS-Tricks [有篇好文](https://css-tricks.com/centering-css-complete-guide/) 讲到了各种居中的技巧。
 
 **注意：** IE11 对 flexbox 的支持[有点 bug](https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items)。
 
@@ -131,7 +131,7 @@ ul > li:not(:last-child)::after {
 
 使用了 `:not()` 伪类，因此最后一项没加逗号。
 
-**注意：**这一实现对于无障碍，屏幕阅读器而言并不理想，需要注意。
+**注意：**这一技巧对于无障碍，屏幕阅读器而言并不理想，需要注意。
 
 <sup>[回目录](#table-of-contents)</sup>
 
@@ -180,7 +180,7 @@ li:not(:nth-child(-n+3)) {
 
 SVG 在所有分辨率下都可以良好缩放，IE9+ 及其它所有浏览器都支持，丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
 
-**注意：** 针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍性有所帮助：
+**注意：** 针对仅有图标的按钮，如果 SVG 没有加载成功的话，以下样式对无障碍有所帮助：
 
 ```css
 .no-svg .icon-only:after {
@@ -192,7 +192,7 @@ SVG 在所有分辨率下都可以良好缩放，IE9+ 及其它所有浏览器
 
 
 <div id="use-the-lobotomized-owl-selector"></div>
-### 使用 "形似猫头鹰" 的选择器
+### 使用「形似猫头鹰」的选择器
 
 这个名字可能比较陌生，不过全局选择器 (`*`) 和 相邻兄弟选择器 (`+`) 一起使用，效果非凡：
 
@@ -202,17 +202,17 @@ SVG 在所有分辨率下都可以良好缩放，IE9+ 及其它所有浏览器
 }
 ```
 
-此例中，文档流里紧跟在其它元素后面的所有元素具有 `margin-top: 1.5em` 的样式。
+在此示例中，遵循其他元素的文档流中的所有元素将都接收上边距 `margin-top: 1.5em` 的样式。
 
 更多 "形似猫头鹰" 的选择器，可参考 *A List Apart* 上面 [Heydon Pickering 的文章](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls)
 
 <sup>[回目录](#table-of-contents)</sup>
 
 
 <div id="use-max-height-for-pure-css-sliders"></div>
-### 使用 `max-height` 实现纯 CSS 滑块
+### 使用 `max-height` 来建立纯 CSS 的滑块
 
-`max-height` 与 overflow hidden 一起实现纯 CSS 的滑块：
+`max-height` 与 overflow hidden 一起来建立纯 CSS 的滑块：
 
 ```css
 .slider {
@@ -269,7 +269,7 @@ html {
 
 
 <div id="get-rid-of-margin-hacks-with-flexbox"></div>
-### 利用 Flexbox 去除多余的 Margin
+### 利用 Flexbox 去除多余的外边距
 
 与其使用 `nth-`， `first-`， 和 `last-child` 去除列之间多余的间隙，不如使用 flexbox 的 `space-between` 属性：
 
@@ -290,7 +290,7 @@ html {
 
 
 <div id="use-attribute-selectors-with-empty-links"></div>
-### 利用属性选择器选择空链接
+### 利用属性选择器来选择空链接
 
 当 `<a>` 元素没有文本内容，但是有 `href` 属性的时候，可以显示它的 `href` 链接：
 
@@ -306,9 +306,9 @@ a[href^="http"]:empty::before {
 
 
 <div id="style-default-links"></div>
-### 给"默认"链接定义样式
+### 给「预设」链接定义样式
 
-给"默认"链接定义样式：
+给「预设」链接定义样式：
 
 ```css
 a[href]:not([class]) {
@@ -323,7 +323,7 @@ a[href]:not([class]) {
 
 
 <div id="consistent-vertical-rhythm"></div>
-### 垂直节奏一致性
+### 一致的垂直节奏
 
 通用选择器 (`*`) 跟元素一起使用，可以保持一致的垂直节奏：
 
@@ -341,7 +341,7 @@ a[href]:not([class]) {
 <div id="intrinsic-ratio-boxes"></div>
 ### 内在比例盒
 
-要创建具有内在比一个盒子，所有你需要做的就是应用顶部或底部填充，以一个div：
+要创建具有内在比一个盒子，所有你需要做的就是应用顶部或底部填充，从一个div：
 
 ```css
 .container {
@@ -360,15 +360,15 @@ a[href]:not([class]) {
 }
 ```
 
-使用20％的填充使得框等于其宽度的20％的高度。不管视口的宽度，孩子的div将保持其宽高比（100％/ 20％= 5:1）。
+使用20％的填充使得框等于其宽度的20％的高度。不管视口的宽度，子元素的div将保持其宽高比（100％/ 20％= 5:1）。
 
 <sup>[回目录](#table-of-contents)</sup>
 
 
 <div id="style-broken-images"></div>
-### 风格破碎的形象
+### 为破碎图象定义样式
 
-让破碎的形象与CSS一点点更美观的：
+只要一点CSS就可以美化破碎的图象：
 
 ```css
 img {  
@@ -383,7 +383,7 @@ img {
 }
 ```
 
-现在添加伪元素的规则来显示用户信息和虚线图像的URL引用：
+以添加伪元素的法则来显示使用者信息和虚线图像URL的引用：
 
 ```css
 img:before {  
@@ -399,15 +399,15 @@ img:after {
 }
 ```
 
-了解更多关于造型此模式中 [Ire Aderinokun](https://github.com/ireade/)的 [原帖](http://bitsofco.de/styling-broken-images/).
+了解更多关于这类样式的技巧 [Ire Aderinokun](https://github.com/ireade/)的 [原帖](http://bitsofco.de/styling-broken-images/).
 
 <sup>[回目录](#table-of-contents)</sup>
 
 
 <div id="use-rem-for-global-sizing-use-em-for-local-sizing"></div>
-### 使用 `rem` 全球上浆; 使用 `em` 本地浆纱
+### 用 `rem` 来调整全局大小; 用 `em` 来调整局部大小
 
-在根設置基本字體大小後 (`html { font-size: 16px; }`), 設置為文本元素的字體大小 `em`:
+在根设置基本字体大小后 (`html { font-size: 16px; }`), 请设置为文本元素的字体大小 `em`:
 
 ```css
 h2 { 
@@ -419,7 +419,7 @@ p {
 }
 ```
 
-然後設置字體大小的模塊 `rem`:
+然后设置字体大小的模块 `rem`:
 
 ```css
 article {
@@ -431,15 +431,15 @@ aside .module {
 }
 ```
 
-現在，每個模塊變得條塊分割，更容易的風格，更易於維護和靈活。
+现在，每个模块变得条块分割，更容易、灵活的样式，以便于维护。
 
 <sup>[回目录](#table-of-contents)</sup>
 
 
 <div id="hide-autoplay-videos-that-arent-muted"></div>
-### 隱藏自動播放的影片，沒有靜音
+### 隐藏没有静音，自动播放的影片
 
-這是一個自定義的用戶樣式表一個偉大的把戲。避免在加載頁面時自動播放視頻超載有聲的用戶。如果沒有靜音，不顯示視頻：
+这是一个自定义的使用者样式表一个伟大的把戏。避免在加载页面时自动播放。如果没有静音，则不显示视频：
 
 ```css
 video[autoplay]:not([muted]) {
@@ -453,17 +453,17 @@ video[autoplay]:not([muted]) {
 
 
 <div id="use-root-for-flexible-type"></div>
-### 使用`:root`柔性型
+### 使用选择器`:root`来控制字体弹性
 
-在响应式布局的类型字体大小应能与每个视口进行调整。你可以计算的基础上视口高度的字体大小和宽度，使用`:root`:
+在响应式布局的类型字体大小应能与每个视区进行调整。你可以计算的基础上视区高度的字体大小和宽度，使用`:root`:
 
 ```css
 :root {
   font-size: calc(1vw + 1vh + .5vmin);
 }
 ```
 
-现在，您可以利用基于'计算的值`root em`单位：root`:
+现在，您可以利用基于计算的值`root em`单位：root`:
 
 ```css
 body {