Skip to content

Updated overall zh-CN translation #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AllThingsSmitty merged 1 commit into from
May 10, 2016
Merged

Updated overall zh-CN translation #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 51 additions & 51 deletions translations/zh-CN/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/).

Expand All @@ -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
/* 添加边框 */
Expand All @@ -53,7 +53,7 @@
}
```

...然后去掉最后一个元素的边框...
……然后去掉最后一个元素的边框……

```css
/* 去掉边框 */
Expand All @@ -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 {
Expand All @@ -94,7 +94,7 @@ body {
<div id="vertically-center-anything"></div>
### 垂直居中任何元素

这不是黑魔法，就是可以垂直居中任何元素：
这不是黑魔法，真的可以垂直居中任何元素：

```css
html, body {
Expand All @@ -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)。

Expand All @@ -131,7 +131,7 @@ ul > li:not(:last-child)::after {

使用了 `:not()` 伪类，因此最后一项没加逗号。

**注意：**这一实现对于无障碍，屏幕阅读器而言并不理想，需要注意。
**注意：**这一技巧对于无障碍，屏幕阅读器而言并不理想，需要注意。

<sup>[回目录](#table-of-contents)</sup>

Expand Down Expand Up @@ -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 {
Expand All @@ -192,7 +192,7 @@ SVG 在所有分辨率下都可以良好缩放，IE9+ 及其它所有浏览器


<div id="use-the-lobotomized-owl-selector"></div>
### 使用 "形似猫头鹰" 的选择器
### 使用「形似猫头鹰」的选择器

这个名字可能比较陌生，不过全局选择器 (`*`) 和 相邻兄弟选择器 (`+`) 一起使用，效果非凡：

Expand All @@ -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 {
Expand Down Expand Up @@ -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` 属性：

Expand All @@ -290,7 +290,7 @@ html {


<div id="use-attribute-selectors-with-empty-links"></div>
### 利用属性选择器选择空链接
### 利用属性选择器来选择空链接

当 `<a>` 元素没有文本内容，但是有 `href` 属性的时候，可以显示它的 `href` 链接：

Expand All @@ -306,9 +306,9 @@ a[href^="http"]:empty::before {


<div id="style-default-links"></div>
### 给"默认"链接定义样式
### 给「预设」链接定义样式

给"默认"链接定义样式：
给「预设」链接定义样式：

```css
a[href]:not([class]) {
Expand All @@ -323,7 +323,7 @@ a[href]:not([class]) {


<div id="consistent-vertical-rhythm"></div>
### 垂直节奏一致性
### 一致的垂直节奏

通用选择器 (`*`) 跟元素一起使用，可以保持一致的垂直节奏：

Expand All @@ -341,7 +341,7 @@ a[href]:not([class]) {
<div id="intrinsic-ratio-boxes"></div>
### 内在比例盒

要创建具有内在比一个盒子，所有你需要做的就是应用顶部或底部填充，以一个div：
要创建具有内在比一个盒子，所有你需要做的就是应用顶部或底部填充，从一个div：

```css
.container {
Expand All @@ -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 {
Expand All @@ -383,7 +383,7 @@ img {
}
```

现在添加伪元素的规则来显示用户信息和虚线图像的URL引用：
以添加伪元素的法则来显示使用者信息和虚线图像URL的引用：

```css
img:before {
Expand All @@ -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 {
Expand All @@ -419,7 +419,7 @@ p {
}
```

然後設置字體大小的模塊 `rem`:
然后设置字体大小的模块 `rem`:

```css
article {
Expand All @@ -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]) {
Expand All @@ -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 {
Expand Down