diff --git a/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html b/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html index 467275bc0b5bea..b8cbc6e6740c6a 100644 --- a/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html @@ -12,11 +12,11 @@ - - + + - + diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.html b/files/zh-cn/learn/accessibility/css_and_javascript/index.html index 060842c0ef6e3a..ac9d83dc5cbb1f 100644 --- a/files/zh-cn/learn/accessibility/css_and_javascript/index.html +++ b/files/zh-cn/learn/accessibility/css_and_javascript/index.html @@ -19,42 +19,42 @@
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
-

当CSS和JavaScript使用得当，很有可能改善Web访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的CSS和JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。

+

当 CSS 和 JavaScript 使用得当，很有可能改善 Web 访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的 CSS 和 JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。

先决条件:基础的计算机知识，对HTML,CSS和JavaScript有基础的理解，理解本课程的前期内容。先决条件：基础的计算机知识，对 HTML,CSS 和 JavaScript 有基础的理解，理解本课程的前期内容。
目标:目标： 理解可访问性的基础知识。
- +
准备： -

基本的计算机读写能力，对HTML、CSS和JavaScript的基本理解，以及对可访问性的理解。

+

基本的计算机读写能力，对 HTML、CSS 和 JavaScript 的基本理解，以及对可访问性的理解。
目标：熟悉在 Web 文档中适当地使用 CSS 和 JavaScript,以最大限度地提高可访问性,并且不损害它。熟悉在 Web 文档中适当地使用 CSS 和 JavaScript，以最大限度地提高可访问性，并且不损害它。
-

CSS和JavaScript是可访问的吗？

+

CSS 和 JavaScript 是可访问的吗？

-

CSS和JavaScript对于作为HTML的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用CSS和JavaScript不会破坏文档的可访问性。

+

CSS 和 JavaScript 对于作为 HTML 的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用 CSS 和 JavaScript 不会破坏文档的可访问性。

CSS

-

让我们从CSS开始吧！

+

让我们从 CSS 开始吧！

正确的语义和用户期望

-

可以使用 CSS 使任何 HTML 元素看起来像任何东西,但这并不意味着您应该这样做。正如我们经常提到的HTML: A good basis for accessibility,您应该尽可能为作业使用适当的语义元素。如果不这样做,它可能会导致混乱和可用性问题,对每个人,尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示,而且用户期望这些常见的约定。

+

可以使用 CSS 使任何 HTML 元素看起来像任何东西，但这并不意味着您应该这样做。正如我们经常提到的HTML: A good basis for accessibility,您应该尽可能为作业使用适当的语义元素。如果不这样做，它可能会导致混乱和可用性问题，对每个人，尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示，而且用户期望这些常见的约定。

-

例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。

+

例如，如果开发人员没有适当地使用标题元素标记内容，则屏幕阅读器用户无法通过标题元素导航页面。同样，如果对标题进行样式设置，则标题将失去其视觉目的，使其看起来不像标题。

-

经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。

+

经验法则是，您可以更新页面功能的样式以适应您的设计，但不要更改它太多，使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。

“标准”的内容结构

-

标题、段落、列表和页面的核心文本内容:

+

标题、段落、列表和页面的核心文本内容：

<h1>Heading</h1>
 
@@ -65,7 +65,7 @@ 
“标准”的内容结构

   <li>has two items.</li>
 </ul>
-

一些典型的 CSS 如下所示:

+

一些典型的 CSS 如下所示：

h1 {
   font-size: 5rem;
@@ -79,50 +79,50 @@ 
“标准”的内容结构

 
你应该：

 
 
 
-
有关详细信息,请参阅 HTML text fundamentals和Styling text 。

+
有关详细信息，请参阅 HTML text fundamentals和Styling text 。

 
 
强调的文本

 
-
内联标记,赋予其包裹的文本特别强调:

+
内联标记，赋予其包裹的文本特别强调：

 
 
<p>The water is <em>very hot</em>.</p>
 
 <p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>

 
-
您可能希望向强调的文本添加一些简单的颜色:

+
您可能希望向强调的文本添加一些简单的颜色：

 
 
strong, em {
   color: #a60000;
 }

 
-
但是,您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,请参阅Emphasis and importance。

+
但是，您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别，更改样式可能会导致混淆。有关强调的更多信息，请参阅Emphasis and importance。

 
 
缩写

 
-
允许缩写、首字母缩略词或初始化与其扩展关联的元素:

+
允许缩写、首字母缩略词或初始化与其扩展关联的元素：

 
 
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

 
-
同样,您可能希望以某种简单方式设置样式:

+
同样，您可能希望以某种简单方式设置样式：

 
 
abbr {
   color: #a60000;
 }

 
-
缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,请参阅Abbreviations。

+
缩写的公认样式约定是虚线下划线，偏离这一原则明显是不明智的。有关缩写的更多，请参阅Abbreviations。

 
 
链接

 
-
超链接 — 您到达新网站的方式:

+
超链接 — 您到达新网站的方式：

 
 
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>

 
-
一些非常简单的链接样式如下所示:

+
一些非常简单的链接样式如下所示：

 
 
a {
   color: #ff0000;
@@ -138,17 +138,17 @@ 
链接

   background-color: #a60000;
 }

 
-
标准链接约定为下划线,标准状态为不同颜色(默认:蓝色),以前访问过链接时另一种颜色变化(默认:紫色),以及激活链接时的另一种颜色(默认:红色)。此外,当链接被鼠标悬停时,鼠标指针将变为指针图标,并且链接在聚焦(例如通过 tabbing)或激活时变成高亮。下图显示了 Firefox(虚线轮廓)和 Chrome(蓝色轮廓)中的高光:

+
标准链接约定为下划线，标准状态为不同颜色 (默认：蓝色),以前访问过链接时另一种颜色变化 (默认：紫色),以及激活链接时的另一种颜色 (默认：红色)。此外，当链接被鼠标悬停时，鼠标指针将变为指针图标，并且链接在聚焦 (例如通过 tabbing) 或激活时变成高亮。下图显示了 Firefox(虚线轮廓) 和 Chrome(蓝色轮廓) 中的高光：

 
 

 
 

 
-
您可以使用链接样式进行创意,只要用户在与链接交互时不断提供反馈即可。当状态发生变化时,确实应该发生某些情况,并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说,两者都是非常重要的辅助功能。

+
您可以使用链接样式进行创意，只要用户在与链接交互时不断提供反馈即可。当状态发生变化时，确实应该发生某些情况，并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说，两者都是非常重要的辅助功能。

 
 
表单元素

 
-
允许用户将数据输入到网站的元素:

+
允许用户将数据输入到网站的元素：

 
 
<div>
   <label for="name">Enter your name</label>
@@ -157,39 +157,39 @@ 
表单元素

 
 
您可以在我们的form-css.html 示例中看到一些很好的示例 CSS(查看示例)。

 
-
您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入,以及让它们看起来整洁。

+
您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入，以及让它们看起来整洁。

 
-
但是,您不应过多偏离元素在聚焦时接收的预期视觉反馈表单,这与链接基本相同(见上文)。您可以设置焦点/悬停状态样式,使这种行为在浏览器中更加一致,或者更适合您的页面设计,但不要完全摆脱它 ––同样,人们依靠这些线索来帮助他们了解发生了什么。

+
但是，您不应过多偏离元素在聚焦时接收的预期视觉反馈表单，这与链接基本相同 (见上文)。您可以设置焦点/悬停状态样式，使这种行为在浏览器中更加一致，或者更适合您的页面设计，但不要完全摆脱它 ––同样，人们依靠这些线索来帮助他们了解发生了什么。

 
 
表格

 
 
用于显示表格数据的表。

 
-
您可以在table-css.html示例中看到表 HTML 和 CSS 的一个很好的简单示例(查看示例)。

+
您可以在table-css.html示例中看到表 HTML 和 CSS 的一个很好的简单示例 (查看示例)。

 
-
表 的CSS 通常使表更适合您的设计,看起来不那么难看。最好确保表标题醒目(通常使用粗体),并使用斑马条带化使不同的行更易于解析。

+
表 的 CSS 通常使表更适合您的设计，看起来不那么难看。最好确保表标题醒目 (通常使用粗体),并使用斑马条带化使不同的行更易于解析。

 
 
颜色和颜色对比度

 
-
为网站选择配色方案时,请确保文本(前景)颜色与背景颜色对比度良好。您的设计可能看起来很酷,但如果有视觉障碍(如色盲)的人无法阅读您的内容,则设计就无一好可做。

+
为网站选择配色方案时，请确保文本 (前景) 颜色与背景颜色对比度良好。您的设计可能看起来很酷，但如果有视觉障碍 (如色盲) 的人无法阅读您的内容，则设计就无一好可做。

 
-
有一个简单的方法来检查您的对比度是否足够大,不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色,以检查它们。例如,WebAIM 的颜色对比度检查器易于使用,并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。

+
有一个简单的方法来检查您的对比度是否足够大，不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色，以检查它们。例如，WebAIM 的颜色对比度检查器易于使用，并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。

 
 

-
注意：高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中(如阳光)更好地阅读页面。

+
注意：高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中 (如阳光) 更好地阅读页面。

 

 
 
另一个提示是不要仅仅依靠颜色来提供路标/信息,因为对于那些看不到颜色的人来说,这没有什么用。例如,不要用红色标记所需的表单字段,而是用星号和红色标记它们。

 
 
隐藏的东西

 
-
在很多情况下,可视化设计需要并非同时显示所有内容。例如,在我们的Tabbed info box example (请参阅源码),我们有三个信息面板,但我们将它们放在彼此之上,并提供可以单击以显示每个选项卡的选项卡(也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。

+
在很多情况下，可视化设计需要并非同时显示所有内容。例如，在我们的Tabbed info box example (请参阅源码),我们有三个信息面板，但我们将它们放在彼此之上，并提供可以单击以显示每个选项卡的选项卡 (也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。

 
 

 
-
屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义,他们就对内容感到满意, 并且他们可以获得所有内容。绝对定位(如本示例所示)通常被视为隐藏内容以进行视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器访问它。

+
屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义，他们就对内容感到满意，并且他们可以获得所有内容。绝对定位 (如本示例所示) 通常被视为隐藏内容以进行视觉效果的最佳机制之一，因为它不会阻止屏幕阅读器访问它。

 
-
另一方面,不应使用 {{cssxref("visibility")}}:hidden或 {{cssxref("display")}}:none,因为它们会隐藏屏幕阅读器中的内容。当然,除非您希望从屏幕阅读器中隐藏此内容,这是有充分理由的。

+
另一方面，不应使用 {{cssxref("visibility")}}:hidden或 {{cssxref("display")}}:none,因为它们会隐藏屏幕阅读器中的内容。当然，除非您希望从屏幕阅读器中隐藏此内容，这是有充分理由的。

 
 

 
注意：Invisible Content Just for Screen Reader Users有围绕本主题的更多有用详细信息。

@@ -199,37 +199,37 @@ 
接受用户覆盖样式

 
 
接受用户覆盖您的样式

 
-
用户可以使用自己的自定义样式覆盖样式,例如:

+
用户可以使用自己的自定义样式覆盖样式，例如：

 
 
 
-
用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本(可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。

+
用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本 (可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。

 
 
JavaScript

 
 
JavaScript 还可能会中断可访问性，具体取决于其使用方式。

 
-
现代 JavaScript 是一种功能强大的语言,如今我们可以使用它,从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。

+
现代 JavaScript 是一种功能强大的语言，如今我们可以使用它，从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。

 
-
简单的内容和功能可以说是很容易使访问 - 例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 HTML: A good basis for accessibility文中提到的,主要注意事项包括:

+
简单的内容和功能可以说是很容易使访问 - 例如文本，图像，表格，窗体和按钮，激活功能。正如我们在 HTML: A good basis for accessibility文中提到的，主要注意事项包括：

 
 
    
- 
  • 良好的语义:为正确的工作使用正确的元素。例如,确保您使用标题和段落,以及 {{htmlelement("button")}}和 {{htmlelement("a")}} 元素
    • 
- 
  • 确保内容以文本形式提供,要么直接作为文本内容、表单元素的良好文本标签,也可以确保 text alternatives(例如图像的 alt 文本)。
    • 
+ 
  • 良好的语义：为正确的工作使用正确的元素。例如，确保您使用标题和段落，以及 {{htmlelement("button")}}和 {{htmlelement("a")}} 元素
    • 
+ 
  • 确保内容以文本形式提供，要么直接作为文本内容、表单元素的良好文本标签，也可以确保 text alternatives(例如图像的 alt 文本)。
    • 
 

 
-
我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 Building keyboard accessibility back in。这不是理想的 - 实际上,你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

+
我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 Building keyboard accessibility back in。这不是理想的 - 实际上，你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的，由于某种原因，你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

 
-
复杂的功能,如3D游戏是不容易提高可访问性的 ––使用WebGL创建的复杂3D游戏将在 {{htmlelement("canvas")}}元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它100%访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。

+
复杂的功能，如 3D 游戏是不容易提高可访问性的 ––使用WebGL创建的复杂 3D 游戏将在 {{htmlelement("canvas")}}元素上呈现，该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说，这样的游戏并没有真正有这群人作为它的主要目标观众的一部分，这将是不合理的，期望你使它 100% 访问盲人，但你可以实现键盘控制，所以它可以使用非鼠标用户，并使配色方案的对比度足以让有颜色缺陷的人使用。

 
-
太多JavaScript导致的问题

+
太多 JavaScript 导致的问题

 
-
过于依赖JavaScript会导致许多问题。有时你会看到一个网站，其中一切都已经用JavaScript完成 ––JavaScript生成HTML，CSS等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。

+
过于依赖 JavaScript 会导致许多问题。有时你会看到一个网站，其中一切都已经用 JavaScript 完成 ––JavaScript 生成 HTML，CSS 等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。

 
-
正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用JavaScript 3D实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件,或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。

+
正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用 JavaScript 3D 实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件，或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。

 
 
保持别抢眼

 
@@ -239,12 +239,12 @@ 
保持别抢眼

 
 
    
  
  • 提供客户端表单验证，它快速提醒用户表单条目出现的问题，而无需等待服务器检查数据。如果表单不可用，则窗口仍然有效，但验证速度可能较慢。
    • 
- 
  • 为 HTML5 <video>s提供自定义控件，这些控件仅供键盘用户访问，以及如果 JavaScript 不可用(默认 <video>浏览器控件在大多数浏览器中无法使用键盘访问)，就直接通过链接访问视频。
    • 
+ 
  • 为 HTML5 <video>s 提供自定义控件，这些控件仅供键盘用户访问，以及如果 JavaScript 不可用 (默认 <video>浏览器控件在大多数浏览器中无法使用键盘访问)，就直接通过链接访问视频。
    • 
 

 
 
例如，我们编写了一个快速而糟糕的客户端客户端表单验证示例 — 请参form-validation.html(see the demo live)。在示例中，你会看到一个简单的表格；当您尝试提交一个或两个字段为空的表单时，提交将失败，并且会出现一个错误消息框，告诉您出了什么问题。

 
-
这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证(例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。

+
这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证 (例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。

 
 

 
注意：此简单示例中尚未实现服务器端验证。

@@ -255,7 +255,7 @@ 
保持别抢眼

 
<label for="name">Enter your name:</label>
 <input type="text" name="name" id="name">

 
-
我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器(可能还有其他)用户：

+
我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器 (可能还有其他) 用户：

 
 
form.onsubmit = validate;
 
@@ -275,12 +275,12 @@ 
保持别抢眼

 }

 
 

-
注意：在此示例中，我们使用绝对定位而不是其他方法(如可见性或显示)隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。

+
注意：在此示例中，我们使用绝对定位而不是其他方法 (如可见性或显示) 隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。

 

 
-
实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合(例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段(if(testItem.input.value === ''))。

+
实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合 (例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段 (if(testItem.input.value === ''))。

 
-
执行验证后，如果测试通过，则提交表单。如果存在错误(if(errorList.innerHTML !== '')) ，则我们停止表单提交(使用preventDefault())，并显示已创建的任何错误消息(见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。

+
执行验证后，如果测试通过，则提交表单。如果存在错误 (if(errorList.innerHTML !== '')) ，则我们停止表单提交 (使用preventDefault())，并显示已创建的任何错误消息 (见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。

 
 
对于提交表单时没有填写值的每个输入，我们创建一个包含链接的列表项，并将其插入到 errorList 中。

 
@@ -299,12 +299,12 @@ 
保持别抢眼

 
每个链接都有双重用途 - 它不仅告诉您错误是什么，而且可以单击它/激活它直接跳转到有问题的输入元素，并且更正输入。

 
 

-
注意：此示例的 focus() 部分有点棘手。Chrome 和 Edge(以及较新版本的 IE)将在单击链接时聚焦元素，而无需onclick/focus()代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 onclick/focus()代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点(尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同(参见 {{bug(277178)}})。

+
注意：此示例的 focus() 部分有点棘手。Chrome 和 Edge(以及较新版本的 IE) 将在单击链接时聚焦元素，而无需onclick/focus()代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 onclick/focus()代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点 (尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同 (参见 {{bug(277178)}})。

 

 
-
此外，errorField 被放置在源顺序的顶部(与 UI 中使用 CSS时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。

+
此外，errorField 被放置在源顺序的顶部 (与 UI 中使用 CSS 时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。

 
-
最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题(默认情况下,屏幕阅读器不会选取该属性或提醒用户)：

+
最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题 (默认情况下，屏幕阅读器不会选取该属性或提醒用户)：

 
 
<div class="errors" role="alert" aria-relevant="all">
   <ul>
@@ -314,7 +314,7 @@ 
保持别抢眼

 
我们将在下一篇文章中解释这些属性，其中将更详细地介绍 WAI-ARIA 。

 
 

-
注意：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制,如required， min/minlength和max/maxlength属性(详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持(例如，仅 IE10 及以上版本支持，Safari不支持)。

+
注意：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制，如required， min/minlength和max/maxlength属性 (详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持 (例如，仅 IE10 及以上版本支持，Safari 不支持)。

 

 
 

@@ -327,13 +327,13 @@ 
其他 JavaScript 可访问性问
 
 
鼠标特定事件

 
-
正如你所知，客户端JavaScript使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件,如鼠标悬停（ mouseover）、鼠标划出（mouseout）、双击（dblclick） 等。使用其他机制(如键盘控件)无法访问为这些事件而运行的功能。

+
正如你所知，客户端 JavaScript 使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件，如鼠标悬停（ mouseover）、鼠标划出（mouseout）、双击（dblclick）等。使用其他机制 (如键盘控件) 无法访问为这些事件而运行的功能。

 
-
为了缓解此类问题，您应该将这些事件与可以通过其他方式(所谓的设备独立事件处理程序)激活的类似事件相结合 —— focus和blur将为键盘用户提供可访问性。

+
为了缓解此类问题，您应该将这些事件与可以通过其他方式 (所谓的设备独立事件处理程序) 激活的类似事件相结合 —— focus和blur将为键盘用户提供可访问性。

 
 
让我们看一个示例：突出显示了何时可能有用。我们想要实现一个缩略图：当鼠标悬停或聚焦在图像上，可以放大图像（正如电子商务产品目录所展示的）。

 
-
我们做了一个非常简单的示例，您可以在mouse-and-keyboard-events.html 中找到(另请参阅源码)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：

+
我们做了一个非常简单的示例，您可以在mouse-and-keyboard-events.html 中找到 (另请参阅源码)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：

 
 
imgThumb.onmouseover = showImg;
 imgThumb.onmouseout = hideImg;
@@ -341,13 +341,13 @@ 
鼠标特定事件

 imgThumb.onfocus = showImg;
 imgThumb.onblur = hideImg;

 
-
当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时(聚焦停止)运行函数。这可以在图像加tab键实现，因为我们为图像的属性设置tabindex="0"。

+
当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时 (聚焦停止) 运行函数。这可以在图像加 tab 键实现，因为我们为图像的属性设置tabindex="0"。

 
-
Click 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 onclick 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用 ， 在这种情况下，您需要在按下确切键时进行专门检测(请参阅Building keyboard accessibility back in)。

+
Click 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 onclick 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用，在这种情况下，您需要在按下确切键时进行专门检测 (请参阅Building keyboard accessibility back in)。

 
 
总结

 
-
我们希望这篇文章在网页设计中关于CSS和JavaScript的无障碍问题提供了足够多的细节。

+
我们希望这篇文章在网页设计中关于 CSS 和 JavaScript 的无障碍问题提供了足够多的细节。

 
 
下一篇内容是，WAI-ARIA！

 
@@ -359,7 +359,7 @@ 
在本模块中

 
    
  
  • 什么是无障碍？
    • 
  
  • HTML: A good basis for accessibility
    • 
- 
  • CSS和JavaScript无障碍的最佳实践
    • 
+ 
  • CSS 和 JavaScript 无障碍的最佳实践
    • 
  
  • WAI-ARIA 基础知识基础知识
    • 
  
  • 无障碍的多媒体
    • 
  
  • 移动端无障碍
    • 
diff --git a/files/zh-cn/learn/accessibility/html/index.html b/files/zh-cn/learn/accessibility/html/index.html
index d60e868c102468..4c2754025c2f41 100644
--- a/files/zh-cn/learn/accessibility/html/index.html
+++ b/files/zh-cn/learn/accessibility/html/index.html
@@ -8,16 +8,16 @@
 
 
    {{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
    
 
-
    在网页开发的过程中，用正确的HTML标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。
    
+
    在网页开发的过程中，用正确的 HTML 标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。
    
 
 
-   
-   
+   
+   
-   
+   
@@ -25,37 +25,37 @@
 
 
    HTML 和可访问性
    
 
-
    在学习HTML的过程当中，经常可以看到这样一个主题：HTML语义化的重要性。意思是指我们应尽可能地用正确的HTML标签来表达正确的意图。
    
+
    在学习 HTML 的过程当中，经常可以看到这样一个主题：HTML 语义化的重要性。意思是指我们应尽可能地用正确的 HTML 标签来表达正确的意图。
    
 
-
    你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和  JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式:
    
+
    你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和  JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式：
    <div>Play video</div>
    
 
-
    接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:
    
+
    接下来你将看到一种更好的写法，它使用了正确的 HTML 标签，看上去更加合理：
    <button>Play video</button>
    
 
-
    <button>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。
    
+
    <button>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用 tab 键更换按钮，使用回车键点击按钮。
    
 
-
    如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：
    
+
    如果你在项目的一开始就使用 HTML 语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：
      
- 
    1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
      2. 
- 
    2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
      3. 
- 
    3. 更便于SEO优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
      4. 
+ 
    4. 更便于开发 — 如上所述，你可以使 HTML 更易于理解，并且可以毫不费力的获得一些功能。
      5. 
+ 
    5. 更适配移动端 — 语义化的 HTML 文件比非语义化的 HTML 文件更加轻便，并且更易于响应式开发。
      6. 
+ 
    6. 更便于 SEO 优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
      7. 
 
    
 
-
    让我们来继续学习HTML语义化实现细则。
    
+
    让我们来继续学习 HTML 语义化实现细则。
    
-
    注意:在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 Screenreaders guide。
    
+
    注意：在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 Screenreaders guide。
    
 
    良好的语义
    
 
-
    上面我们讨论了语义化的重要性以及为什么我们要使用正确的HTML标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。
    
+
    上面我们讨论了语义化的重要性以及为什么我们要使用正确的 HTML 标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。
    
 
-
    在网络上，事实上人们用HTML标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。
    
+
    在网络上，事实上人们用 HTML 标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。
    话虽如此，但是有些情况我们往往不能摆脱错误的标签，例如一个网页是从服务端的框架生成的，或者网页上存在第三方的内容（如广告），这些都是我们所不能控制的。
    
 
@@ -118,21 +118,21 @@ 
    文本内容
    如果你使用屏幕阅读器试用更长内容的版本（请查阅 bad-semantics.html），你不会有一个很好的经验 — 屏幕阅读器没有任何东西可以用作路标，所以你无法检索有用的目录，整个页面被看作一个巨大的块，所以它只是一次读出所有的内容。
    
 
-
    除了可访问性之外，还有其他一些问题 - 使用CSS设计内容的风格更难，或者使用JavaScript来操作它比较困难，因为没有可用作选择器的元素。
    
+
    除了可访问性之外，还有其他一些问题 - 使用 CSS 设计内容的风格更难，或者使用 JavaScript 来操作它比较困难，因为没有可用作选择器的元素。
    使用通俗易懂的语言
    
 
-
    你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如:
    
+
    你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如：
      
- 
    • 如果可以避免的话，不要用破折号。写 5 到 7 ，来替代 5-7。
      • 
+ 
    • 如果可以避免的话，不要用破折号。写 5 到 7，来替代 5-7。
      • 
  
    • 展开缩写 — 写 January，来替代 Jan 。
      • 
- 
    • 展开首字母缩略词，至少一次或两次。 例如写明 “超文本标记语言”（ Hypertext Markup Language），而不是直接用缩写 HTML。
      • 
+ 
    • 展开首字母缩略词，至少一次或两次。例如写明“超文本标记语言”（Hypertext Markup Language），而不是直接用缩写 HTML。
      • 
 
    页面布局
    
 
-
    在旧时代，人们曾经使用HTML表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。
    
+
    在旧时代，人们曾经使用 HTML 表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。
    试试我们的例子table-layout.html，它看起来像这样：
    
 
@@ -201,9 +201,9 @@ 
    页面布局
    
       </tr>
     </table>
 
-
    如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。 然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。
    
+
    如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。
    
 
-
    用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记， 使设计更不灵活）。不要这样做！
    
+
    用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记，使设计更不灵活）。不要这样做！
    您可以通过将您之前的体验与 更现代的网站结构示例 进行比较，来验证这些声明，该示例如下所示：
    
 
@@ -241,26 +241,26 @@ 
    页面布局
    
 
 
 
-
    如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。 它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。
    
+
    如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。
    
 
-
    创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示（请参阅 此内容部分） - 您只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹您的主导航（{{htmlelement("nav")}}），footer ({{htmlelement("footer")}}），重复内容单元  ({{htmlelement("article")}}) 等 。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 屏幕阅读器支持的新的HTML5章节元素 ，了解屏幕阅读器的支持是什么样的原理）。
    
+
    创建布局时的另一个考虑因素是使用 HTML5 语义元素，如上例所示（请参阅 此内容部分） - 您只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹您的主导航（{{htmlelement("nav")}}），footer ({{htmlelement("footer")}}），重复内容单元  ({{htmlelement("article")}}) 等。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 屏幕阅读器支持的新的 HTML5 章节元素 ，了解屏幕阅读器的支持是什么样的原理）。
    
-
    注意：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用CSS的位置，但是您应该先从源代码开始， 如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。
    
+
    注意：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用 CSS 的位置，但是您应该先从源代码开始，如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。
    
 
    UI 控制
    
 
-
    通过UI控件，我们指的是与用户交互的Web文档的主要部分 - 通常是按钮，链接和表单控件。 在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。 稍后关于WAI-ARIA和多媒体的文章将着眼于UI可访问性的其他方面。
    
+
    通过 UI 控件，我们指的是与用户交互的 Web 文档的主要部分 - 通常是按钮，链接和表单控件。在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。稍后关于 WAI-ARIA 和多媒体的文章将着眼于 UI 可访问性的其他方面。
    
 
-
    UI控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。 您可以使用我们的 native-keyboard-accessibility.html 示例（请参阅 源代码 ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按Tab键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。
    
+
    UI 控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。您可以使用我们的 native-keyboard-accessibility.html 示例（请参阅 源代码 ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按 Tab 键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。
    
 
-
    接着你可以按Enter / Return来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用JavaScript使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件， 例如 {{htmlelement("select")}} 元素拥有自己的显示选项， 可以使用向上和向下箭头键进行循环）。
    
+
    接着你可以按 Enter / Return 来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用 JavaScript 使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件，例如 {{htmlelement("select")}} 元素拥有自己的显示选项，可以使用向上和向下箭头键进行循环）。
    
-
    注意：不同的浏览器可能有不同的键盘控制选项。 请参阅 使用本机键盘辅助功能 获取更多详细信
    
+
    注意：不同的浏览器可能有不同的键盘控制选项。请参阅 使用本机键盘辅助功能 获取更多详细信
    
 
    实际上，您只需使用适当的元素即可免费获得此功能，例如，
    
@@ -305,30 +305,30 @@ 
    UI 控制
    这意味着适当地使用链接，按钮，表单元素和标签（包括表单控件的 {{htmlelement("label")}} 元素）。
    
 
-
    然而，人们有时候会用HTML做奇怪的事情。 例如，您有时会看到使用 {{htmlelement("div")}} 标记的按钮，例如：
    
+
    然而，人们有时候会用 HTML 做奇怪的事情。例如，您有时会看到使用 {{htmlelement("div")}} 标记的按钮，例如：
    <div data-message="This is from the first button">Click me!</div>
 <div data-message="This is from the second button">Click me too!</div>
 <div data-message="This is from the third button">And me!</div>
    
 
-
    但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了{{htmlelement("button")}} 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的CSS样式。
    
+
    但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了{{htmlelement("button")}} 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的 CSS 样式。
    重新建立键盘的可访问性
    
 
-
    重新添加这些优点需要一些工作（您可以在我们的 fake-div-buttons.html 示例中使用示例代码 - 另请参阅 源代码 ）。 在这里，我们通过赋予每个 <div> 按钮属性tabindex =“0” 来使它能够被聚焦（包括通过选项卡）：
    
+
    重新添加这些优点需要一些工作（您可以在我们的 fake-div-buttons.html 示例中使用示例代码 - 另请参阅 源代码 ）。在这里，我们通过赋予每个 <div> 按钮属性tabindex =“0” 来使它能够被聚焦（包括通过选项卡）：
    <div data-message="This is from the first button" tabindex="0">Click me!</div>
 <div data-message="This is from the second button" tabindex="0">Click me too!</div>
 <div data-message="This is from the third button" tabindex="0">And me!</div>
    
 
-
    基本上，{{htmlattrxref("tabindex")}} 属性主要用于允许 tabbable 元素具有自定义Tab键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。 这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。 例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 tabindex 有另外两个选项：
    
+
    基本上，{{htmlattrxref("tabindex")}} 属性主要用于允许 tabbable 元素具有自定义 Tab 键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 tabindex 有另外两个选项：
      
- 
    • tabindex="0" — 如上所述，该值允许 通常不可放置的元素（tabbable elements） 变为可放置的。 这是 tabindex 最有用的的地方。
      • 
- 
    • tabindex="-1" — 这允许 通常不可放置的元素（tabbable elements） 以编程的方式接收焦点，例如， 通过JavaScript，或作为链接的目标。
      • 
+ 
    • tabindex="0" — 如上所述，该值允许 通常不可放置的元素（tabbable elements）变为可放置的。这是 tabindex 最有用的的地方。
      • 
+ 
    • tabindex="-1" — 这允许 通常不可放置的元素（tabbable elements）以编程的方式接收焦点，例如，通过 JavaScript，或作为链接的目标。
      • 
 
    
 
-
    虽然上面的添加允许我们用 tab 选择按钮，但它不允许我们通过 Enter / Return 键来激活它们。 要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：
    
+
    虽然上面的添加允许我们用 tab 选择按钮，但它不允许我们通过 Enter / Return 键来激活它们。要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：
    document.onkeydown = function(e) {
   if(e.keyCode === 13) { // The Enter/Return key
@@ -336,12 +336,12 @@ 
    重新建立键盘的可访
   }
 };
    
 
-
    在这里，我们向文档对象 document 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 event object 的 keyCode 属性,检查用户按下了哪个按钮; 如果它是与 Return / Enter 匹配的关键代码，我们通过按钮的 onclick 函数，即 document.activeElement.onclick() 。activeElement 提供给我们页面当前被focused的元素。
    
+
    在这里，我们向文档对象 document 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 event object 的 keyCode 属性，检查用户按下了哪个按钮; 如果它是与 Return / Enter 匹配的关键代码，我们通过按钮的 onclick 函数，即 document.activeElement.onclick() 。activeElement 提供给我们页面当前被 focused 的元素。
    
 
-
    我们使用document.activeElement.onclick（）运行存储在按钮的onclick处理函数中的函数。 activeElement 为我们提供了当前关注页面的元素。
    
+
    我们使用document.activeElement.onclick（）运行存储在按钮的 onclick 处理函数中的函数。 activeElement 为我们提供了当前关注页面的元素。
    
 
 
    
-
    注意：您应该记住，只有通过事件处理程序属性（例如onclick）设置原始事件处理程序，此技巧才会起作用。 addEventListener 将不起作用。
    
+
    注意：您应该记住，只有通过事件处理程序属性（例如 onclick）设置原始事件处理程序，此技巧才会起作用。 addEventListener 将不起作用。
    
 
    
 
 
    这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。 使用正确的元素处理正确的工作是非常重要的。（Better to just use the right element for the right job in the first place.）
    
@@ -350,7 +350,7 @@ 
    有意义的文字标签
    
 
 
    用户界面控件的 文本标签 对所有用户都非常有用，但是对于残疾用户来说，让他们正确使用尤其重要。
    
 
-
    你应该确保你的按钮和链接文本标签是可以理解和独特的。 不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。 以下屏幕截图显示了我们的控件在Mac上由 VoiceOver 列出。
    
+
    你应该确保你的按钮和链接文本标签是可以理解和独特的。不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。以下屏幕截图显示了我们的控件在 Mac 上由 VoiceOver 列出。
    
 
 
    
 
@@ -363,14 +363,14 @@ 
    有意义的文字标签
    
 
    <p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
    
 
 
    
-
    注意：您可以在我们的 创建超链接 文章中找到更多关于链接实现和最佳实践的信息。 您还可以在 good-links.html 和 bad-links.html 中看到一些好的和不好的例子。
    
+
    注意：您可以在我们的 创建超链接 文章中找到更多关于链接实现和最佳实践的信息。您还可以在 good-links.html 和 bad-links.html 中看到一些好的和不好的例子。
    
 
    
 
-
    表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。 以下似乎是一个足够合理的例子：
    
+
    表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。以下似乎是一个足够合理的例子：
    
 
 
    Fill in your name: <input type="text" id="name" name="name">
    
 
-
    但是，这对于残疾用户来说并不是那么有用。 在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。 如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。
    
+
    但是，这对于残疾用户来说并不是那么有用。在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。
    
 
 
    以下是一个更好的例子：
    
 
@@ -383,7 +383,7 @@ 
    有意义的文字标签
    
 
 
    
 
-
    作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。 这给输入一个更大的可选中区域，使其更容易选择。
    
+
    作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。这给输入一个更大的可选中区域，使其更容易选择。
    
 
 
    
 
    注意：您可以在 good-form.html 和 bad-form.html 中看到一些好的和不好的表单示例。
    
@@ -416,22 +416,22 @@ 
    可访问的表格
    
   </tr>
 </table>
 
-
    但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。 要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 bad-table.html ，并自己尝试这个例子）。
    
+
    但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 bad-table.html ，并自己尝试这个例子）。
    
 
 
    现在看看我们的 punk bands table example  - 您可以在这里看到一些辅助工具（accessibility aids）：
    
 
 
      
- 
    • 表头使用 {{htmlelement("th")}} 元素定义 - 您还可以使用 scope 属性指定它们是行还是列的标题。 这提供给了屏幕阅读器可以理解的完整数据组。
      • 
- 
    •  {{htmlelement("caption")}} 元素和 <table>  summary 属性都执行类似的工作 - 它们充当表格的替代文本，为屏幕阅读器用户提供有用的表格内容快速摘要。 <caption> 通常是首选，因为它使内容可供视力良好的用户访问，而且他们也可能会发现它很有用。 你并不需要两者都使用！。
      • 
+ 
    • 表头使用 {{htmlelement("th")}} 元素定义 - 您还可以使用 scope 属性指定它们是行还是列的标题。这提供给了屏幕阅读器可以理解的完整数据组。
      • 
+ 
    •  {{htmlelement("caption")}} 元素和 <table>  summary 属性都执行类似的工作 - 它们充当表格的替代文本，为屏幕阅读器用户提供有用的表格内容快速摘要。 <caption> 通常是首选，因为它使内容可供视力良好的用户访问，而且他们也可能会发现它很有用。你并不需要两者都使用！。
      • 
 
    
 
 
    
-
    注意：有关可访问数据表的更多详细信息，请参阅我们的 HTML表格高级功能和可访问性 文章。
    
+
    注意：有关可访问数据表的更多详细信息，请参阅我们的 HTML 表格高级功能和可访问性 文章。
    
 
    
 
 
    文本替代品
    
 
-
    尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。 稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble ）的 {{htmlelement("img")}} 元素的可访问性。
    
+
    尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble）的 {{htmlelement("img")}} 元素的可访问性。
    
 
 
    我们编写了一个简单的例子， accessible-image.html ，它具有相同图像的四个副本：
    
 
@@ -450,23 +450,23 @@ 
    文本替代品
    
 <p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
 
 
-
    第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如VoiceOver会读出 “/dinosaur.png，image” 。 它读出文件名以尝试提供一些帮助。 在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。
    
+
    第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如 VoiceOver 会读出“/dinosaur.png，image” 。它读出文件名以尝试提供一些帮助。在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。
    
 
 
    
-
    注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。 还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！
    
+
    注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！
    
 
    
 
 
    当屏幕阅读器遇到第二张图像时，它会读出完整的 alt 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”
    
 
-
    这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 alt 中提供替代文本。 请注意，alt 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。 任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。
    
+
    这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 alt 中提供替代文本。请注意，alt 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。
    
 
-
    需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。 如果它们是装饰性的，最好将它们包含在页面中作为CSS背景图像。
    
+
    需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。如果它们是装饰性的，最好将它们包含在页面中作为 CSS 背景图像。
    
 
 
    
-
    注意：请阅读 HTML中的图片 和 响应式图片 以获得更多关于图片实施和最佳做法的信息。
    
+
    注意：请阅读 HTML 中的图片 和 响应式图片 以获得更多关于图片实施和最佳做法的信息。
    
 
    
 
-
    如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” title 属性中，如上所示。 在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 title 的内容作为工具提示的形式显示出来。
    
+
    如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” title 属性中，如上所示。在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 title 的内容作为工具提示的形式显示出来。
    
 
 
 
@@ -480,49 +480,49 @@ 
    文本替代品
    
 
 <p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
 
-
    在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用 “aria-labelledby” 属性并链接到对应“id”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。 如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“alt”不可能实现的。
    
+
    在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用“aria-labelledby”属性并链接到对应“id”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“alt”不可能实现的。
    
 
 
    
-
    注意：“aria-labelledby”是 WAI-ARIA 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。 要了解更多关于它是如何工作的，请阅读我们的 WAI-ARIA Basics 文章。
    
+
    注意：“aria-labelledby”是 WAI-ARIA 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。要了解更多关于它是如何工作的，请阅读我们的 WAI-ARIA Basics 文章。
    
 
    
 
 
 
 
    其他文字替代机制
    
 
-
    图像还有其他机制可用于提供描述性文字。 例如，有一个 longdesc 属性用于指向包含图像的扩展描述的单独Web文档，例如：
    
+
    图像还有其他机制可用于提供描述性文字。例如，有一个 longdesc 属性用于指向包含图像的扩展描述的单独 Web 文档，例如：
    
 
 
    <img src="dinosaur.png" longdesc="dino-info.html">
    
 
-
    这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。 但是，屏幕阅读器不支持longdesc，非屏幕阅读器用户完全无法访问内容。 将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。
    
+
    这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。但是，屏幕阅读器不支持longdesc，非屏幕阅读器用户完全无法访问内容。将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。
    
 
-
    HTML5包含两个新元素 -  {{htmlelement("figure")}} 和{{htmlelement("figcaption")}} ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：
    
+
    HTML5 包含两个新元素 -  {{htmlelement("figure")}} 和{{htmlelement("figcaption")}} ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：
    
 
 
    <figure>
   <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
   <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
 </figure>
    
 
-
    不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对CSS样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。
    
+
    不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对 CSS 样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。
    
 
-
    空alt属性
    
+
    空 alt 属性
    
 
 
    <h3>
   <img src="article-icon.png" alt="">
   Tyrannosaurus Rex: the king of the dinosaurs
 </h3>
    
 
-
    可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。 在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说 “图像” 等类似的语句）。
    
+
    可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说“图像” 等类似的语句）。
    
 
-
    使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像URL。 在上面的示例中，图像充当与其关联的标题的视觉装饰。 在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。 另一种选择是使用 aria role 属性 role =“presentation” - 这也会阻止屏幕阅读器读出替代文本。
    
+
    使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像 URL。在上面的示例中，图像充当与其关联的标题的视觉装饰。在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。另一种选择是使用 aria role 属性 role =“presentation” - 这也会阻止屏幕阅读器读出替代文本。
    
 
 
    
-
    注意：如果可能的话，你应该使用CSS来显示只有装饰的图像。
    
+
    注意：如果可能的话，你应该使用 CSS 来显示只有装饰的图像。
    
 
    
 
-
    总结Summary
    
+
    总结
    
 
-
    您现在应该精通编写大多数场合可访问的HTML。 我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。 接下来，我们将探索 CSS 和 JavaScript ，以及可访问性如何受其好坏影响。
    
+
    您现在应该精通编写大多数场合可访问的 HTML。我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。接下来，我们将探索 CSS 和 JavaScript，以及可访问性如何受其好坏影响。
    
 
 
 
@@ -535,9 +535,9 @@ 
    在此模块
    
 
diff --git a/files/zh-cn/learn/accessibility/index.html b/files/zh-cn/learn/accessibility/index.html
index 2fb805f9e93060..8db003feb22df1 100644
--- a/files/zh-cn/learn/accessibility/index.html
+++ b/files/zh-cn/learn/accessibility/index.html
@@ -7,44 +7,44 @@
 
    可访问性
    
 
    
 
-
    如果你想成为一个web开发者，学习一些HTML,CSS和JavaScript是很有用的, 但是仅仅使用这些技术是不够的, 你应该更进一步拓展你的知识 — 你需要响应式地使用它们来最大程度地发展你的用户, 并且使用这些技术时不能把任何一门排斥出去。 为了达到这个目的, 要遵循一般最佳实践（这些最佳实践已经被 HTML, CSS, 和 JavaScript 相关的话题所证明）,进行跨浏览器测试, 并且从项目最初阶段就把易使用性考虑在内。在这个模块中我们将会详细讨论后者。
    
+
    如果你想成为一个 web 开发者，学习一些 HTML,CSS 和 JavaScript 是很有用的，但是仅仅使用这些技术是不够的，你应该更进一步拓展你的知识 — 你需要响应式地使用它们来最大程度地发展你的用户，并且使用这些技术时不能把任何一门排斥出去。为了达到这个目的，要遵循一般最佳实践（这些最佳实践已经被 HTML, CSS, 和 JavaScript 相关的话题所证明）,进行跨浏览器测试，并且从项目最初阶段就把易使用性考虑在内。在这个模块中我们将会详细讨论后者。
    
 
-
    预备知识:
    
+
    预备知识：
    
 
-
    为了充分理解这个模块,你至少需要读过 HTML, CSS, 和 JavaScript  各个话题的前两个模块, 或者有可能的话, 在你学习相关联的技术话题时也把可访问性相关的内容学习了, 这样会更好。
    
+
    为了充分理解这个模块，你至少需要读过 HTML, CSS, 和 JavaScript  各个话题的前两个模块，或者有可能的话，在你学习相关联的技术话题时也把可访问性相关的内容学习了，这样会更好。
    
 
 
    
-
    注意: 如果在你所使用的设备上你不能建立自己的文件,你可以使用在线编码平台运行大多数样例代码, 比如 JSBin 或者 Glitch.
    
+
    注意: 如果在你所使用的设备上你不能建立自己的文件，你可以使用在线编码平台运行大多数样例代码，比如 JSBin 或者 Glitch.
    
 
    
 
 
    参考指南
    
 
 
    
- 
    什么是可访问性?
    
- 
    这篇文章开头很好地阐述了到底什么是'可访问性' — 这包括我们要考虑哪一群人以及为什么要考虑这些人,不同用户使用什么工具与网页交互,以及我们在网页开发流中如何构建可用性部分.
    
+ 
    什么是可访问性？
    
+ 
    这篇文章开头很好地阐述了到底什么是'可访问性' — 这包括我们要考虑哪一群人以及为什么要考虑这些人，不同用户使用什么工具与网页交互，以及我们在网页开发流中如何构建可用性部分。
    
  
    HTML: 确保可访问性的良好基础
    
- 
    只要确保恰当的 HTML 元素被用于适当的目的, 大量的网页内容即可具有可用性, 这篇文章详细地讲述了 HTML 的用法, 以确保网页有最大的可访问性.
    
+ 
    只要确保恰当的 HTML 元素被用于适当的目的， 大量的网页内容即可具有可用性，这篇文章详细地讲述了 HTML 的用法，以确保网页有最大的可访问性。
    
  
    CSS 与 JavaScript 可用性最佳实践
    
- 
    CSS 与 JavaScript, 当正确使用的时候, 也能够使得网页具有很好的可访问性, 但是如果错误地使用他们将极大地破坏可访问性. 这篇文章罗列了一些应该被考虑的CSS 和 JavaScript的最佳实践, 确保再复杂的内容都可以有尽可能好的可访问性.
    
+ 
    CSS 与 JavaScript, 当正确使用的时候，也能够使得网页具有很好的可访问性，但是如果错误地使用他们将极大地破坏可访问性。这篇文章罗列了一些应该被考虑的 CSS 和 JavaScript 的最佳实践，确保再复杂的内容都可以有尽可能好的可访问性。
    
  
    无障碍网页应用基础
    
- 
    继上一篇文章之后，有时候制作复杂的UI控件会涉及到非语义的HTML和动态的JavaScript更新内容会很难。 WAI-ARIA是一种可以帮助解决这些问题的技术，通过增加浏览器和辅助技术可以识别和使用的进一步语义来让用户知道正在发生的事情。 在这里，我们将展示如何在基本级别上使用它来提高可访问性。
    
+ 
    继上一篇文章之后，有时候制作复杂的 UI 控件会涉及到非语义的 HTML 和动态的 JavaScript 更新内容会很难。WAI-ARIA 是一种可以帮助解决这些问题的技术，通过增加浏览器和辅助技术可以识别和使用的进一步语义来让用户知道正在发生的事情。在这里，我们将展示如何在基本级别上使用它来提高可访问性。
    
  
    多媒体
    
- 
    可以提高可访问性的另一类内容是多媒体 - 视频，音频和图像内容需要提供适当的文本替代方案，以便辅助技术和相应的用户能够理解。 这篇文章展示了永达。
    
+ 
    可以提高可访问性的另一类内容是多媒体 - 视频，音频和图像内容需要提供适当的文本替代方案，以便辅助技术和相应的用户能够理解。这篇文章展示了永达。
    
  
    移动设备可访问性
    
- 
    随着移动设备上网页访问的流行，以及主流平台（如iOS和Android）具备了完善的辅助功能工具，考虑在这些平台上Web内容的可访问性也是非常重要的。 本文讨论针对移动设备的可访问性注意事项。
    
+ 
    随着移动设备上网页访问的流行，以及主流平台（如 iOS 和 Android）具备了完善的辅助功能工具，考虑在这些平台上 Web 内容的可访问性也是非常重要的。本文讨论针对移动设备的可访问性注意事项。
    
 
    
 
 
    评估
    
 
 
    
  
    可访问性诊断
    
- 
    针对这篇模块, 对于您的理解程度, 我们提供了评估方法，我们向您展示了一个简单的网站，其中包含许多您需要诊断和修复的可访问性问题。
    
+ 
    针对这篇模块，对于您的理解程度， 我们提供了评估方法，我们向您展示了一个简单的网站，其中包含许多您需要诊断和修复的可访问性问题。
    
 
    
 
 
    另见
    
 
 
diff --git a/files/zh-cn/learn/accessibility/mobile/index.html b/files/zh-cn/learn/accessibility/mobile/index.html
index 8eebaf2abd8156..89d2599f4eae80 100644
--- a/files/zh-cn/learn/accessibility/mobile/index.html
+++ b/files/zh-cn/learn/accessibility/mobile/index.html
@@ -17,16 +17,16 @@
 
 
    {{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
    
 
-
    随着通过手机设备访问网络越来越受欢迎，例如iOS和Android等流行的平台都拥有了完善的无障碍工具，在这些平台上考虑你网页的无障碍访问性是一件很重要事情。本文将着重介绍移动端无障碍的注意事项。
    
+
    随着通过手机设备访问网络越来越受欢迎，例如 iOS 和 Android 等流行的平台都拥有了完善的无障碍工具，在这些平台上考虑你网页的无障碍访问性是一件很重要事情。本文将着重介绍移动端无障碍的注意事项。
    
 
 
    
  
   
    前提:有一定的HTML基础(可参阅 HTML入门)，理解什么是可访问性。前提：有一定的 HTML 基础 (可参阅 HTML 入门)，理解什么是可访问性。
   
    
   
    目标:目标：
    了解可访问性为网页带来的好处和如何在网页中进行实现。
   
    
      
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
-   
-   
+   
+   
-   
+   
@@ -34,44 +34,44 @@
 
 
    移动设备上的无障碍
    
 
-
    现代移动设备对无障碍和大多数Web标准有很好的支持。那个因为移动设备和桌面设备使用了完全不同的技术而强制要求开发者根据设备不同将用户分发到不同的域名的时代已经结束了（虽然现在还有一些公司仍然在检测用户移动设备的使用，并为他提供一个独立的手机域名）。
    
+
    现代移动设备对无障碍和大多数 Web 标准有很好的支持。那个因为移动设备和桌面设备使用了完全不同的技术而强制要求开发者根据设备不同将用户分发到不同的域名的时代已经结束了（虽然现在还有一些公司仍然在检测用户移动设备的使用，并为他提供一个独立的手机域名）。
    
 
 
    目前，移动设备一般都可以处理“full fat”的网站了，同时，为了能够让盲人成功的使用网站，主流平台甚至还内置了阅读器。移动设备也倾向于对“WAI-ARIA”有个好的支持。
    
 
-
    你只要需要遵守好的web设计规范和最佳的无障碍实践，就可以让你的网站在手机上可用且无障碍。
    
+
    你只要需要遵守好的 web 设计规范和最佳的无障碍实践，就可以让你的网站在手机上可用且无障碍。
    
 
-
    移动设备需要特别考虑一些例外情况; 主要的是:
    
+
    移动设备需要特别考虑一些例外情况; 主要的是：
    
 
 
      
- 
    • 控件交互 - 确保类似于按钮的UI控件可以在移动端（主要是触摸屏）和桌面端（主要是鼠标/键盘）无障碍的使用
      • 
+ 
    • 控件交互 - 确保类似于按钮的 UI 控件可以在移动端（主要是触摸屏）和桌面端（主要是鼠标/键盘）无障碍的使用
      • 
  
    • 用户输入 - 在移动端尽可能的减少用户输入的要求（例如在表单中，尽量少打字）。
      • 
  
    • 响应式设计 - 确保移动端布局正常的情况下，节省需要下载的图片大小，并考虑为高分辨率的屏幕提供图片。
      • 
 
    
 
-
    Android和iOS上的屏幕阅读器测试总结
    
+
    Android 和 iOS 上的屏幕阅读器测试总结
    
 
 
    最常见的移动端平台具有功能全面的屏幕阅读器。这些功能和桌面端屏幕阅读器大致相同，除了移动端屏幕阅读器大量的使用手势操作而不是按键组合操作。
    
 
-
    让我们来看看最主要的两个 - Android上的TalkBack和iOS上的VoiceOver。
    
+
    让我们来看看最主要的两个 - Android 上的 TalkBack 和 iOS 上的 VoiceOver。
    
 
 
    Android TalkBack
    
 
-
    TalkBack是运行在Android系统上的。
    
+
    TalkBack 是运行在 Android 系统上的。
    
 
-
    在菜单中选择 设置 > 无障碍 > TalkBack，打开开关即可打开TalkBack。按照屏幕提示操作即可。
    
+
    在菜单中选择 设置 > 无障碍 > TalkBack，打开开关即可打开 TalkBack。按照屏幕提示操作即可。
    
 
-
    注意: 旧版本的TalkBack的打开方式有一点不同。
    
+
    注意: 旧版本的 TalkBack 的打开方式有一点不同。
    
 
-
    当TalkBack打开时，你的android设备的基本操作将有一点点不同。举个例子：
    
+
    当 TalkBack 打开时，你的 android 设备的基本操作将有一点点不同。举个例子：
    
 
 
      
- 
    1. 点击一个应用将会选择它，同时，你的设备将会告诉你这个APP是什么。
      2. 
+ 
    2. 点击一个应用将会选择它，同时，你的设备将会告诉你这个 APP 是什么。
      3. 
  
    3. 如果你按在功能键上向左右滑动，将会在应用、按钮或控件之间切换。设备将会读出每一项。
      4. 
  
    4. 双击任何地方将会打开某个应用或者选择某个选项。 
      5. 
- 
    5. 你也可以“通过触摸来探索”-将手指按在屏幕上并拖拽，然后你的设备将会读出你移动经过的不同的应用或项目。
      6. 
+ 
    6. 你也可以“通过触摸来探索” - 将手指按在屏幕上并拖拽，然后你的设备将会读出你移动经过的不同的应用或项目。
      7. 
 
    
 
-
    如果你想关掉TalkBack:
    
+
    如果你想关掉 TalkBack:
    
 
 
      
  
    1. 通过上面的手势导航到“设置”
      2. 
@@ -81,11 +81,11 @@ 
      Android TalkBack
      
 
 
      注意: 你可以通过向左上方滑动返回桌面，如果你有多个桌面，你可以通过两个手指在屏幕上左右滑动来切换桌面。
      
 
-
      注意: 关于“TalkBack”的收拾完整列表，查看使用TalkBack手势。
      
+
      注意: 关于“TalkBack”的收拾完整列表，查看使用 TalkBack 手势。
      
 
 
      解锁手机
      
 
-
      当TalkBack处于打开状态时，解锁手机有一点点不同。
      
+
      当 TalkBack 处于打开状态时，解锁手机有一点点不同。
      
 
 
      你可以通过双根手指从底部向上滑动去锁定手机。如果你设置了密码或者手势，你将会进入相关的入口页去输入密码或手势。
      
 
@@ -93,7 +93,7 @@ 
      解锁手机
      
 
 
      全局菜单和本地菜单
      
 
-
      TalkBack允许你使用全局和本地菜单，无论你已经导航到哪个位置。前者提供和设备相关的全局选项，后者提供和当前你所在的应用或屏幕相关的选项。
      
+
      TalkBack 允许你使用全局和本地菜单，无论你已经导航到哪个位置。前者提供和设备相关的全局选项，后者提供和当前你所在的应用或屏幕相关的选项。
      
 
 
      要进入这些菜单：
      
 
@@ -115,50 +115,50 @@ 
      浏览网页
      
 
        
  
      1. 打开浏览器
        2. 
  
      2. 激活地址栏
        3. 
- 
      3. 进入一个有一堆标题的网页，就像bbc.co.uk的首页。输入网址的文字：
+ 
      4. 进入一个有一堆标题的网页，就像 bbc.co.uk 的首页。输入网址的文字：
   
          
    
        1. 通过左右滑动来找到地址栏，然后双击它
          2. 
    
        2. 手指按在虚拟键盘上，选择你想要的字符，松开手指输入它，重复上述操作输入完所有的字符
          3. 
-   
        3. 输入完之后，找到Enter键并按下
          4. 
+   
        4. 输入完之后，找到 Enter 键并按下
          5. 
   
        
  
        5. 
  
      5. 向左右滑动在页面上不同的项目之间切换
        6. 
  
      6. 向上然后向右滑动进入本地内容菜单
        7. 
  
      7. 向右滑动直到你找到“标题和标识”选项
        8. 
- 
      8. 双击选择它。现在你就可以通过左右滑动在标题和ARIA标识之间切换
        9. 
+ 
      9. 双击选择它。现在你就可以通过左右滑动在标题和 ARIA 标识之间切换
        10. 
  
      10. 向右向上滑动之后，进去本地上下文菜单，选择“默认”，就可以返回默认模式
        11. 
 
      
 
-
      注意: 查看TalkBack入门获取更完整的文档。
      
+
      注意: 查看TalkBack 入门获取更完整的文档。
      
 
 
      iOS VoiceOver
      
 
-
      它是在iOS系统上的一个移动端VoiceOver。
      
+
      它是在 iOS 系统上的一个移动端 VoiceOver。
      
 
-
      要打开它，请在设置中选择 常规 > 无障碍 > VoiceOver。按下VoiceOver的开关去启动它（你还会在页面中看到很多和VoiceOver相关的其他选项）。
      
+
      要打开它，请在设置中选择 常规 > 无障碍 > VoiceOver。按下 VoiceOver 的开关去启动它（你还会在页面中看到很多和 VoiceOver 相关的其他选项）。
      
 
-
      一旦开启VoiceOver，iOS的基本操作手势将有所不同：
      
+
      一旦开启 VoiceOver，iOS 的基本操作手势将有所不同：
      
 
 
        
  
      1. 单击将会导致项目被选中，你的设备将会告诉你，你点击的是什么应用。
        2. 
  
      2. 你也可以通过向左右滑动屏幕来移动屏幕上的项目，或者在屏幕上滑动手指以移动项目（当你找到你想要的项目的时候，把手指离开屏幕来选中它）。
        3. 
- 
      3. 双击屏幕上的任意位置，可以激活选中的项目（例如，打开选中的App）。
        4. 
+ 
      4. 双击屏幕上的任意位置，可以激活选中的项目（例如，打开选中的 App）。
        5. 
  
      5. 通过三根手指滑动浏览页面。
        6. 
  
      6. 用两个手指点击来执行上下文相关的操作，例如在相机里拍摄照片。
        7. 
 
      
 
-
      要再次将其关闭，你必须使用上述手势导航到 设置 > 常规 > 无障碍 >  VoiceOver，然后将VoiceOver切换回关闭状态。
      
+
      要再次将其关闭，你必须使用上述手势导航到 设置 > 常规 > 无障碍 >  VoiceOver，然后将 VoiceOver 切换回关闭状态。
      
 
 
      解锁手机
      
 
-
      你需要正常的按下HOME键（或划过）就可以解锁手机了。如果你设置了密码，你可以通过滑动来选择每一个数字，然后在找到合适的数字后双击输入每一个数字。
      
+
      你需要正常的按下 HOME 键（或划过）就可以解锁手机了。如果你设置了密码，你可以通过滑动来选择每一个数字，然后在找到合适的数字后双击输入每一个数字。
      
 
 
      使用转子
      
 
-
      当VoiceOver打开时，您可以使用一种名为“转子”的导航功能，该功能可让您快速从多种常用选项中进行选择。 要使用它:
      
+
      当 VoiceOver 打开时，您可以使用一种名为“转子”的导航功能，该功能可让您快速从多种常用选项中进行选择。要使用它：
      
 
 
        
- 
      1. 像转动拨号盘一样在屏幕上扭动两根手指。 当你扭动更多的时候，每个选项都会被朗读。 你可以来回循环选项。
        2. 
+ 
      2. 像转动拨号盘一样在屏幕上扭动两根手指。当你扭动更多的时候，每个选项都会被朗读。你可以来回循环选项。
        3. 
  
      3. 一旦你找到你想要的选项：
   
          
    
        1. 松开手指来选择它。
          2. 
@@ -167,20 +167,20 @@ 
          使用转子
          
  
 
        
 
-
        转子上的提供的选项是上下文相关的，他们会根据你所在的APP或者试图不同而不同。（参见下面的例子）
        
+
        转子上的提供的选项是上下文相关的，他们会根据你所在的 APP 或者试图不同而不同。（参见下面的例子）
        
 
 
        浏览网页
        
 
-
        让我们用VoiceOver浏览网页：
        
+
        让我们用 VoiceOver 浏览网页：
        
 
 
          
  
        1. 打开你的浏览器
          2. 
  
        2. 激活地址栏
          3. 
- 
        3. 进入这一个有一堆标题的网站，就像bbc.co.uk的首页。输入网址：
+ 
        4. 进入这一个有一堆标题的网站，就像 bbc.co.uk 的首页。输入网址：
   
            
    
          1. 通过向左右滑动来选择地址栏，找到之后双击它
            2. 
    
          2. 对于每一个字符，手指在虚拟键盘上长按，直到找到你想要的字符，然后释放手指来选择他。双击它输入
            3. 
-   
          3. 完成后，找到Enter键并按下
            4. 
+   
          4. 完成后，找到 Enter 键并按下
            5. 
   
          
  
          5. 
  
        5. 向左右滑动来在页面上切换不同的项目。你可以通过双击来选择他（例如，按住链接）。
          6. 
@@ -198,13 +198,13 @@ 
          浏览网页
          
  
        6. 选择标题，现在你可以通过上下滑动在页面的不同标题中切换
          7. 
 
        
 
-
        注意: 有关iOS上可用的VoiceOver手势以及有关辅助功能的其他提示的更完整资料可以查看在你的设备上用VoiceOver测试辅助功能
        
+
        注意: 有关 iOS 上可用的 VoiceOver 手势以及有关辅助功能的其他提示的更完整资料可以查看在你的设备上用 VoiceOver 测试辅助功能
        
 
 
        控制机制
        
 
-
        在我们的CSS和JavaScript可访问性文章中，我们研究了特定于某种控制机制的事件的概念（请参阅鼠标特定的事件）。 回顾一下，因为其他控制机制不能激活相关的功能，将会导致辅助功能的问题。
        
+
        在我们的 CSS 和 JavaScript 可访问性文章中，我们研究了特定于某种控制机制的事件的概念（请参阅鼠标特定的事件）。回顾一下，因为其他控制机制不能激活相关的功能，将会导致辅助功能的问题。
        
 
-
        举例来说，点击事件在可访问性方面是好的 - 通过点击处理器设置的元素，选中它并按下回车或返回，或者在触摸屏设备上点击它，可以调用关联的事件处理程序。试试我们的例子simple-button-example.html(查看在线例子)来看看我们是什么意思。
        
+
        举例来说，点击事件在可访问性方面是好的 - 通过点击处理器设置的元素，选中它并按下回车或返回，或者在触摸屏设备上点击它，可以调用关联的事件处理程序。试试我们的例子simple-button-example.html(查看在线例子) 来看看我们是什么意思。
        
 
 
        另一方面，像mousedown和mouseup这些特定的鼠标事件会产生一些问题 - 他们的事件处理程序不能使用除了鼠标意外的设备操作。
        
 
@@ -218,7 +218,7 @@ 
        控制机制
        
 
 document.onmouseup = stopMove;
 
-
        为了能其他表单空间起作用，你需要使用其他同等的事件代替，比如在触屏设备上用touch事件：
        
+
        为了能其他表单空间起作用，你需要使用其他同等的事件代替，比如在触屏设备上用 touch 事件：
        
 
 
        div.ontouchstart = function(e) {
   initialBoxX = div.offsetLeft;
@@ -242,10 +242,10 @@ 
        响应式设计
        
 
          
  
        • 移动端设备布局的适用性。例如，在窄屏上多列布局不能很好的工作，需要提高文字大小以便变成可读。这些问题可以通过媒体查询、viewport、弹性布局来解决上面的问题。
          • 
  
        • 节省下载的图片大小。一般来说，小屏幕设备不需要与桌面设备一样大的图像，而且它们将更可能在慢速网络连接上。因此，适当地缩小屏幕设备以缩小图像是明智的。您可以使用响应式图像技术处理此问题。
          • 
- 
        • 考虑高分辨率。许多移动设备具有高分辨率屏幕，因此需要更高分辨率的图像，使得显示器可以继续看起来清晰和锐利。再次，您可以使用响应式图像技术来适当地提供图像。此外，使用SVG矢量图像格式可以满足许多图像要求，这些格式在目前的浏览器中得到了很好的支持。 SVG有一个小文件大小，并将保持清晰的大小显示在（请参阅向网络添加矢量图形一些更多的细节）。
          • 
+ 
        • 考虑高分辨率。许多移动设备具有高分辨率屏幕，因此需要更高分辨率的图像，使得显示器可以继续看起来清晰和锐利。再次，您可以使用响应式图像技术来适当地提供图像。此外，使用 SVG 矢量图像格式可以满足许多图像要求，这些格式在目前的浏览器中得到了很好的支持。SVG 有一个小文件大小，并将保持清晰的大小显示在（请参阅向网络添加矢量图形一些更多的细节）。
          • 
 
        
 
-
        注意: 我们不会在这里对响应式设计进行完整的讨论，因为他们在MDN其他地方都有涉及（参考上面的链接）。
        
+
        注意: 我们不会在这里对响应式设计进行完整的讨论，因为他们在 MDN 其他地方都有涉及（参考上面的链接）。
        
 
 
        具体的需要注意的点
        
 
@@ -257,11 +257,11 @@ 
        不能缩放
        
 
 
        <meta name="viewport" content="user-scalable=no">
        
 
-
        如果可能的话，你绝对不应该这么做 - 很多人都会依靠缩放来看你网站的内容，所以不使用缩放这个功能是一个很糟糕的主意。在某些情况下缩放会破坏UI；这种情况下，你觉得你绝对需要缩放，你可以提供一些别的近似的方法。例如增加一个控制文字大小的控件，通过这种方式就不会破坏UI了。
        
+
        如果可能的话，你绝对不应该这么做 - 很多人都会依靠缩放来看你网站的内容，所以不使用缩放这个功能是一个很糟糕的主意。在某些情况下缩放会破坏 UI；这种情况下，你觉得你绝对需要缩放，你可以提供一些别的近似的方法。例如增加一个控制文字大小的控件，通过这种方式就不会破坏 UI 了。
        
 
 
        保持菜单可用
        
 
-
        因为移动设备上的屏幕非常窄，所以使用媒体查询和其他技术使得导航菜单缩小到显示屏顶部的一个小图标，只有在需要的时候才展示菜单，这种方式在移动设备上很常见的。 这通常由“三横线”图标表示，并且设计模式因此被称为“汉堡菜单”。
        
+
        因为移动设备上的屏幕非常窄，所以使用媒体查询和其他技术使得导航菜单缩小到显示屏顶部的一个小图标，只有在需要的时候才展示菜单，这种方式在移动设备上很常见的。这通常由“三横线”图标表示，并且设计模式因此被称为“汉堡菜单”。
        
 
 
        在实现这样的菜单时，需要确保显示控件的控件可以通过适当的控制机制（通常为移动触摸）进行访问，如上面的控制机制中所讨论的，并且页面的其余部分被移开 或在菜单被访问时以某种方式隐藏，以避免与导航混淆。
        
 
@@ -273,7 +273,7 @@ 
        用户输入
        
 
 
        出于这个原因，值得尽量减少所需的输入量。作为一个例子，与其让用户每次使用常规文本输入来填写他们的工作标题，而是可以提供一个<select>菜单，其中包含最常见的选项（这也有助于数据输入的一致性），并提供一个“其他”选项，显示一个文本字段来输入任何异常值。你可以在common-job-types.html中看到这个想法的一个简单的例子（查看在线例子）。
        
 
-
        也值得考虑在移动平台上使用HTML5格式输入类型（如日期），因为它们可以很好地处理它们 - 例如，Android和iOS都会显示可用于设备体验的可用小部件。有关示例，请参阅html5-form-examples.html（请查看HTML5表单示例） - 尝试加载这些内容并在移动设备上对其进行操作。例如：
        
+
        也值得考虑在移动平台上使用 HTML5 格式输入类型（如日期），因为它们可以很好地处理它们 - 例如，Android 和 iOS 都会显示可用于设备体验的可用小部件。有关示例，请参阅html5-form-examples.html（请查看HTML5 表单示例） - 尝试加载这些内容并在移动设备上对其进行操作。例如：
        
 
 
          
  
        • 在输入数字、电话和邮件时，展示合适的虚拟键盘来输入数字。
          • 
@@ -289,7 +289,7 @@ 
          总结
          
 
          参见
          
 
 
 
@@ -302,7 +302,7 @@ 
          参见
          
 
          在这个模块中
          
 
 
            
- 
          • 什么是可访问性?
            • 
+ 
          • 什么是可访问性？
            • 
  
          • HTML: A good basis for accessibility
            • 
  
          • CSS and JavaScript accessibility best practices
            • 
  
          • WAI-ARIA basics
            • 
diff --git a/files/zh-cn/learn/accessibility/multimedia/index.html b/files/zh-cn/learn/accessibility/multimedia/index.html
index 70be0d244f3a60..f5dd0fd6510ce7 100644
--- a/files/zh-cn/learn/accessibility/multimedia/index.html
+++ b/files/zh-cn/learn/accessibility/multimedia/index.html
@@ -1,5 +1,5 @@
 ---
-title: 多媒体的可访问性(Accessible multimedia)
+title: 多媒体的可访问性 (Accessible multimedia)
 slug: Learn/Accessibility/Multimedia
 translation_of: Learn/Accessibility/Multimedia
 original_slug: learn/Accessibility/多媒体
@@ -13,11 +13,11 @@
 
    
  
   
    前置条件:基本的计算机素养, 对Javascript,html,css有基本的认识, 对之前的课程有一定的理解。前置条件：基本的计算机素养，对 Javascript,html,css 有基本的认识，对之前的课程有一定的理解。
   
    
   
    目标:目标：
    了解移动端上无障碍的存在的问题，即如何解决他们。
   
    
  
    
-   
-   
+   
+   
-   
+   
@@ -27,13 +27,13 @@ 
    多媒体和可访问性
    
 
 
    到目前为止，在这个模块中，我们已经查看了各种内容以及需要做些什么来确保其可访问性，从简单的文本内容到数据表，图像，本机控件（如表单元素和按钮）以及更复杂的标记结构（具有WAI-ARIA属性）。
    
 
-
    另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。图像，视频，<canvas>元素，Flash电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。
    
+
    另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。图像，视频，<canvas>元素，Flash 电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。
    
 
 
    但不要绝望 - 在这里我们将帮助您浏览可用于使多媒体更容易访问的技术。
    
 
 
    简单图像
    
 
-
    我们已经介绍了 HTML 图像的简单文本替代HTML: A good basis for accessibility –– 您可以参考其中了解详细信息。简而言之,应确保在可能的情况下,视觉内容具有替代文本,供屏幕阅读器拾取和读取给其用户。
    
+
    我们已经介绍了 HTML 图像的简单文本替代HTML: A good basis for accessibility –– 您可以参考其中了解详细信息。简而言之，应确保在可能的情况下，视觉内容具有替代文本，供屏幕阅读器拾取和读取给其用户。
    
 
 
    示例：
    
 
@@ -47,7 +47,7 @@ 
    可访问的音频和视频控件
    本地 HTML5 控件的问题
 
-
    HTML5 视频和音频实例甚至附带一组内置控件,允许您直接在盒子控制媒体。例如(请参阅本地控件.html 源代码和实时演示):
    
+
    HTML5 视频和音频实例甚至附带一组内置控件，允许您直接在盒子控制媒体。例如 (请参阅本地控件.html 源代码和实时演示):
    
 
 
    <audio controls>
   <source src="viper.mp3" type="audio/mp3">
@@ -63,34 +63,34 @@ 
    本地 HTML5 控件的问题
    
   <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
 </video>
    
 
-
    控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在Firefox 和 Chrome:
    
+
    控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在 Firefox 和 Chrome:
    
 
 
    Screenshot of Video Controls in Firefox
    
 
 
    Screenshot of Video Controls in Chrome
    
 
-
    但是,这些控件存在问题:
    
+
    但是，这些控件存在问题：
    
 
 
      
- 
    • 在除Opera 以外任何浏览器中，它们不可通过键盘访问。
      • 
+ 
    • 在除 Opera 以外任何浏览器中，它们不可通过键盘访问。
      • 
  
    • Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.不同的浏览器为本地控件提供了不同的样式和功能（非样式化的），这意味着它们不容易按照网站样式指南进行。
      • 
 
    
 
-
    为了解决这个问题,我们可以创建自己的自定义控件。让我们来看看如何。
    
+
    为了解决这个问题，我们可以创建自己的自定义控件。让我们来看看如何。
    
 
 
    创建自定义音频和视频控件
    
 
 
    HTML5 视频和音频共享 API — HTML Media Element — 允许您将自定义功能映射到按钮和其他控件––这两个控件都是您自己定义的。
    
 
-
    让我们从上面获取视频示例,并向其添加自定义控件。
    
+
    让我们从上面获取视频示例，并向其添加自定义控件。
    
 
 
    基本设置
    
 
-
    首先,获取我们的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本,并将它们保存在硬盘上的新目录中。
    
+
    首先，获取我们的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本，并将它们保存在硬盘上的新目录中。
    
 
 
    创建一个名为 main.js 的新文件并将其保存在同一目录中。
    
 
-
    首先,让我们在 HTML 中查看视频播放器的 HTML:
    
+
    首先，让我们在 HTML 中查看视频播放器的 HTML:
    
 
 
    <section class="player">
   <video controls>
@@ -108,11 +108,11 @@ 
    基本设置
    
   </div>
 </section>
    
 
-
    JavaScript基本设置
    
+
    JavaScript 基本设置
    
 
-
    我们在视频下方插入了一些简单的控制按钮。当然,这些控件在默认情况下不会执行任何操作。要添加功能,我们将使用 JavaScript。
    
+
    我们在视频下方插入了一些简单的控制按钮。当然，这些控件在默认情况下不会执行任何操作。要添加功能，我们将使用 JavaScript。
    
 
-
    我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部:
    
+
    我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部：
    
 
 
    var playPauseBtn = document.querySelector('.playpause');
 var stopBtn = document.querySelector('.stop');
@@ -120,21 +120,21 @@ 
    JavaScript基本设置
    
 var fwdBtn = document.querySelector('.fwd');
 var timeLabel = document.querySelector('.time');
    
 
-
    接下来,我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码:
    
+
    接下来，我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码：
    
 
 
    var player = document.querySelector('video');
    
 
-
    这包含对{{domxref("HTMLMediaElement")}}对象的引用,该对象具有几个有用的属性和方法,可用于将功能连接到我们的按钮。
    
+
    这包含对{{domxref("HTMLMediaElement")}}对象的引用，该对象具有几个有用的属性和方法，可用于将功能连接到我们的按钮。
    
 
-
    在开始创建按钮功能之前,让我们删除本地控件,以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容:
    
+
    在开始创建按钮功能之前，让我们删除本地控件，以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容：
    
 
 
    player.removeAttribute('controls');
    
 
-
    这样做,而不是仅仅不包括控件属性摆在首位有一个优势,如果我们的JavaScript失败,用户仍然有一些控件可用。
    
+
    这样做，而不是仅仅不包括控件属性摆在首位有一个优势，如果我们的 JavaScript 失败，用户仍然有一些控件可用。
    
 
 
    连接按钮
    
 
-
    首先,让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换,如下所示。将其添加到代码底部:
    
+
    首先，让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换，如下所示。将其添加到代码底部：
    
 
 
    playPauseBtn.onclick = function() {
   if(player.paused) {
@@ -146,7 +146,7 @@ 
    连接按钮
    
   }
 };
    
 
-
    接下来,将此代码添加到底部,该代码控制停止按钮:
    
+
    接下来，将此代码添加到底部，该代码控制停止按钮：
    
 
 
    stopBtn.onclick = function() {
   player.pause();
@@ -154,9 +154,9 @@ 
    连接按钮
    
   playPauseBtn.textContent = 'Play';
 };
    
 
-
    在 {{domxref("HTMLMediaElement")}}s上没有可用的 stop() 函数,因此我们改为pause()它,同时将当前时间设置为 0。
    
+
    在 {{domxref("HTMLMediaElement")}}s 上没有可用的 stop() 函数，因此我们改为pause()它，同时将当前时间设置为 0。
    
 
-
    接下来,我们的快退和快进按钮–– 将以下块添加到代码的底部:
    
+
    接下来，我们的快退和快进按钮–– 将以下块添加到代码的底部：
    
 
 
    rwdBtn.onclick = function() {
   player.currentTime -= 3;
@@ -171,11 +171,11 @@ 
    连接按钮
    
   }
 };
    
 
-
    这些非常简单,每次单击它们时,只需将 3 秒添加到currentTime。在真正的视频播放器中,您可能想要一个更精细的查找栏或类似功能。
    
+
    这些非常简单，每次单击它们时，只需将 3 秒添加到currentTime。在真正的视频播放器中，您可能想要一个更精细的查找栏或类似功能。
    
 
-
    请注意,当按下 Fwd 按钮时,我们还会检查currentTime是否超过总媒体的duration,或者媒体是否未播放。如果任一条件为 true,我们只需停止视频,以避免用户界面出错,如果他们试图在视频未播放时快进,或快进通过视频结束。
    
+
    请注意，当按下 Fwd 按钮时，我们还会检查currentTime是否超过总媒体的duration,或者媒体是否未播放。如果任一条件为 true，我们只需停止视频，以避免用户界面出错，如果他们试图在视频未播放时快进，或快进通过视频结束。
    
 
-
    最后,将以下内容添加到代码末尾,以控制显示的时间:
    
+
    最后，将以下内容添加到代码末尾，以控制显示的时间：
    
 
 
    player.ontimeupdate = function() {
   var minutes = Math.floor(player.currentTime / 60);
@@ -199,11 +199,11 @@ 
    连接按钮
    
   timeLabel.textContent = mediaTime;
 };
    
 
-
    每次更新时间(每秒一次)时,我们都会触发此功能。它算出给定的当前时间值(以秒为单位)的分钟和秒数,如果分钟或秒值小于 10,则添加前导 0,然后创建显示读出并将其添加到时间标签。
    
+
    每次更新时间 (每秒一次) 时，我们都会触发此功能。它算出给定的当前时间值 (以秒为单位) 的分钟和秒数，如果分钟或秒值小于 10，则添加前导 0，然后创建显示读出并将其添加到时间标签。
    
 
 
    阅读延伸
    
 
-
    这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退)的详细信息,请参阅:
    
+
    这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退) 的详细信息，请参阅：
    
 
 
 
-
    我们还创建了一个高级示例,以演示如何创建面向对象的系统,该系统可查找页面上的每个视频和音频播放器(无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅custom-controls-oojs(see the source code)。
    
+
    我们还创建了一个高级示例，以演示如何创建面向对象的系统，该系统可查找页面上的每个视频和音频播放器 (无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅custom-controls-oojs(see the source code)。
    
 
 
    音频脚本
    
 
-
    要为聋人提供访问音频内容的机会,您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上,也可以包含在单独的页面上并链接到
    
+
    要为聋人提供访问音频内容的机会，您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上，也可以包含在单独的页面上并链接到
    
 
-
    在实际创建脚本方面,您的选项包括:
    
+
    在实际创建脚本方面，您的选项包括：
    
 
 
      
- 
    • 商业服务––您可以向专业人士支付报酬进行转录,例如 Scribie、Casting Words或Rev公司. 询问并征求意见,以确保您找到一家信誉良好的公司,您可以有效地合作。
      • 
- 
    • 社区/草根/自我转录 – 如果您是工作场所中活跃社区或团队的一员,您可以请求他们帮助翻译。你甚至可以自己去做。
      • 
- 
    • 自动服务 – 提供自动服务,例如,当您将视频上传到 YouTube 时,您可以选择生成自动字幕/脚本。根据语音音频的清晰程度,生成的脚本质量将有很大差异。
      • 
+ 
    • 商业服务––您可以向专业人士支付报酬进行转录，例如 Scribie、Casting Words或Rev公司。询问并征求意见，以确保您找到一家信誉良好的公司，您可以有效地合作。
      • 
+ 
    • 社区/草根/自我转录 – 如果您是工作场所中活跃社区或团队的一员，您可以请求他们帮助翻译。你甚至可以自己去做。
      • 
+ 
    • 自动服务 – 提供自动服务，例如，当您将视频上传到 YouTube 时，您可以选择生成自动字幕/脚本。根据语音音频的清晰程度，生成的脚本质量将有很大差异。
      • 
 
    
 
-
    和生活中的大多数事情一样,你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录,你可能会得到它迅速和高质量的。如果你不想付钱,你很可能会以较低的质量完成,并且/或缓慢完成。
    
+
    和生活中的大多数事情一样，你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录，你可能会得到它迅速和高质量的。如果你不想付钱，你很可能会以较低的质量完成，并且/或缓慢完成。
    
 
-
    发布音频资源是不行的,但承诺稍后会发布脚本 - 此类承诺通常不会兑现,这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演,则可以在演出期间做笔记,与音频一起完整发布笔记,然后寻求帮助,以便稍后清理笔记。
    
+
    发布音频资源是不行的，但承诺稍后会发布脚本 - 此类承诺通常不会兑现，这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演，则可以在演出期间做笔记，与音频一起完整发布笔记，然后寻求帮助，以便稍后清理笔记。
    
 
 
    脚本示例
    
 
-
    如果使用自动服务,则可能需要使用该工具提供的用户界面。例如,查看Audio Transcription Sample 1并选择" More > Transcript"。
    
+
    如果使用自动服务，则可能需要使用该工具提供的用户界面。例如，查看Audio Transcription Sample 1并选择" More > Transcript"。
    
 
-
    如果要创建自己的用户界面来显示音频和相关脚本,您可以随心所欲地执行此操作,但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的audio-transcript-ui 示例(另请参阅source code)。
    
+
    如果要创建自己的用户界面来显示音频和相关脚本，您可以随心所欲地执行此操作，但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的audio-transcript-ui 示例 (另请参阅source code)。
    
 
 
    音频描述
    
 
-
    在音频附带视频的情况下,您需要提供某种音频说明来描述该额外内容。
    
+
    在音频附带视频的情况下，您需要提供某种音频说明来描述该额外内容。
    
 
-
    在许多情况下,这只会采取视频的形式,在这种情况下,您可以使用本文下一节中介绍的技术实现字幕。
    
+
    在许多情况下，这只会采取视频的形式，在这种情况下，您可以使用本文下一节中介绍的技术实现字幕。
    
 
-
    但是,有一些边缘情况。例如,您可能有一个会议的音频录制,该录音引用了附带的资源,如电子表格或图表。在这种情况下,应确保资源与音频和脚本一起提供,并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户,而不仅仅是聋人。
    
+
    但是，有一些边缘情况。例如，您可能有一个会议的音频录制，该录音引用了附带的资源，如电子表格或图表。在这种情况下，应确保资源与音频和脚本一起提供，并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户，而不仅仅是聋人。
    
 
 
    
-
    注意:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外,还考虑一个带宽连接较低的用户,他们会发现下载音频不方便。还要考虑在嘈杂的环境中(如酒吧或酒吧)中的用户,他们试图访问信息,但无法通过噪音听到信息。
    
+
    注意:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外，还考虑一个带宽连接较低的用户，他们会发现下载音频不方便。还要考虑在嘈杂的环境中 (如酒吧或酒吧) 中的用户，他们试图访问信息，但无法通过噪音听到信息。
    
 
    
 
 
    视频文本轨道
    
 
-
    要使聋人、盲人甚至其他用户组(如低带宽用户或不理解视频录制的语言的用户)可以访问视频,您需要在视频内容中包括文本轨道。
    
+
    要使聋人、盲人甚至其他用户组 (如低带宽用户或不理解视频录制的语言的用户) 可以访问视频，您需要在视频内容中包括文本轨道。
    
 
 
    
-
    注意:文本轨道对于潜在的任何用户也很有用,而不仅仅是那些残障用户。例如,有些用户可能无法听到音频,因为他们处于嘈杂的环境中(如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方(如图书馆),则可能不想打扰其他人。
    
+
    注意:文本轨道对于潜在的任何用户也很有用，而不仅仅是那些残障用户。例如，有些用户可能无法听到音频，因为他们处于嘈杂的环境中 (如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方 (如图书馆),则可能不想打扰其他人。
    
 
    
 
-
    这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了:
    
+
    这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了：
    
 
 
    Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"
    
 
@@ -263,20 +263,20 @@ 
    视频文本轨道
    
 
 
    An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"
    
 
-
    不同类型的文本轨道具有不同的目的。你遇到的主要情况是:
    
+
    不同类型的文本轨道具有不同的目的。你遇到的主要情况是：
    
 
 
      
- 
    • 标题 ––对于听不到音轨(包括所讲的单词，还有环境信息,如说话、以及用来营造喜怒气氛的音乐等)的聋人用户而言是有利的。
      • 
+ 
    • 标题 ––对于听不到音轨 (包括所讲的单词，还有环境信息，如说话、以及用来营造喜怒气氛的音乐等) 的聋人用户而言是有利的。
      • 
  
    • 字幕––为不懂所讲语言的用户提供音频对话框的翻译。
      • 
- 
    • 说明–– 这些描述包括无法观看视频的盲人的描述,例如场景的外观。
      • 
+ 
    • 说明–– 这些描述包括无法观看视频的盲人的描述，例如场景的外观。
      • 
  
    • 章节标题––旨在帮助用户导航媒体资源的章节标记
      • 
 
    
 
 
    实现 HTML5 视频文本轨道
    
 
-
    使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写,WebVTT 是一种文本格式,其中包含多个文本字符串以及元数据,例如您希望在视频中显示每个文本字符串的时间,甚至限制样式/定位信息。这些文本字符串称为提示。
    
+
    使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写，WebVTT 是一种文本格式，其中包含多个文本字符串以及元数据，例如您希望在视频中显示每个文本字符串的时间，甚至限制样式/定位信息。这些文本字符串称为提示。
    
 
-
    典型的 WebVTT 文件如下所示:
    
+
    典型的 WebVTT 文件如下所示：
    
 
 
    WEBVTT
 
@@ -290,14 +290,14 @@ 
    实现 HTML5 视频文本轨道
    
 
   ...
    
 
-
    要将此信息与 HTML 媒体播放一起显示,您需要:
    
+
    要将此信息与 HTML 媒体播放一起显示，您需要：
    
 
 
      
- 
    • 将其保存为 .vtt 文件,放在一个合理的地方。
      • 
- 
    • Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.使用 {{htmlelement("track")}} 元素链接到 .vtt 文件。<track>应放在<audio>或<video>内,但在<source>元素之后。使用 {{htmlattrxref("kind","track")}}属性指定提示是字幕、标题还是说明。此外,使用 {{htmlattrxref("srclang","track")}} 告诉浏览器您用什么语言编写字幕。
      • 
+ 
    • 将其保存为 .vtt 文件，放在一个合理的地方。
      • 
+ 
    • Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.使用 {{htmlelement("track")}} 元素链接到 .vtt 文件。<track>应放在<audio>或<video>内，但在<source>元素之后。使用 {{htmlattrxref("kind","track")}}属性指定提示是字幕、标题还是说明。此外，使用 {{htmlattrxref("srclang","track")}} 告诉浏览器您用什么语言编写字幕。
      • 
 
    
 
-
    下面是一个示例:
    
+
    下面是一个示例：
    
 
 
    <video controls>
     <source src="example.mp4" type="video/mp4">
@@ -305,11 +305,11 @@ 
    实现 HTML5 视频文本轨道
    
     <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
 </video>
    
 
-
    这将产生显示字幕的视频,如下所示:
    
+
    这将产生显示字幕的视频，如下所示：
    
 
 
    Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."
    
 
-
    有关详细信息,请阅读Adding captions and subtitles to HTML5 video。您可以找到与本文一起使用本文的the example,本文由 Ian Devlin 编写(请参阅source code)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意,要打开字幕,您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。
    
+
    有关详细信息，请阅读Adding captions and subtitles to HTML5 video。您可以找到与本文一起使用本文的the example,本文由 Ian Devlin 编写 (请参阅source code)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意，要打开字幕，您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。
    
 
 
    
 
    注意:文本轨道和转录也可以帮助您使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。
    
@@ -317,7 +317,7 @@ 
    实现 HTML5 视频文本轨道
    
 
 
    其他多媒体内容
    
 
-
    以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容,例如:
    
+
    以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容，例如：
    
 
 
      
  
    • HTML5 canvas
      • 
@@ -325,20 +325,20 @@ 
      其他多媒体内容
      
  
    • Silverlight
      • 
 
    
 
-
    对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:
    
+
    对于此类内容，您需要根据案例处理辅助功能问题。在某些情况下，它不是那么糟糕，例如：
    
 
 
 
-
    然而,其他多媒体不是那么容易使访问。例如,如果您正在处理沉浸式 3D 游戏或虚拟现实应用,那么为此类体验提供文本替代方案确实非常困难,您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。
    
+
    然而，其他多媒体不是那么容易使访问。例如，如果您正在处理沉浸式 3D 游戏或虚拟现实应用，那么为此类体验提供文本替代方案确实非常困难，您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。
    
 
-
    但是,您可以确保此类应用具有足够的颜色对比度和清晰的显示,以便对视力低下/色盲的人来说可以感知,并且还可以使其键盘可访问。请记住,辅助功能就是尽可能多地做,而不是一直追求 100% 的可访问性,这通常是不可能的。
    
+
    但是，您可以确保此类应用具有足够的颜色对比度和清晰的显示，以便对视力低下/色盲的人来说可以感知，并且还可以使其键盘可访问。请记住，辅助功能就是尽可能多地做，而不是一直追求 100% 的可访问性，这通常是不可能的。
    
 
 
    总结
    
 
-
    本章概述了多媒体内容的可访问性问题,以及一些实用的解决方案。
    
+
    本章概述了多媒体内容的可访问性问题，以及一些实用的解决方案。
    
 
 
    {{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
    
 
diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.html b/files/zh-cn/learn/accessibility/wai-aria_basics/index.html
index 9a3c5192efb24f..10aea022e58562 100644
--- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.html
+++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.html
@@ -3,7 +3,7 @@
 slug: learn/Accessibility/WAI-ARIA_basics
 tags:
   - WAI-ARIA
-  - Web无障碍
+  - Web 无障碍
   - 无障碍
 translation_of: Learn/Accessibility/WAI-ARIA_basics
 ---
@@ -11,17 +11,17 @@
 
 
    {{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
    
 
-
    紧接上文继续，有时候，我们制作涉及非语义HTML 和动态的JavaScript 内容更新的复杂UI控件可能很困难。WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。接下来我们将展示如何运用它来优化无障碍体验：
    
+
    紧接上文继续，有时候，我们制作涉及非语义 HTML 和动态的 JavaScript 内容更新的复杂 UI 控件可能很困难。WAI-ARIA 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。接下来我们将展示如何运用它来优化无障碍体验：
    
 
 
    
  
   
    先决条件:基本的计算机素养，对HTML，CSS和JavaScript的基本理解，对可访问性 的理解。先决条件：基本的计算机素养，对 HTML，CSS 和 JavaScript 的基本理解，对可访问性 的理解。
   
    
   
    目的:目的：
    了解多媒体背后的可访问性问题，以及如何克服这些问题。
   
    
  
    
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    前提要求:基础的电脑知识，对于HTML，CSS，JavaScript 的了解，还有对于前文课程的了解。前提要求：基础的电脑知识，对于 HTML，CSS，JavaScript 的了解，还有对于前文课程的了解。
   
    
   
    目的:进一步了解WAI-ARIA，明白他如何提供有效的语义，以便接下来在有需要的时候提供无障碍优化。目的：进一步了解 WAI-ARIA，明白他如何提供有效的语义，以便接下来在有需要的时候提供无障碍优化。
   
    
      
 
    
@@ -32,9 +32,9 @@ 
    何为 WAI-ARIA?
    
 
 
    一堆新的问题
    
 
-
    当Web 应用开始变得越来越复杂和动态化，一堆全新的无障碍访问问题和特性接踵而至。
    
+
    当 Web 应用开始变得越来越复杂和动态化，一堆全新的无障碍访问问题和特性接踵而至。
    
 
-
    例如，HTML5 提出了几种语义化标签用于定义常规页面的特性(例如 nav, footer 等等) 。在这些标签可用之前，我们一般简单地用div 带上ID 抑或是class 来解决问题，例如：<div class="nav">。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。
    
+
    例如，HTML5 提出了几种语义化标签用于定义常规页面的特性 (例如 nav, footer 等等) 。在这些标签可用之前，我们一般简单地用 div 带上 ID 抑或是 class 来解决问题，例如：<div class="nav">。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。
    
 
 
    最早的解决方案是加一个或者多个隐藏的链接来跳转到我们想要的位置，例如（这里用导航举例）：
    
 
@@ -47,80 +47,80 @@ 
    一堆新的问题
    
 
    <input type="date">
 <input type="range">
    
 
-
    他对于跨浏览器的支持并不好，而且他的样式修改也很麻烦，这使得他在网页的集成设计上难以有所用途。所以我们常常会用JavaScript 库来做这事，所以会用一系列嵌套的div 或者带有class 的table 元素，然后用CSS 来制定样式，JavaScript 来控制行为。
    
+
    他对于跨浏览器的支持并不好，而且他的样式修改也很麻烦，这使得他在网页的集成设计上难以有所用途。所以我们常常会用 JavaScript 库来做这事，所以会用一系列嵌套的 div 或者带有 class 的 table 元素，然后用 CSS 来制定样式，JavaScript 来控制行为。
    
 
 
    这样的问题是视觉上这样做事可行的，但屏幕阅读器对此会感到一无所知，他只能告诉用户她看到一堆复杂结构的元素，且毫无语义可言。
    
 
 
    进入 WAI-ARIA
    
 
-
    WAI-ARIA 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：
    
+
    WAI-ARIA 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：
    
 
 
      
- 
    • 角色 — 这定义了元素是干什么的。许多「标志性的角色」，其实重复了HTML5 的结构元素的语义价值。例如 role="navigation" ({{htmlelement("nav")}}) 或者 role="complementary" ({{htmlelement("aside")}})，这也有一些描述其他页面结构的（角色）， 例如 role="banner", role="search", role="tabgroup", role="tab" 等等。我们通常能从UI 层面找到它们。
      • 
- 
    • 属性 — 我们能通过定义一些属性给元素，让他们具备更多的语义。例如：  aria-required="true" 意味着元素在表单上是必填的。 然而 aria-labelledby="label" 允许你在元素上设置一个ID，用于labelledby引用作为屏幕阅读器指定的label 内容 ，多个也可以。当然，下面这个代码是不行的： <label for="input"> 。举个例子：你可以用 aria-labelledby 指定包含在a 标签中的key 描述{{htmlelement("div")}} 是多个 table 表格的label ，或者将它指定为 img 标签的alt 内容 — 而无需重复在每一个img 里头定义。如果迷糊了，你可以在这里看到例子： Text alternatives.
      • 
- 
    • 状态 —用于表达元素当前的条件的特殊属性，例如 aria-disabled="true"，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如Javascript。
      • 
+ 
    • 角色 — 这定义了元素是干什么的。许多「标志性的角色」，其实重复了 HTML5 的结构元素的语义价值。例如 role="navigation" ({{htmlelement("nav")}}) 或者 role="complementary" ({{htmlelement("aside")}})，这也有一些描述其他页面结构的（角色），例如 role="banner", role="search", role="tabgroup", role="tab" 等等。我们通常能从 UI 层面找到它们。
      • 
+ 
    • 属性 — 我们能通过定义一些属性给元素，让他们具备更多的语义。例如：  aria-required="true" 意味着元素在表单上是必填的。然而 aria-labelledby="label" 允许你在元素上设置一个 ID，用于labelledby引用作为屏幕阅读器指定的 label 内容 ，多个也可以。当然，下面这个代码是不行的： <label for="input"> 。举个例子：你可以用 aria-labelledby 指定包含在 a 标签中的 key 描述{{htmlelement("div")}} 是多个 table 表格的 label，或者将它指定为 img 标签的 alt 内容 — 而无需重复在每一个 img 里头定义。如果迷糊了，你可以在这里看到例子： Text alternatives.
      • 
+ 
    • 状态 —用于表达元素当前的条件的特殊属性，例如 aria-disabled="true"，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如 Javascript。
      • 
 
    
 
-
    关于 WAI-ARIA 属性重要的一点是它不会对web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍API)，这也是屏幕阅读器这一类软件的信息源。WAI-ARIA 不会影响网页的结构，以及DOM 等等，尽管这些属性可用于作为css 选择器。
    
+
    关于 WAI-ARIA 属性重要的一点是它不会对 web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)，这也是屏幕阅读器这一类软件的信息源。WAI-ARIA 不会影响网页的结构，以及 DOM 等等，尽管这些属性可用于作为 css 选择器。
    
 
 
    
-
    Note: 关于ARIA 的角色和他的用法，如需了解更多信息，尽在WAI-ARIA 规范，查看 角色定义
    
+
    Note: 关于 ARIA 的角色和他的用法，如需了解更多信息，尽在 WAI-ARIA 规范，查看 角色定义
    
 
-
    规范同时也包含了属性和状态的一个列表，链接有更多详尽信息：查看 属性和状态的定义（所有的aria-* 属性）
    
+
    规范同时也包含了属性和状态的一个列表，链接有更多详尽信息：查看 属性和状态的定义（所有的 aria-* 属性）
    
 
    
 
-
    在哪里支持WAI-ARIA？
    
+
    在哪里支持 WAI-ARIA？
    
 
-
    这不是一个容易回答的问题。很难找到一个确定的资源，说明支持WAI-ARIA 的哪些功能，以及在哪里，因为
    
+
    这不是一个容易回答的问题。很难找到一个确定的资源，说明支持 WAI-ARIA 的哪些功能，以及在哪里，因为
    
 
 
      
  
    1. WAI-ARIA 规范的特性太多了。
      2. 
  
    2. 操作系统、浏览器、屏幕阅读器三者相加的组合太多了，这些都需要考虑。
      3. 
 
    
 
-
    最后一个关键点——首先使用屏幕阅读器，你的操作系统需要运行具有必要的辅助功能API的浏览器，以便公开屏幕阅读器完成工作所需的信息。大部分流行的操作系统都有一到两个支持屏幕阅读器的浏览器。Paciello组织有一个新的帖子，以供参考： Rough Guide: browsers, operating systems and screen reader support updated.
    
+
    最后一个关键点——首先使用屏幕阅读器，你的操作系统需要运行具有必要的辅助功能 API 的浏览器，以便公开屏幕阅读器完成工作所需的信息。大部分流行的操作系统都有一到两个支持屏幕阅读器的浏览器。Paciello 组织有一个新的帖子，以供参考： Rough Guide: browsers, operating systems and screen reader support updated.
    
 
-
    接下来，你需要考虑下有问题的浏览器是否支持无障碍特性以及提供他们API 格式的信息暴露，并且屏幕阅读器是否识别信息并且正确地传达给用户。
    
+
    接下来，你需要考虑下有问题的浏览器是否支持无障碍特性以及提供他们 API 格式的信息暴露，并且屏幕阅读器是否识别信息并且正确地传达给用户。
    
 
 
      
- 
    1. 文章到现在，可以看得出浏览器端对于无障碍的支持做的很好。 caniuse.com 这一网站显示全球浏览器支持 WAI-ARIA 的比率达到了88%。
      2. 
- 
    2. 屏幕阅读器支持无障碍特性反而没达到这个水平，但是主流的屏幕阅读器做到了。 你可以通过查看Powermapper来了解支持级别 WAI-ARIA Screen reader compatibility 。
      3. 
+ 
    3. 文章到现在，可以看得出浏览器端对于无障碍的支持做的很好。 caniuse.com 这一网站显示全球浏览器支持 WAI-ARIA 的比率达到了 88%。
      4. 
+ 
    4. 屏幕阅读器支持无障碍特性反而没达到这个水平，但是主流的屏幕阅读器做到了。你可以通过查看 Powermapper 来了解支持级别 WAI-ARIA Screen reader compatibility 。
      5. 
 
    
 
-
    我们目的不是详细介绍所有的 WAI-ARIA 特性，以及它大部分支持的细节。相反，介绍最主要的 WAI-ARIA功能。我们没有提到的任何支持细节，您可以假定该特性得到了良好的支持。我们将清楚地介绍例外情况。
    
+
    我们目的不是详细介绍所有的 WAI-ARIA 特性，以及它大部分支持的细节。相反，介绍最主要的 WAI-ARIA 功能。我们没有提到的任何支持细节，您可以假定该特性得到了良好的支持。我们将清楚地介绍例外情况。
    
 
 
    
-
    笔记：一些JavaScript 库支持 WAI-ARIA，意味着生成UI 界面时，例如复杂的表单控件，他们会添加 ARIA 属性来优化它的无障碍特性。如果你再找一些第三方JavaScript 解决方案来进行快速的UI 开发，当你做选择的时候，必须重视 UI小部件的可访问性。一个良好的例子就是 jQuery UI (请看 About jQuery UI: Deep accessibility support), ExtJS 还有 Dojo/Dijit。
    
+
    笔记：一些 JavaScript 库支持 WAI-ARIA，意味着生成 UI 界面时，例如复杂的表单控件，他们会添加 ARIA 属性来优化它的无障碍特性。如果你再找一些第三方 JavaScript 解决方案来进行快速的 UI 开发，当你做选择的时候，必须重视 UI 小部件的可访问性。一个良好的例子就是 jQuery UI (请看 About jQuery UI: Deep accessibility support), ExtJS 还有 Dojo/Dijit。
    
 
    
 
 
    何时你应使用 WAI-ARIA?
    
 
-
    我们过去讨论了一些促使WAI-ARIA 诞生的问题。但基本上是以下四个主要领域：
    
+
    我们过去讨论了一些促使 WAI-ARIA 诞生的问题。但基本上是以下四个主要领域：
    
 
 
      
- 
    1. 路标/地标（Signposts/Landmarks）： ARIA 的 角色 属性值可以作为地标来复制HTML5 元素的语义化（例如 nav tag）。或者超越HTML5 的语义，给不同的功能块提供「路标」，例如 search, tabgroup, tab, listbox 等等 。
      2. 
+ 
    2. 路标/地标（Signposts/Landmarks）： ARIA 的 角色 属性值可以作为地标来复制 HTML5 元素的语义化（例如 nav tag）。或者超越 HTML5 的语义，给不同的功能块提供「路标」，例如 search, tabgroup, tab, listbox 等等 。
      3. 
  
    3. 动态的内容更新： 屏幕阅读器往往难以报告一直变化的内容，用无障碍特性我们能使用 aria-live 来通知屏幕阅读器某一部分的内容更新了。例如XMLHttpRequest 或者 DOM APIs。
      4. 
- 
    4. 优化键盘的无障碍操作: 默认的HTML 元素是具有自带的键盘辅助功能的。当其他元素与JavaScript一起进行交互时，键盘的辅助功能和屏幕阅读器的报告会因此收到影响（例如你将会难以用tab 到达理想的位置）。这是无法避免的，WAI-ARIA 提供了提供了一种允许其他元素获得焦点的方法 （使用 tabindex）。
      5. 
- 
    5. 非语义控件的可访问性： 当一系列嵌套的 <div> 与CSS / JavaScript一起用于创建复杂的UI功能，或者通过JavaScript大大地增强或者更改原生的控件，可访问性将会变得极其困难——屏幕阅读器将会难以找到语义内容线索。在这种情况下，AIRA 可以帮助提供缺少了的功能，例如 button, listbox，或者 tabgroup，另外和aria-required 或aria-posinset 这样的属性可以提供有关功能的更多线索。
      6. 
+ 
    6. 优化键盘的无障碍操作: 默认的 HTML 元素是具有自带的键盘辅助功能的。当其他元素与 JavaScript 一起进行交互时，键盘的辅助功能和屏幕阅读器的报告会因此收到影响（例如你将会难以用 tab 到达理想的位置）。这是无法避免的，WAI-ARIA 提供了提供了一种允许其他元素获得焦点的方法（使用 tabindex）。
      7. 
+ 
    7. 非语义控件的可访问性：当一系列嵌套的 <div> 与 CSS / JavaScript 一起用于创建复杂的 UI 功能，或者通过 JavaScript 大大地增强或者更改原生的控件，可访问性将会变得极其困难——屏幕阅读器将会难以找到语义内容线索。在这种情况下，AIRA 可以帮助提供缺少了的功能，例如 button, listbox，或者 tabgroup，另外和 aria-required 或 aria-posinset 这样的属性可以提供有关功能的更多线索。
      8. 
 
    
 
-
    注意：你只在需要的情况下使用无障碍特性！理想的情况下，你只要用原生的HTML 来实现屏幕阅读器所需的语义化内容即可。有些时候这是不可能的，一来是你对于代码的整体的控制是有限的，另一方面是总会有复杂到原生HTML 无法支持的功能需要你实现。在这个场景下，WAI-ARIA 将会变成有价值的可访问优化功能。
    
+
    注意：你只在需要的情况下使用无障碍特性！理想的情况下，你只要用原生的 HTML 来实现屏幕阅读器所需的语义化内容即可。有些时候这是不可能的，一来是你对于代码的整体的控制是有限的，另一方面是总会有复杂到原生 HTML 无法支持的功能需要你实现。在这个场景下，WAI-ARIA 将会变成有价值的可访问优化功能。
    
 
 
    但还是要重申：当你需要的时候再使用无障碍特性！
    
 
 
    
-
    注释：另外， 请尝试确保你的真实用户来测试你的网站：普通人，使用屏幕阅读器的用户，使用键盘导航的人。他们会提供你更多的见解。
    
+
    注释：另外，请尝试确保你的真实用户来测试你的网站：普通人，使用屏幕阅读器的用户，使用键盘导航的人。他们会提供你更多的见解。
    
 
    
 
 
    实用的 WAI-ARIA 实现
    
 
-
    在下一节中，我们将更详细地研究这四个方，并提供一些实例。继续之前你最好安装一个屏幕阅读器，以便你测试接下来的用例。（接下来的屏幕阅读器默认为 Mac 的VoiceOver，Windows 用户可以尝试JAWS 或者 Window Eyes ）
    
+
    在下一节中，我们将更详细地研究这四个方，并提供一些实例。继续之前你最好安装一个屏幕阅读器，以便你测试接下来的用例。（接下来的屏幕阅读器默认为 Mac 的 VoiceOver，Windows 用户可以尝试 JAWS 或者 Window Eyes ）
    
 
 
    查看我们的 testing screenreaders 得到更多关于屏幕阅读器的信息。
    
 
-
    路牌/地标 （Signposts/Landmarks）
    
+
    路牌/地标（Signposts/Landmarks）
    
 
-
    WAI-ARIA 给浏览器增加了 role 属性，这允许我们给站点中的元素增加我们想要的语义属性。第一个主要区域便是用于为屏幕阅读器提供信息，以便用户可以找到常见的页面元素。我们来举个例子，一个没有角色的站点的例子（在线demo）的页面结构：
    
+
    WAI-ARIA 给浏览器增加了 role 属性，这允许我们给站点中的元素增加我们想要的语义属性。第一个主要区域便是用于为屏幕阅读器提供信息，以便用户可以找到常见的页面元素。我们来举个例子，一个没有角色的站点的例子（在线 demo）的页面结构：
    
 
 
    <header>
   <h1>...</h1>
@@ -139,25 +139,25 @@ 
    路牌/地标 （Signpost
 
 <footer>...</footer>
    
 
-
    如果你用现代浏览器打开，并用屏幕阅读器测试，你就已经得到你要的信息了。例如VoiceOver 会给你以下信息（会以英文念出）：
    
+
    如果你用现代浏览器打开，并用屏幕阅读器测试，你就已经得到你要的信息了。例如 VoiceOver 会给你以下信息（会以英文念出）：
    
 
 
      
  
    • 在 <header> 元素 — "banner, 2 items" (它包含标题和 <nav>).
      • 
  
    • 在 <nav> 元素 — "navigation 2 items" (它包含一个列表和一个表单).
      • 
  
    • 在 <main> 元素 — "main 2 items" (它包含文章和侧边栏).
      • 
- 
    • 在 <aside> 元素 — "complementary 2 items" (它包含列表和标题.
      • 
+ 
    • 在 <aside> 元素 — "complementary 2 items" (它包含列表和标题。
      • 
  
    • 在搜索表单输入 — "Search query, insertion at beginning of text".
      • 
  
    • 在 <footer> 元素 — "footer 1 item".
      • 
 
    
 
-
    如果你转到VoiceOver的地标菜单（使用VoiceOver 绑定键（你可以在VoiceOver Utility 中设置） + U 访问，然后使用光标或者键盘来选择菜单选项），你将看到大部分元素都已很好地列出，因此可以快速访问它们。
    
+
    如果你转到 VoiceOver 的地标菜单（使用 VoiceOver 绑定键（你可以在 VoiceOver Utility 中设置） + U 访问，然后使用光标或者键盘来选择菜单选项），你将看到大部分元素都已很好地列出，因此可以快速访问它们。
    
 
 

    
  
    
 
-
    尽管如此，我们可以做的更好。这个搜索表单是一个人们愿意找到的重要的地标，我们可以设置input 的类别为search (<input type="search">)。 另外，在一些老的浏览器（尤其是IE8） 是无法识别的这些HTML5 的元素语义化的。
    
+
    尽管如此，我们可以做的更好。这个搜索表单是一个人们愿意找到的重要的地标，我们可以设置 input 的类别为 search (<input type="search">)。另外，在一些老的浏览器（尤其是 IE8）是无法识别的这些 HTML5 的元素语义化的。
    
 
-
    让我们来优化上文代码并且用上无障碍特性。首先我们给HTML 的结构加上角色。你可以复制上文demo 的index.html 和style.css 继续修改，或者看我们的网站无障碍角色版本例子（在线demo），结构如下：
    
+
    让我们来优化上文代码并且用上无障碍特性。首先我们给 HTML 的结构加上角色。你可以复制上文 demo 的 index.html 和 style.css 继续修改，或者看我们的网站无障碍角色版本例子（在线 demo），结构如下：
    
 
 
    <header>
   <h1>...</h1>
@@ -176,28 +176,28 @@ 
    路牌/地标 （Signpost
 
 <footer>...</footer>
    
 
-
    我们用了一个额外的功能：input元素用了属性 aria-label, 它给它一个描述性标签，可以由屏幕阅读器读出，尽管我们没有label 元素。在这些情况下，这非常有用——像这样的搜索表单是一个非常常见的，易于识别的功能，添加label 会破坏页面设计。
    
+
    我们用了一个额外的功能：input 元素用了属性 aria-label, 它给它一个描述性标签，可以由屏幕阅读器读出，尽管我们没有 label 元素。在这些情况下，这非常有用——像这样的搜索表单是一个非常常见的，易于识别的功能，添加 label 会破坏页面设计。
    
 
 
    <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
    
 
-
    现在我们再用VoiceOver，会得到以下改进：
    
+
    现在我们再用 VoiceOver，会得到以下改进：
    
 
 
      
  
    • 搜索表单在浏览页面时和地标菜单中都作为单独的项目存在。
      • 
- 
    • 因为有 aria-label ，那么读取到这个input 他的内容会被高亮念出。
      • 
+ 
    • 因为有 aria-label ，那么读取到这个 input 他的内容会被高亮念出。
      • 
 
    
 
-
    除此之外，为了让 IE8 等旧版浏览器的用户更容易访问该网站，ARIA 角色的使用就很值得了。 如果由于某种原因，你的网站仅使用<div> 构建，那么你肯定很需要用 ARIA 角色以提供所需的语义！
    
+
    除此之外，为了让 IE8 等旧版浏览器的用户更容易访问该网站，ARIA 角色的使用就很值得了。如果由于某种原因，你的网站仅使用<div> 构建，那么你肯定很需要用 ARIA 角色以提供所需的语义！
    
 
-
    搜索表单的改进语义表明当超出HTML5中可用的语义时 ARIA 可以实现的功能。你接下来可以看到这些语义和ARIA 属性的强大功能，尤其是 非语义控件的可访问性那一段。接下来我们将明白ARIA 如何在进行动态内容更新时给我们帮助。
    
+
    搜索表单的改进语义表明当超出 HTML5 中可用的语义时 ARIA 可以实现的功能。你接下来可以看到这些语义和 ARIA 属性的强大功能，尤其是 非语义控件的可访问性那一段。接下来我们将明白 ARIA 如何在进行动态内容更新时给我们帮助。
    
 
 
    动态内容更新
    
 
-
    使用屏幕阅读器可以轻松访问读取到DOM 中的内容，从文本内容到附加到图像的alt 文本。 所以具有大量文本内容的传统静态网站易于为视碍人士提供信息。
    
+
    使用屏幕阅读器可以轻松访问读取到 DOM 中的内容，从文本内容到附加到图像的 alt 文本。所以具有大量文本内容的传统静态网站易于为视碍人士提供信息。
    
 
-
    问题在于现代Web 应用程序通常不仅仅是静态文本——它们往往有很多动态更新内容，即通过 XMLHttpRequest，Fetch 或DOM API 等机制重新加载整个页面的内容。 这些有时被称为实时区域。
    
+
    问题在于现代 Web 应用程序通常不仅仅是静态文本——它们往往有很多动态更新内容，即通过 XMLHttpRequest，Fetch 或DOM API 等机制重新加载整个页面的内容。这些有时被称为实时区域。
    
 
-
    我们来看一个小例子——  aria-no-live.html (在线demo)。在这个例子我们哟一个小的随机引用块：
    
+
    我们来看一个小例子——  aria-no-live.html (在线 demo)。在这个例子我们哟一个小的随机引用块：
    
 
 
    <section>
   <h1>Random quote</h1>
@@ -206,13 +206,13 @@ 
    动态内容更新
    
   </blockquote>
 </section>
    
 
-
    我们的JavaScript 从 XMLHttpRequest 加载一个JSON 文件里头包含了一系列的名人名言，一旦完成我们就开始用一个 setInterval() 循环以十秒一次的频率显示出来。
    
+
    我们的 JavaScript 从 XMLHttpRequest 加载一个 JSON 文件里头包含了一系列的名人名言，一旦完成我们就开始用一个 setInterval() 循环以十秒一次的频率显示出来。
    
 
 
    var intervalID = window.setInterval(showQuote, 10000);
    
 
-
    这当然是可行的，但是对于无障碍可不友善——这种内容变化是不会被屏幕阅读器察觉到的，所以用户不会发现发生了什么。这是一个简单的例子，但你可以想象一下：如果你开发的一个复杂UI 而且内容频繁变化的应用，例如聊天室，或者一个策略游戏的界面，或者一个实时更新的购物车展示。如果没有某种方式提示用户有内容更新，那就不可能以任何有效的方式来使用应用。
    
+
    这当然是可行的，但是对于无障碍可不友善——这种内容变化是不会被屏幕阅读器察觉到的，所以用户不会发现发生了什么。这是一个简单的例子，但你可以想象一下：如果你开发的一个复杂 UI 而且内容频繁变化的应用，例如聊天室，或者一个策略游戏的界面，或者一个实时更新的购物车展示。如果没有某种方式提示用户有内容更新，那就不可能以任何有效的方式来使用应用。
    
 
-
    幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示 —— aria-live。 将此应用于元素会让屏幕阅读器读出更新的内容。 读取内容的紧急程度取决于属性值：
    
+
    幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示 —— aria-live。将此应用于元素会让屏幕阅读器读出更新的内容。读取内容的紧急程度取决于属性值：
    
 
 
      
  
    • off: 默认值，更新不会提醒。
      • 
@@ -230,17 +230,17 @@ 
      动态内容更新
      
 
      这会让你的屏幕阅读器在更新时可以读取内容。
      
 
 
      
-
      笔记: 当你用file://协议头来发 XMLHttpRequest 大部分浏览器会抛出 security exception 。所以你可能要设置一个web 服务器来作为请求源，例如 用Github: using GitHub，或者设置一个本地服务器 Python's SimpleHTTPServer。
      
+
      笔记: 当你用file://协议头来发 XMLHttpRequest 大部分浏览器会抛出 security exception。所以你可能要设置一个 web 服务器来作为请求源，例如 用 Github: using GitHub，或者设置一个本地服务器 Python's SimpleHTTPServer。
      
 
      
 
-
      这里有一个附加的考虑—— 只读取更新的文本位。如果我们总是读出标题可能会很好，这样用户就可以记住正在读出的内容。为了能做到这个，我们增加了 aria-atomic 给section 。再次更新 <section> ，像这样：
      
+
      这里有一个附加的考虑—— 只读取更新的文本位。如果我们总是读出标题可能会很好，这样用户就可以记住正在读出的内容。为了能做到这个，我们增加了 aria-atomic 给 section。再次更新 <section> ，像这样：
      
 
 
      <section aria-live="assertive" aria-atomic="true">
      
 
 
      这个 aria-atomic="true" 属性告诉屏幕阅读器去读取整个元素的内容作为一个原子单位， 而不是里头某个字符串更新了。
      
 
 
      
-
      笔记: 你可在此完成此例子 aria-live.html (在线demo).
      
+
      笔记: 你可在此完成此例子 aria-live.html (在线 demo).
      
 
      
 
 
      
@@ -249,27 +249,27 @@ 
      动态内容更新
      
 
 
      优化键盘的无障碍操作
      
 
-
      正如上下文中其他几处讨论的，HTML 在可访问性方面的关键优势之一是按钮，表单控件和链接等功能的内置键盘可访问性。 平时你可以使用Tab 键在控件之间移动，使用Enter / Return 键选择或激活控件，偶尔也可以根据需要使用其他控件（例如上下光标在<select> 框中的选项之间移动）。
      
+
      正如上下文中其他几处讨论的，HTML 在可访问性方面的关键优势之一是按钮，表单控件和链接等功能的内置键盘可访问性。平时你可以使用 Tab 键在控件之间移动，使用 Enter / Return 键选择或激活控件，偶尔也可以根据需要使用其他控件（例如上下光标在<select> 框中的选项之间移动）。
      
 
-
      但是在一些时候，你最终还是得编写代码去使用非语义元素作为按钮（或其他类型的控件），或者使用可聚焦控件来达到错误的目的。 您可能正在尝试修复一些您之前的错误代码，或者您可能正在构建某种需要它的复杂小部件。
      
+
      但是在一些时候，你最终还是得编写代码去使用非语义元素作为按钮（或其他类型的控件），或者使用可聚焦控件来达到错误的目的。您可能正在尝试修复一些您之前的错误代码，或者您可能正在构建某种需要它的复杂小部件。
      
 
 
      在让不可聚焦代码可聚焦这一方面，WAI-ARIA 用一些新的值来扩展了tabindex 的属性：
      
 
 
        
- 
      • tabindex="0" — 如上所述， 这个值让不能被tab 的元素变得 tabbable。这是 tabindex 最有用的值。
        • 
- 
      • tabindex="-1" — 这允许通常不可列表的元素以编程方式来接收focus。例如用： JavaScript，或者作为链接的目标。
        • 
+ 
      • tabindex="0" — 如上所述，这个值让不能被 tab 的元素变得 tabbable。这是 tabindex 最有用的值。
        • 
+ 
      • tabindex="-1" — 这允许通常不可列表的元素以编程方式来接收 focus。例如用：JavaScript，或者作为链接的目标。
        • 
 
      
 
-
      我们更详细地讨论了这一点，并在HTML辅助功能文章中显示了一个典型的实现
      
+
      我们更详细地讨论了这一点，并在 HTML 辅助功能文章中显示了一个典型的实现
      
  ——请看 Building keyboard accessibility back in.
      
 
 
      非语义控件的可访问性
      
 
-
      当一系列嵌套的 <div>s 与CSS / JavaScript一起用于创建复杂的UI功能，或者通过JavaScript大大地增强或者更改原生的控件，不仅键盘可访问性受损。而且如果没有语义或其他线索，屏幕阅读器用户会发现很难弄清楚该功能的作用。在这种情况下，ARIA可以帮助提供那些缺失的语义。
      
+
      当一系列嵌套的 <div>s 与 CSS / JavaScript 一起用于创建复杂的 UI 功能，或者通过 JavaScript 大大地增强或者更改原生的控件，不仅键盘可访问性受损。而且如果没有语义或其他线索，屏幕阅读器用户会发现很难弄清楚该功能的作用。在这种情况下，ARIA 可以帮助提供那些缺失的语义。
      
 
 
      表单验证和错误显示
      
 
-
      首先， 让我们在此访问之前的文章（重读 Keeping it unobtrusive）。 在本节的最后，我们展示了当您尝试提交表单时，如果存在验证错误，我们在错误消息框中包含了一些ARIA属性：
      
+
      首先，让我们在此访问之前的文章（重读 Keeping it unobtrusive）。 在本节的最后，我们展示了当您尝试提交表单时，如果存在验证错误，我们在错误消息框中包含了一些 ARIA 属性：
      
 
 
      <div class="errors" role="alert" aria-relevant="all">
   <ul>
@@ -277,7 +277,7 @@ 
      表单验证和错误显示
      
 </div>
      
 
 
        
- 
      • role="alert" 自动将其转变为实时区域，所以它一变化就会念出来。也语义化地说明了这是一个alert 信息（重要的 时间/上下文 敏感信息），而且展现了一种更好，更加易于读取的警告用户的方式（模态警告例如 alert() 的调用会导致一系列的可访问性问题，详情请看Popup Windows ）。
        • 
+ 
      • role="alert" 自动将其转变为实时区域，所以它一变化就会念出来。也语义化地说明了这是一个 alert 信息（重要的 时间/上下文 敏感信息），而且展现了一种更好，更加易于读取的警告用户的方式（模态警告例如 alert() 的调用会导致一系列的可访问性问题，详情请看Popup Windows ）。
        • 
  
      • 一个 aria-relevant 的值为 all 会指示屏幕阅读器在对其进行任何更改时读出错误列表的内容 — 即为错误的增加或者消失。这是很有用的，因为用户需要知道具体哪个错误的出现或者消失，不仅仅是表单错误列表出现了增加或者删除。
        • 
 
      
 
@@ -286,33 +286,33 @@ 
      表单验证和错误显示
      
 
        
  
      1. 首先，复制刚刚的 form-validation.html 还有 validation.js 文件，然后保存到本地。
        2. 
  
      2. 把两个文件都用文本编辑器打开并且看看运作原理。
        3. 
- 
      3. 首先，在<form> 标签的正上方添加一个段落，如下，并用星号标记表单<label>。 这通常是我们为有视力的用户标记必填字段的一个常用手法。
+ 
      4. 首先，在<form> 标签的正上方添加一个段落，如下，并用星号标记表单<label>。这通常是我们为有视力的用户标记必填字段的一个常用手法。
   
        <p>Fields marked with an asterisk (*) are required.</p>
        
  
        5. 
- 
      5. 这对于具备视力的人显而易见，但是对于屏幕阅读器用户而言就不友好了。所幸 WAI-ARIA 提供了 aria-required 属性来让屏幕阅读器获取提示来告诉用户这个input 必须填写，更新你的  <input> 元素如下：
+ 
      6. 这对于具备视力的人显而易见，但是对于屏幕阅读器用户而言就不友好了。所幸 WAI-ARIA 提供了 aria-required 属性来让屏幕阅读器获取提示来告诉用户这个 input 必须填写，更新你的  <input> 元素如下：
   
        <input type="text" name="name" id="name" aria-required="true">
 
 <input type="number" name="age" id="age" aria-required="true">
        
  
        7. 
  
      7. 你过你保存了并且现在用屏幕阅读器测试，你会听到如下内容：「Enter your name star, required, edit text」
        8. 
- 
      8. 回到第二个关于数值范围的讨论，通常我们会用一个tooltips 来展示，或者用placeholder 显示提示信息。 WAI-ARIA 有一个 aria-valuemin 和 aria-valuemax 属性来执行最大最小值，但现阶段看来支持程度并不好。另一个好办法就是用 placeholder 属性，当用户输入的时候，就会念出placeholder 的内容最为信息提示。更新你的数值输入 input 如下：
+ 
      9. 回到第二个关于数值范围的讨论，通常我们会用一个 tooltips 来展示，或者用 placeholder 显示提示信息。 WAI-ARIA 有一个 aria-valuemin 和 aria-valuemax 属性来执行最大最小值，但现阶段看来支持程度并不好。另一个好办法就是用 placeholder 属性，当用户输入的时候，就会念出 placeholder 的内容最为信息提示。更新你的数值输入 input 如下：
   
        <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
        
  
        10. 
 
      
 
 
      
-
      笔记： 你可以在这里看这个在线完成的例子 form-validation-updated.html.
      
+
      笔记：你可以在这里看这个在线完成的例子 form-validation-updated.html.
      
 
      
 
-
      除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。 我们已经讨论过使用 aria-label 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 路牌/地标 （Signposts/Landmarks） 部分）。 还有一些其他标签技术使用其他属性，例如 aria-labelledby ，如果你想将非<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 aria-describedby，如果你想关联 带有表单输入的其他信息，并将其读出。 请查阅文章获得更多细节： WebAIM's Advanced Form Labeling article
      
+
      除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。我们已经讨论过使用 aria-label 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 路牌/地标（Signposts/Landmarks） 部分）。还有一些其他标签技术使用其他属性，例如 aria-labelledby ，如果你想将非<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 aria-describedby，如果你想关联 带有表单输入的其他信息，并将其读出。请查阅文章获得更多细节： WebAIM's Advanced Form Labeling article
      
 
-
      还有许多其他有用的属性和状态，用于指示表单元素的状态。 例如：aria-disabled="true" 可用于表示该表单字段已禁用。 许多浏览器只会跳过禁用的表单字段，它们甚至不会被屏幕阅读器读出，但在某些情况下它们会被识别出来，所以最好包含这个属性让屏幕阅读器知道禁用的输入事实上已经被禁用。
      
+
      还有许多其他有用的属性和状态，用于指示表单元素的状态。例如：aria-disabled="true" 可用于表示该表单字段已禁用。许多浏览器只会跳过禁用的表单字段，它们甚至不会被屏幕阅读器读出，但在某些情况下它们会被识别出来，所以最好包含这个属性让屏幕阅读器知道禁用的输入事实上已经被禁用。
      
 
-
      如果输入的禁用状态可能会改变，那么指示它何时发生以及结果是什么也是一个好主意。 例如，在我们的form-validation-checkbox-disabled.html 这一demo 中 ，有一个复选框，选中后，启用另一个表单输入以允许输入更多信息。 我们已经建立了一个隐藏的实时区域：
      
+
      如果输入的禁用状态可能会改变，那么指示它何时发生以及结果是什么也是一个好主意。例如，在我们的form-validation-checkbox-disabled.html 这一 demo 中，有一个复选框，选中后，启用另一个表单输入以允许输入更多信息。我们已经建立了一个隐藏的实时区域：
      
 
 
      <p class="hidden-alert" aria-live="assertive"></p>
      
 
-
      这是使用绝对定位隐藏的视图。 当选中/取消选中此项时，我们会更新隐藏的实时区域内的文本，以告诉屏幕阅读器用户检查此复选框的结果是什么，以及更新aria-disabled状态和一些可视指示器：
      
+
      这是使用绝对定位隐藏的视图。当选中/取消选中此项时，我们会更新隐藏的实时区域内的文本，以告诉屏幕阅读器用户检查此复选框的结果是什么，以及更新aria-disabled状态和一些可视指示器：
      
 
 
      function toggleMusician(bool) {
   var instruItem = formItems[formItems.length-1];
@@ -330,13 +330,13 @@ 
      表单验证和错误显示
      
   }
 }
      
 
-
      描述非语义的button 是个button
      
+
      描述非语义的 button 是个 button
      
 
-
      在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅HTML辅助功能文章中的UI 控件 ，以及优化键盘的无障碍操作，上面）。 基本上，利用 tabindex 和一些JavaScript的话，大部分情况下添加键盘辅助功能不会有多少麻烦。
      
+
      在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅 HTML 辅助功能文章中的UI 控件 ，以及优化键盘的无障碍操作，上面）。基本上，利用 tabindex 和一些 JavaScript 的话，大部分情况下添加键盘辅助功能不会有多少麻烦。
      
 
-
      但是屏幕阅读器呢？他们还是看着这个元素并不是一个button，如果你用屏幕阅读器测试我们的 fake-div-buttons.html 例子，你会听到一段短语描述这个按钮，内容大概是 "Click me!, group"，显然这会让人疑惑。
      
+
      但是屏幕阅读器呢？他们还是看着这个元素并不是一个 button，如果你用屏幕阅读器测试我们的 fake-div-buttons.html 例子，你会听到一段短语描述这个按钮，内容大概是 "Click me!, group"，显然这会让人疑惑。
      
 
-
      依旧，WAI-ARIA 的角色可以解决一切，复制文件 fake-div-buttons.html，然后加上 role="button" 到每一个button <div>，如下所示
      
+
      依旧，WAI-ARIA 的角色可以解决一切，复制文件 fake-div-buttons.html，然后加上 role="button" 到每一个 button <div>，如下所示
      
 
 
      <div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
      
 
@@ -348,13 +348,13 @@ 
      描述非语义的button 是个bu
 
 
      通过复杂的小部件做引导用户
      
 
-
      还有许多其他  roles 可以将非语义元素结构识别为常见的UI功能，这些功能超出了标准HTML中可用的功能，例如 combobox, slider, tabpanel, tree.。 你可以在 Deque university code library 中看到许多有用的示例，以便了解如何使这些控件做到无障碍的。
      
+
      还有许多其他  roles 可以将非语义元素结构识别为常见的 UI 功能，这些功能超出了标准 HTML 中可用的功能，例如 combobox, slider, tabpanel, tree.。你可以在 Deque university code library 中看到许多有用的示例，以便了解如何使这些控件做到无障碍的。
      
 
-
      让我们来看看我们自己的一个例子。 我们将返回到我们简单的绝对定位选项卡界面（请参阅我们的CSS和JavaScript 无障碍的文章的 Hiding things 段落），你可以在 Tabbed info box example中找到它（源码地址）。
      
+
      让我们来看看我们自己的一个例子。我们将返回到我们简单的绝对定位选项卡界面（请参阅我们的 CSS 和 JavaScript 无障碍的文章的 Hiding things 段落），你可以在 Tabbed info box example中找到它（源码地址）。
      
 
-
      这个例子在键盘可访问性方面运行良好 —— 你可以愉快地在不同选项卡之间进行tab 并选择它们然后显示选项卡内容。 它也是相当容易访问的 —— 你可以滚动浏览内容并使用标题进行导航，即使你无法看到屏幕上发生的事情。 然而，内容并不明显 —— 屏幕阅读器目前将内容报告为链接列表，以及一些内容包含三个标题。 它不会让你知道内容之间的关系。 为用户提供有关内容结构的更多线索总是好的。
      
+
      这个例子在键盘可访问性方面运行良好 —— 你可以愉快地在不同选项卡之间进行 tab 并选择它们然后显示选项卡内容。它也是相当容易访问的 —— 你可以滚动浏览内容并使用标题进行导航，即使你无法看到屏幕上发生的事情。然而，内容并不明显 —— 屏幕阅读器目前将内容报告为链接列表，以及一些内容包含三个标题。它不会让你知道内容之间的关系。为用户提供有关内容结构的更多线索总是好的。
      
 
-
      为了优化它，我们创建了一个新的例子，名为： aria-tabbed-info-box.html (看在线demo). 我们更新了选项卡式界面的结构，如下所示：
      
+
      为了优化它，我们创建了一个新的例子，名为： aria-tabbed-info-box.html (看在线 demo). 我们更新了选项卡式界面的结构，如下所示：
      
 
 
      <ul role="tablist">
   <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
@@ -374,21 +374,21 @@ 
      通过复杂的小部件做引
 </div>
      
 
 
      
-
      笔记：这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡 - 这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许 大小修改/位置变化 一类的feature 更好地工作 —— 当这些被放在链接上时，浏览器始终报告"1 of 1"，而不是"1 of 3 "，"2 of 3"等
      
+
      笔记：这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡 - 这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许 大小修改/位置变化 一类的 feature 更好地工作 —— 当这些被放在链接上时，浏览器始终报告"1 of 1"，而不是"1 of 3 "，"2 of 3"等
      
 
      
 
-
      以下刚刚用上的新特性:
      
+
      以下刚刚用上的新特性：
      
 
 
        
- 
      • 新角色 — tablist, tab, tabpanel — 这些确定几个tab 表界面的重要区域——tabs 的容器，tabs 自身，还有他们的一致性tabpanels。
        • 
- 
      • aria-selected — 定义了tab 当前正在被选中。和tabs 被用户选中不同，这种值一般是由JavaScript 修改。
        • 
- 
      • aria-hidden — 对屏幕阅读器隐藏一些元素，和tabs 被用户选中不同，这种值一般是由JavaScript 修改。
        • 
- 
      • tabindex="0" — 当我们删除链接时，我们需要为列表项提供此属性，以便为其提供键盘焦点。（为没有tabindex 特性的元素也提供tabindex 特性）
        • 
+ 
      • 新角色 — tablist, tab, tabpanel — 这些确定几个 tab 表界面的重要区域——tabs 的容器，tabs 自身，还有他们的一致性 tabpanels。
        • 
+ 
      • aria-selected — 定义了 tab 当前正在被选中。和 tabs 被用户选中不同，这种值一般是由 JavaScript 修改。
        • 
+ 
      • aria-hidden — 对屏幕阅读器隐藏一些元素，和 tabs 被用户选中不同，这种值一般是由 JavaScript 修改。
        • 
+ 
      • tabindex="0" — 当我们删除链接时，我们需要为列表项提供此属性，以便为其提供键盘焦点。（为没有 tabindex 特性的元素也提供 tabindex 特性）
        • 
  
      • aria-setsize — 此属性允许您指定屏幕阅读器元素是某个系列的一部分，以及该系列具有多少项。
        • 
- 
      • aria-posinset — 这个属性允许你设置一个元素在一个系列中的位置，随着 aria-setsize，他告诉屏幕阅读器（用于设置文件目录树视图）足够的信息去告诉你现在在item "1 of 3" 位置等。大部分情况下，浏览器是可以从DOM 层次结构中推断出这些信息，但它肯定有助于提供更多线索。
        • 
+ 
      • aria-posinset — 这个属性允许你设置一个元素在一个系列中的位置，随着 aria-setsize，他告诉屏幕阅读器（用于设置文件目录树视图）足够的信息去告诉你现在在 item "1 of 3" 位置等。大部分情况下，浏览器是可以从 DOM 层次结构中推断出这些信息，但它肯定有助于提供更多线索。
        • 
 
      
 
-
      在我们的测试中，这个新结构确实有助于改善整体情况。 这些选项卡现在被识别为选项卡（例如，屏幕阅读器说出 「选项卡」），所选选项卡由“选择”表示，并使用选项卡名称读出，屏幕阅读器还会告诉你当前所在的选项卡编号。 此外，由于aria-hidden 设置（只有非隐藏的选项卡有 aria-hidden="false" 设置），非隐藏内容是唯一可以向下导航的内容，这意味着所选内容更容易找到。
      
+
      在我们的测试中，这个新结构确实有助于改善整体情况。这些选项卡现在被识别为选项卡（例如，屏幕阅读器说出「选项卡」），所选选项卡由“选择”表示，并使用选项卡名称读出，屏幕阅读器还会告诉你当前所在的选项卡编号。此外，由于aria-hidden 设置（只有非隐藏的选项卡有 aria-hidden="false" 设置），非隐藏内容是唯一可以向下导航的内容，这意味着所选内容更容易找到。
      
 
 
      
 
      笔记：如果你有不想让屏幕阅读器读出来的东西，你可以给它一个 aria-hidden="true"  属性。
      
diff --git a/files/zh-cn/learn/accessibility/what_is_accessibility/index.html b/files/zh-cn/learn/accessibility/what_is_accessibility/index.html
index a92667ba3e203e..32e3b87228abbc 100644
--- a/files/zh-cn/learn/accessibility/what_is_accessibility/index.html
+++ b/files/zh-cn/learn/accessibility/what_is_accessibility/index.html
@@ -26,21 +26,21 @@
 
-   
-   
+   
+   
-   
-   
+   
+   
      
  
   
      预备知识:基本的计算机知识，对HTML和CSS的基本理解。预备知识：基本的计算机知识，对 HTML 和 CSS 的基本理解。
   
      
   
      目标:熟悉可访问性，包括它是什么，以及它对web开发人员的影响。目标：熟悉可访问性，包括它是什么，以及它对 web 开发人员的影响。
   
      
        
 
      
 
-
      什么是可访问性?
      
+
      什么是可访问性？
      
 
 
      可访问性是一种让尽可能多的用户可以使用你的网站的做法。传统上我们认为这只与残疾人士有关，但提升网站的可访问性也可以让其他用户群体受益。比如使用移动设备的人群，那些使用低速网络连接的人群。
      
 
-
      你也可以把可访问性看成是同等地对待每一个人，给他们平等的机会，无论他们的能力或所处的环境如何。就像不能让坐轮椅的人可以进入大楼是错误的(现代公共建筑通常有轮椅坡道或电梯)；不能让视觉有障碍的人士可以浏览我们的网站同样不正确。我们都是不同的，但我们都是人，因此享有同等的人权。
      
+
      你也可以把可访问性看成是同等地对待每一个人，给他们平等的机会，无论他们的能力或所处的环境如何。就像不能让坐轮椅的人可以进入大楼是错误的 (现代公共建筑通常有轮椅坡道或电梯)；不能让视觉有障碍的人士可以浏览我们的网站同样不正确。我们都是不同的，但我们都是人，因此享有同等的人权。
      
 
 
      使网站具备可访问性才是正确的做法。它也是一些国家法律的一部分，它打开了一些重要的市场，否则那些市场的用户无法使用你的服务或者购买你的产品。
      
 
@@ -48,7 +48,7 @@ 
      什么是可访问性?
      
 
 
        
  
      • 
-  
        使用原语HTML(译注：仅使用非样式标记而样式用CSS定义的HTML称为原语HTML。那些描述内容呈现效果的标记如<b>标记是样式标记，这些样式标记在HTML5中已经废弃），不仅提升了可访问性，也增强了搜索引擎优化，使你的网站更容易被找到。
        
+  
        使用原语 HTML(译注：仅使用非样式标记而样式用 CSS 定义的 HTML 称为原语 HTML。那些描述内容呈现效果的标记如<b>标记是样式标记，这些样式标记在 HTML5 中已经废弃），不仅提升了可访问性，也增强了搜索引擎优化，使你的网站更容易被找到。
        
  
        • 
  
      • 
   
        关心可访问性表露出良好的道德品质，它提升了你的公众形象。
        
@@ -57,16 +57,16 @@ 
        什么是可访问性?
        
   
        其他一些改善可访问性的做法也会让你的网站更容易被其他群体使用，比如手机用户，低速网络环境的用户等等。事实上，每个人都可以从这此改善中受益。
        
  
        • 
  
      • 
-  
        我们是否也曾提到过到这也是某些地方的法律规定?
        
+  
        我们是否也曾提到过到这也是某些地方的法律规定？
        
  
        • 
 
      
 
-
      我们应关注的残疾都有哪些种类?
      
+
      我们应关注的残疾都有哪些种类？
      
 
-
      残疾人士和正常人一样是多样化的，他们身患的残疾也多种多样。此处课题的关键是抛开思考你自己的电脑和你自己使用网页的方式，而是要开始了解别人如何使用网页——你不是你的用户。接下来会讲解需要考虑的主要残疾类型，以及他们访问网页内容时用到的一些特殊工具(被称为辅助技术或ATs)。
      
+
      残疾人士和正常人一样是多样化的，他们身患的残疾也多种多样。此处课题的关键是抛开思考你自己的电脑和你自己使用网页的方式，而是要开始了解别人如何使用网页——你不是你的用户。接下来会讲解需要考虑的主要残疾类型，以及他们访问网页内容时用到的一些特殊工具 (被称为辅助技术或 ATs)。
      
 
 
      
-
      注意：世界卫生组织的“残疾和健康”状况说明书指出：“超过10亿人，约占世界总人口的15%，患有某种形式的残疾”，而且“有1.1亿至1.9亿之间的成年人在身体功能上存在重大困难。”
      
+
      注意：世界卫生组织的“残疾和健康”状况说明书指出：“超过 10 亿人，约占世界总人口的 15%，患有某种形式的残疾”，而且“有 1.1 亿至 1.9 亿之间的成年人在身体功能上存在重大困难。”
      
 
      
 
 
      有视觉障碍的人
      
@@ -74,7 +74,7 @@ 
      有视觉障碍的人
      
 
      有视觉障碍的人包括盲人、视力水平低下者、色盲。许多视觉障碍人士使用屏幕放大镜，要么是物理放大镜或是软件缩放功能。现今大多数浏览器和操作系统都具备缩放功能。某些用户使用屏幕阅读器，这是一种可以大声朗读数字文本的软件。一些屏幕阅读器的示例如下：
      
 
 
        
- 
      • 有些是付费产品， 比如 JAWS (Windows) 和 Window Eyes (Windows).
        • 
+ 
      • 有些是付费产品，比如 JAWS (Windows) 和 Window Eyes (Windows).
        • 
  
      • 有些是免费产品， 比如 NVDA (Windows)， ChromeVox (Chrome, Windows 和 Mac OS X)， 和 Orca (Linux).
        • 
  
      • 有些内置在操作系统中，比如 VoiceOver (Mac OS X and iOS)， Narrator (Microsoft Windows)， ChromeVox (on Chrome OS)，和 TalkBack (Android).
        • 
 
      
@@ -83,29 +83,29 @@ 
      有视觉障碍的人
      
 
 
      {{EmbedYouTube("IK97XMibEws")}}
      
 
-
      据统计，世界卫生组织估计“全球有2.85亿人视力受损：3900万人失明，2.46亿人视力低下。”(参见视力障碍和失明)。这是一个庞大而重要的用户群却仅因为你的网站没有合理的设计代码而流失——几乎相当于美国的人口总数。
      
+
      据统计，世界卫生组织估计“全球有 2.85 亿人视力受损：3900 万人失明，2.46 亿人视力低下。”(参见视力障碍和失明)。这是一个庞大而重要的用户群却仅因为你的网站没有合理的设计代码而流失——几乎相当于美国的人口总数。
      
 
 
      有听觉障碍的人
      
 
-
      也被称为有听力障碍的人或聋子，这群人要么听力水平较低要么或者完全听不到。这些人使用辅助技术（请参考 听力、语音、说话或语言障碍患者的辅助设备）， 但是并没有专用于计算机/网页的辅助技术。
      
+
      也被称为有听力障碍的人或聋子，这群人要么听力水平较低要么或者完全听不到。这些人使用辅助技术（请参考 听力、语音、说话或语言障碍患者的辅助设备），但是并没有专用于计算机/网页的辅助技术。
      
 
-
      但是，现在有专门的技术用于将文本转换成音频内容，范围从转换简单的文本文字到转换与视频一起显示的字幕。 稍后，有文章将讨论这些技术。
      
+
      但是，现在有专门的技术用于将文本转换成音频内容，范围从转换简单的文本文字到转换与视频一起显示的字幕。稍后，有文章将讨论这些技术。
      
 
-
      听力受损的人也代表着一个重要的用户群体——“全世界有4.66亿人患有听力障碍”，世界卫生组织的耳聋和听力受损状况报告如此宣称。
      
+
      听力受损的人也代表着一个重要的用户群体——“全世界有 4.66 亿人患有听力障碍”，世界卫生组织的耳聋和听力受损状况报告如此宣称。
      
 
 
      行动障碍的人
      
 
-
      这些人在行动方面存在着残疾，可能是因为纯粹的身体问题（例如肢体丧失或瘫痪），或导致肢体无力或失去控制的神经系统/遗传疾病。 有些人可能难以做出使用鼠标所需的精准手部动作，而另一些人则可能受到的影响更为严重，可能会严重瘫痪到需要使用头部指针与计算机进行交互的地步。
      
+
      这些人在行动方面存在着残疾，可能是因为纯粹的身体问题（例如肢体丧失或瘫痪），或导致肢体无力或失去控制的神经系统/遗传疾病。有些人可能难以做出使用鼠标所需的精准手部动作，而另一些人则可能受到的影响更为严重，可能会严重瘫痪到需要使用头部指针与计算机进行交互的地步。
      
 
 
      这种残疾也可能是由于年老体衰导致，而不是任何特定的创伤或状况造成，也可能是由于硬件限制所致——有些用户可能没有鼠标。
      
 
-
      这些残疾通常影响Web开发工作的方式是要求通过键盘就可以访问控件——我们将在本模块的后续文章中讨论键盘可访问性，但最好是仅通过使用键盘来尝试访问一些网站，看看你能够做些什么。例如，您可以使用Tab键在Web表单的不同控件之间移动吗？ 您可以在我们的“跨浏览器测试使用本机键盘的可访问性”章节中找到有关键盘控制的更多详细信息。
      
+
      这些残疾通常影响 Web 开发工作的方式是要求通过键盘就可以访问控件——我们将在本模块的后续文章中讨论键盘可访问性，但最好是仅通过使用键盘来尝试访问一些网站，看看你能够做些什么。例如，您可以使用 Tab 键在 Web 表单的不同控件之间移动吗？您可以在我们的“跨浏览器测试使用本机键盘的可访问性”章节中找到有关键盘控制的更多详细信息。
      
 
-
      据统计，有相当多的人患有行动障碍症。美国疾病控制与防御中心的“残疾与机能（18岁及以上的非住院成年人）”报道称美国有15.1%的成年人都患有身体功能疾病。
      
+
      据统计，有相当多的人患有行动障碍症。美国疾病控制与防御中心的“残疾与机能（18 岁及以上的非住院成年人）”报道称美国有 15.1% 的成年人都患有身体功能疾病。
      
 
 
      有认知障碍的人
      
 
-
      认知障碍涵盖了一类范围广泛的残疾，从能力最受限的智障人士到随着年龄增长而导致思考和记忆困难的所有人。 该范围包括了患有精神疾病的人，例如抑郁症和精神分裂症患者。 还包括有学习障碍的人，例如阅读障碍患者和有注意力缺陷的多动症患者。 重要的是，尽管认知障碍的临床定义存在很多差异，但与之相关的人们会遇到同一类功能问题。 这类问题包括很难理解页面内容，难以记住如何完成任务，以及因不一致的网页布局而产生困惑。
      
+
      认知障碍涵盖了一类范围广泛的残疾，从能力最受限的智障人士到随着年龄增长而导致思考和记忆困难的所有人。该范围包括了患有精神疾病的人，例如抑郁症和精神分裂症患者。还包括有学习障碍的人，例如阅读障碍患者和有注意力缺陷的多动症患者。重要的是，尽管认知障碍的临床定义存在很多差异，但与之相关的人们会遇到同一类功能问题。这类问题包括很难理解页面内容，难以记住如何完成任务，以及因不一致的网页布局而产生困惑。
      
 
 
      对认识障碍人士来说一个好的可访问性机制包括：
      
 
@@ -124,12 +124,12 @@ 
      有认知障碍的人
      
 
      注意
      
 
 
 
 
      在你的项目中实现可访问性
      
@@ -143,21 +143,21 @@ 
      在你的项目中实现可访问
 
 
      然而如果你能在项目的开始阶段就考虑到可访问性的话，使大多数内容无障碍化的代价就会相当微小。
      
 
-
      在规划项目时，将可访问性测试纳入测试体系，就像对其他任何重要目标受众群体（例如台式机或移动浏览器的目标用户）进行测试一样。 尽早和经常进行测试，理想情况下运行自动化测试找出程序化方式可检测到的缺失功能（例如，缺少图像替代文本或不良链接文字——请参阅元素关系与上下文），并对残疾人士的用户群进行一些测试，以查看更复杂的网站功能是否对他们可用。 例如：
      
+
      在规划项目时，将可访问性测试纳入测试体系，就像对其他任何重要目标受众群体（例如台式机或移动浏览器的目标用户）进行测试一样。尽早和经常进行测试，理想情况下运行自动化测试找出程序化方式可检测到的缺失功能（例如，缺少图像替代文本或不良链接文字——请参阅元素关系与上下文），并对残疾人士的用户群进行一些测试，以查看更复杂的网站功能是否对他们可用。例如：
      
 
 
        
  
      • 我的日期选择器小部件是否可供使用屏幕阅读器的人使用？
        • 
  
      • 如果内容动态更新，视力受损的人知道吗？
        • 
- 
      • 我的UI按钮是否可以使用键盘和触碰界面进行访问？
        • 
+ 
      • 我的 UI 按钮是否可以使用键盘和触碰界面进行访问？
        • 
 
      
 
-
      您可以并且应该在内容中记下潜在的问题区域，这些地方需要进行一些工作才能使其变得可访问，确保对其进行了彻底的测试并考虑解决方案/替代方法。 文本内容（如您将在下一篇文章中看到的）相对容易，但是多媒体内容和时髦的3D图形又如何呢？ 您应该查看项目预算，并考虑可以使用哪些解决方案来实现这类内容的可访问性。 转录所有多媒体内容是一种选择，当然成本可能很高。
      
+
      您可以并且应该在内容中记下潜在的问题区域，这些地方需要进行一些工作才能使其变得可访问，确保对其进行了彻底的测试并考虑解决方案/替代方法。文本内容（如您将在下一篇文章中看到的）相对容易，但是多媒体内容和时髦的 3D 图形又如何呢？您应该查看项目预算，并考虑可以使用哪些解决方案来实现这类内容的可访问性。转录所有多媒体内容是一种选择，当然成本可能很高。
      
 
-
      还有，现实一点。“100%的可访问性”是一个无法实现的理想——你总是会遇到某种边缘情况，导致某个用户发现某些内容难以使用——但你应该尽你所能去做。如果您计划包含一个使用WebGL呈现的时髦三维饼图，您可能希望也包含一个数据表，作为数据的可访问的替代表示。或者，您可能只需要包含表而去除3D饼图——这样每个人都可以访问该表，编写起来也更快，还能减少运行时的CPU耗费，维护也更容易。
      
+
      还有，现实一点。“100% 的可访问性”是一个无法实现的理想——你总是会遇到某种边缘情况，导致某个用户发现某些内容难以使用——但你应该尽你所能去做。如果您计划包含一个使用 WebGL 呈现的时髦三维饼图，您可能希望也包含一个数据表，作为数据的可访问的替代表示。或者，您可能只需要包含表而去除 3D 饼图——这样每个人都可以访问该表，编写起来也更快，还能减少运行时的 CPU 耗费，维护也更容易。
      
 
-
      另一方面，如果您正在一个画廊网站上展示有趣的3D艺术，期望每件艺术品都能被视觉障碍人士完美的访问是不合理的，毕竟它是一种完全的视觉媒体。
      
+
      另一方面，如果您正在一个画廊网站上展示有趣的 3D 艺术，期望每件艺术品都能被视觉障碍人士完美的访问是不合理的，毕竟它是一种完全的视觉媒体。
      
 
-
      为了表明您关心并考虑了可访问性，请在您的网站上发布可访问性声明，其中详细说明您对可访问性的政策以及为使该站点可访问而采取的步骤。 如果有人确实反映您的网站存在可访问性问题，请与他们展开对话，保持同情心，并采取合理的步骤尝试解决问题。
      
+
      为了表明您关心并考虑了可访问性，请在您的网站上发布可访问性声明，其中详细说明您对可访问性的政策以及为使该站点可访问而采取的步骤。如果有人确实反映您的网站存在可访问性问题，请与他们展开对话，保持同情心，并采取合理的步骤尝试解决问题。
      
 
 
      
 
      注意：我们的“处理常见的可访问性问题”一文涵盖了应更详细地测试的可访问性细节。
      
@@ -166,7 +166,7 @@ 
      在你的项目中实现可访问
 
      总结：
      
 
 
        
- 
      • 从项目一开始就考虑可访问性，并尽早进行测试。就像任何其他bug一样，越晚发现可访问性问题，修复它的代价会更高。
        • 
+ 
      • 从项目一开始就考虑可访问性，并尽早进行测试。就像任何其他 bug 一样，越晚发现可访问性问题，修复它的代价会更高。
        • 
  
      • 请记住，许多可访问性的最佳实践对每个人都有好处，而不仅仅局限于残疾人士。例如，原语标记不仅对屏幕阅读器有好处，而且使加载速度和性能也更快，因此对每个人来说都更有益，尤其是那些使用移动设备和/或慢速网络连接环境的人。
        • 
  
      • 在您的站点上发布可访问性声明，并与遇到问题的人接触。
        • 
 
      
@@ -176,19 +176,19 @@ 
      无障碍指南和法律
      
 
      有许多可用于基于可访问性测试的检查列表和指南集，乍一看，这些准则可能会让人望而却步。我们的建议是让自己熟悉你需要注意的基本领域，以及理解与你最相关的指导方针的高层结构。
      
 
 
        
- 
      • 首先，W3C发布了一个庞大而详细的文档，其中包含了非常精确的、与技术无关的可访问性一致性标准。这些被称为Web内容可访问性指南(WCAG)，它们绝不是短读的。这些标准分为四大类，它们指定如何使实现具有可感知性、可操作性、可理解性和鲁棒性。最好的地方得到一个简单的介绍和开始学习是一目了然。没有必要用心学习WCAG——注意主要关注的领域，并使用各种技术和工具来突出任何不符合WCAG标准的区域(更多信息见下文)。
        • 
- 
      • 贵国还可能有具体立法，规定为其人口提供服务的网站必须能够访问-例如，美国“康复法”第508条、德国关于无障碍信息技术的联邦法令、联合王国的“平等法”、意大利的“无障碍法”、澳大利亚的“残疾歧视法”等。
        • 
+ 
      • 首先，W3C 发布了一个庞大而详细的文档，其中包含了非常精确的、与技术无关的可访问性一致性标准。这些被称为 Web 内容可访问性指南 (WCAG)，它们绝不是短读的。这些标准分为四大类，它们指定如何使实现具有可感知性、可操作性、可理解性和鲁棒性。最好的地方得到一个简单的介绍和开始学习是一目了然。没有必要用心学习 WCAG——注意主要关注的领域，并使用各种技术和工具来突出任何不符合 WCAG 标准的区域 (更多信息见下文)。
        • 
+ 
      • 贵国还可能有具体立法，规定为其人口提供服务的网站必须能够访问 - 例如，美国“康复法”第 508 条、德国关于无障碍信息技术的联邦法令、联合王国的“平等法”、意大利的“无障碍法”、澳大利亚的“残疾歧视法”等。
        • 
 
      
 
-
      因此，虽然WCAG是一套指导方针，但您的国家可能会有关于网络可访问性的法律，或者至少是对公众提供的服务的无障碍(包括网站、电视、物理空间等)。找出你的法律是个好主意。如果您不努力检查您的内容是否可访问，您可能会陷入法律的麻烦，如果有二重性的人抱怨它。
      
+
      因此，虽然 WCAG 是一套指导方针，但您的国家可能会有关于网络可访问性的法律，或者至少是对公众提供的服务的无障碍 (包括网站、电视、物理空间等)。找出你的法律是个好主意。如果您不努力检查您的内容是否可访问，您可能会陷入法律的麻烦，如果有二重性的人抱怨它。
      
 
-
      这听起来很严肃，但正如上文所述，您只需要将可访问性视为Web开发实践的主要优先事项。如果有疑问，请咨询合格的律师。我们不会提供比这更多的建议，因为我们不是律师。
      
+
      这听起来很严肃，但正如上文所述，您只需要将可访问性视为 Web 开发实践的主要优先事项。如果有疑问，请咨询合格的律师。我们不会提供比这更多的建议，因为我们不是律师。
      
 
-
      可访问性API
      
+
      可访问性 API
      
 
-
      Web浏览器使用特殊的可访问性API(由底层操作系统提供)，这些API公开对辅助技术(ATS)有用的信息-ATS大多倾向于使用原语信息，因此这些信息不包括样式信息或javascript之类的内容。此信息是在一个称为可访问性树的信息树中构造的。
      
+
      Web 浏览器使用特殊的可访问性 API(由底层操作系统提供)，这些 API 公开对辅助技术 (ATS) 有用的信息-ATS 大多倾向于使用原语信息，因此这些信息不包括样式信息或 javascript 之类的内容。此信息是在一个称为可访问性树的信息树中构造的。
      
 
-
      不同的操作系统有不同的可访问性API：
      
+
      不同的操作系统有不同的可访问性 API：
      
 
 
        
  
      • Windows: MSAA/IAccessible, UIAExpress, IAccessible2
        • 
@@ -202,7 +202,7 @@ 
        可访问性API
        
 
 
        摘要
        
 
-
        本文应该给您提供一个有用的可访问性的高级概述，向您展示为什么它是重要的，并研究如何将它融入您的工作流程。现在，您还应该渴望了解可以使站点可访问的实现细节，我们将在下一节中开始，了解为什么HTML是可访问性的良好基础。
        
+
        本文应该给您提供一个有用的可访问性的高级概述，向您展示为什么它是重要的，并研究如何将它融入您的工作流程。现在，您还应该渴望了解可以使站点可访问的实现细节，我们将在下一节中开始，了解为什么 HTML 是可访问性的良好基础。
        
 
 
        {{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
        
 
diff --git a/files/zh-cn/learn/common_questions/available_text_editors/index.html b/files/zh-cn/learn/common_questions/available_text_editors/index.html
index 6b2d887ef47958..4cd70535a43885 100644
--- a/files/zh-cn/learn/common_questions/available_text_editors/index.html
+++ b/files/zh-cn/learn/common_questions/available_text_editors/index.html
@@ -6,37 +6,37 @@
 ---
 
 
        
-
        在这篇文章中我们强调了关于web开发者安装文本编辑器的一些考虑事项。
        
+
        在这篇文章中我们强调了关于 web 开发者安装文本编辑器的一些考虑事项。
        
 
        
 
 
-   
+   
-   
-   
+   
+   
        
  
   
        前提条件:前提条件：
    你应该已经知晓了  为了建立一个网站所需的各种软件。
   
        
   
        目标:学习作为一个web开发者如何选择一个最适合自己需求的文本编辑器。目标：学习作为一个 web 开发者如何选择一个最适合自己需求的文本编辑器。
   
        
          
 
        
 
 
        概要
        
 
-
        一个网站包括很多文本文件， 所以为了拥有一个有趣的，令人愉快的开发经历你应该明智地选择你的文本编辑器。 
        
+
        一个网站包括很多文本文件，所以为了拥有一个有趣的，令人愉快的开发经历你应该明智地选择你的文本编辑器。 
        
 
-
        可做选择的文本编辑器数量实在是太多了，因为文本编辑器对于计算机科学来说是如此基础（是的，web开发是计算机科学）。按理想来说，你应该尽你可能的尝试足够多的编辑器然后感受出来哪一款适合你的工作流程。但是我们将会给予你一些初学者的建议。
        
+
        可做选择的文本编辑器数量实在是太多了，因为文本编辑器对于计算机科学来说是如此基础（是的，web 开发是计算机科学）。按理想来说，你应该尽你可能的尝试足够多的编辑器然后感受出来哪一款适合你的工作流程。但是我们将会给予你一些初学者的建议。
        
 
 
        以下是一些你应该考虑的基本问题：
        
 
 
          
- 
        • 我想在哪一个操作系统上工作?
          • 
- 
        • 我想使用什么样的技术?
          • 
- 
        • 我希望我的文本编辑器具备哪些基本功能?
          • 
- 
        • 我想为我的文本编辑器添加额外功能吗?
          • 
- 
        • 当使用文本编辑器时我需要支持或者帮助吗?
          • 
- 
        • 对我来说文本编辑器的外观和感觉重要吗?
          • 
+ 
        • 我想在哪一个操作系统上工作？
          • 
+ 
        • 我想使用什么样的技术？
          • 
+ 
        • 我希望我的文本编辑器具备哪些基本功能？
          • 
+ 
        • 我想为我的文本编辑器添加额外功能吗？
          • 
+ 
        • 当使用文本编辑器时我需要支持或者帮助吗？
          • 
+ 
        • 对我来说文本编辑器的外观和感觉重要吗？
          • 
 
        
 
 
        注意我们没有提及价格。显然，这也是要注意的，但一件产品的成本和它的质量或性能几乎没有关系。很大概率下，你能找到一个合适的免费文本编辑器。
        
@@ -161,7 +161,7 @@ 
        概要
        
    免费
    Mac
    常见问题, 论坛
-   PDF指南
+   PDF 指南
    否
   
   
@@ -175,7 +175,7 @@ 
        概要
        
   
   
    Visual Studio Code
-   MIT许可下的开放源码/ 产品的具体许可证
+   MIT 许可下的开放源码/ 产品的具体许可证
    免费
    Windows, Mac, Linux
    常见问题     
@@ -199,21 +199,21 @@ 
        我想在哪个操作系统上
 
 
        当然这是你的选择。然而，一些编辑器只支持特定的操作系统，所以如果你喜欢切换系统，这将会缩小你的选择范围。只要在你的系统上运行了，任何文本编辑器都能 完成工作，但跨平台的编辑器可以轻松的在操作系统间迁移。
        
 
-
        所以首先找出你使用的操作系统，然后检查指定的编辑器是否支持你的操作系统。大多数编辑器在他们的网站上指定了是否支持Windows或Mac，尽管一些编辑器只支持某些版本（比如说只有Windows 7或更高版本而不是Vista）。如果正在运行Ubuntu，最好的方法是在Ubuntu软件中心内进行搜索。当然，一般来说，Linux / UNIX系列是一个相当多元化的地方，其中不同的发行版与不同的不兼容的包装系统配合使用。这意味着，如果你强烈地（而不是微弱的）想使用某些未经编译的文本编辑器，则可能需要下载源码自己编译它。
        
+
        所以首先找出你使用的操作系统，然后检查指定的编辑器是否支持你的操作系统。大多数编辑器在他们的网站上指定了是否支持 Windows 或 Mac，尽管一些编辑器只支持某些版本（比如说只有 Windows 7 或更高版本而不是 Vista）。如果正在运行 Ubuntu，最好的方法是在 Ubuntu 软件中心内进行搜索。当然，一般来说，Linux / UNIX 系列是一个相当多元化的地方，其中不同的发行版与不同的不兼容的包装系统配合使用。这意味着，如果你强烈地（而不是微弱的）想使用某些未经编译的文本编辑器，则可能需要下载源码自己编译它。
        
 
-
        我想使用什么样的技术?
        
+
        我想使用什么样的技术？
        
 
-
        一般来说，任何文本编辑器都可以打开任意文本文件。这对于自己写笔记来说是非常有用的，但是当你使用HTML，CSS和JavaScript进行Web开发和编写时，你将生产出很大的复杂文件。通过选择一个适用你使用的技术的文本编辑器，可以使你更轻松自如。许多文本编辑器可以帮助你实现如下功能
        
+
        一般来说，任何文本编辑器都可以打开任意文本文件。这对于自己写笔记来说是非常有用的，但是当你使用HTML，CSS和JavaScript进行 Web 开发和编写时，你将生产出很大的复杂文件。通过选择一个适用你使用的技术的文本编辑器，可以使你更轻松自如。许多文本编辑器可以帮助你实现如下功能
        
 
 
          
  
        • 代码着色。根据你使用的技术，通过对关键字进行颜色编码，使你的文件更清晰。
          • 
- 
        • 代码完成。通过自动完成循环结构（例如，自动关闭HTML标签或为给定的CSS属性建议有效值）为你节省时间。
          • 
- 
        • 代码段 。正如你在启动一个新的HTML文档时看到的，许多技术一遍又一遍地使用相同的文档结构。通过使用代码段预先填写你的文档，可以节省你重新输入所有这些的麻烦。
          • 
+ 
        • 代码完成。通过自动完成循环结构（例如，自动关闭 HTML 标签或为给定的 CSS 属性建议有效值）为你节省时间。
          • 
+ 
        • 代码段。正如你在启动一个新的 HTML 文档时看到的，许多技术一遍又一遍地使用相同的文档结构。通过使用代码段预先填写你的文档，可以节省你重新输入所有这些的麻烦。
          • 
 
        
 
 
        大多数文本编辑器现在都支持代码着色，但不一定是支持其他两个功能。尤其确保你的文本编辑器会对HTML，CSS和JavaScript进行颜色编码。
        
 
-
        我希望我的文本编辑器具备哪些基本功能?
        
+
        我希望我的文本编辑器具备哪些基本功能？
        
 
 
        这取决于你的需求和计划。以下功能通常是很有帮助的：
        
 
@@ -221,20 +221,20 @@ 
        我希望我的
  
      • 根据正则表达式或其他模式的需要，在一个或多个文档中搜索和替换
        • 
  
      • 快速跳到指定行
        • 
  
      • 分别查看一个大文件的两个部分
        • 
- 
      • 预览HTML在浏览器中的显示情况
        • 
+ 
      • 预览 HTML 在浏览器中的显示情况
        • 
  
      • 一次性选择多处文字
        • 
  
      • 查看项目的文件和目录
        • 
  
      • 使用代码美化程序自动格式化代码
        • 
  
      • 检查拼写
        • 
 
      
 
-
      我想为我的文本编辑器添加额外功能吗?
      
+
      我想为我的文本编辑器添加额外功能吗？
      
 
 
      可扩展的编辑器具有较少的内置功能，但可以根据你的需要进行扩展。
      
 
 
      如果你不确定要使用哪些功能，或者你最喜欢的编辑器缺少这些功能，使用可扩展编辑器吧。最好的编辑器将会提供许多插件，理想的方法是自动查找和安装新的插件。
      
 
-
      如果你喜欢的功能很多 ，并且你的编辑器因为安装的插件而变慢，请尝试使用IDE（集成开发环境）。IDE在一个界面中提供了许多工具，对于初学者来说，这是一个令人望而生畏的工作，但是如果你感觉你的文本编辑器功能有限，这是一个不错的选项。以下是一些流行的IDE：
      
+
      如果你喜欢的功能很多 ，并且你的编辑器因为安装的插件而变慢，请尝试使用 IDE（集成开发环境）。IDE 在一个界面中提供了许多工具，对于初学者来说，这是一个令人望而生畏的工作，但是如果你感觉你的文本编辑器功能有限，这是一个不错的选项。以下是一些流行的 IDE：
      
 
 
 
-
      当使用文本编辑器时我需要支持或者帮助吗?
      
+
      当使用文本编辑器时我需要支持或者帮助吗？
      
 
 
      如果在使用软件时可以获得帮助总是令人高兴的。对于文本编辑器，请检查两种不同类型的支持：
      
 
@@ -256,18 +256,18 @@ 
      当使用文
 
 
      在学习如何使用编辑器时使用书面文档。如果在安装或使用编辑器时遇到了疑难问题，请与其他用户联系。
      
 
-
      对我来说文本编辑器的外观和感觉重要吗?
      
+
      对我来说文本编辑器的外观和感觉重要吗？
      
 
-
      这个问题在于个人品味，但有些人喜欢自定义UI（用户界面）的每一个细节，从颜色到按钮位置。编辑器的灵活性差异很大，所以选择前先检查一下。找到一个可以改变配色方案的文本编辑器并不难，但是如果你想要大量的自定义，你可能最好使用IDE。
      
+
      这个问题在于个人品味，但有些人喜欢自定义 UI（用户界面）的每一个细节，从颜色到按钮位置。编辑器的灵活性差异很大，所以选择前先检查一下。找到一个可以改变配色方案的文本编辑器并不难，但是如果你想要大量的自定义，你可能最好使用 IDE。
      
 
 
      安装并设置
      
 
 
      安装文本编辑器通常很简单。方法根据您的平台而有所不同，但都不难：
      
 
 
        
- 
      • Windows 开发人员会给你一个.exe或.msi文件。也有时候，软件为自带的压缩归档格式.zip，.7z或者.rar，在这种情况下，你需要安装其他程序来提取压缩文件的内容。Windows支持默认情况下.zip。
        • 
- 
      • Mac 在编辑器的网站上，您可以下载一个.dmg文件。您也可以直接在Apple Store找到一些文本编辑器，使安装更简单。
        • 
- 
      • Linux。在最受欢迎的发行版中，您可以从图形包管理器（Ubuntu Software Center，mintInstall，GNOME Software等）开始。你通常可以发现一个预先包装软件的.deb或.rpm文件，但大多数时候你将使用你的发行版系统的存储库服务器，或者在最坏的情况下，从源代码编译编辑器。花时间仔细检查文本编辑器网站上的安装说明。
        • 
+ 
      • Windows 开发人员会给你一个.exe或.msi文件。也有时候，软件为自带的压缩归档格式.zip，.7z或者.rar，在这种情况下，你需要安装其他程序来提取压缩文件的内容。Windows 支持默认情况下.zip。
        • 
+ 
      • Mac 在编辑器的网站上，您可以下载一个.dmg文件。您也可以直接在 Apple Store 找到一些文本编辑器，使安装更简单。
        • 
+ 
      • Linux。在最受欢迎的发行版中，您可以从图形包管理器（Ubuntu Software Center，mintInstall，GNOME Software 等）开始。你通常可以发现一个预先包装软件的.deb或.rpm文件，但大多数时候你将使用你的发行版系统的存储库服务器，或者在最坏的情况下，从源代码编译编辑器。花时间仔细检查文本编辑器网站上的安装说明。
        • 
 
      
 
 
      当您安装新的文本编辑器时，您的操作系统可能会继续使用其默认编辑器打开文本文件，直到您更改文件关联。这些说明将帮助您在指定操作系统中双击打开文件时选定首选编辑器：
      
diff --git a/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
index 3ab3721e533552..5dd05ac3fda567 100644
--- a/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
+++ b/files/zh-cn/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html
@@ -14,7 +14,7 @@
  
   
    前提 :
-   你需要知道怎么上传文件到web服务器。
+   你需要知道怎么上传文件到 web 服务器。
   
   
    目的 :
@@ -23,9 +23,9 @@
  
 
 
-
      所以你已经发布你的网站了对吗 ? 非常棒！ 但是你确定它能够正常运行吗?
      
+
      所以你已经发布你的网站了对吗 ? 非常棒！ 但是你确定它能够正常运行吗？
      
 
-
      远程 web 服务器与本地服务器的运行表现通常有很大差别，因此在你的网站上线之时对它进行测试是个不错的主意。你可能会对为数众多的问题表示惊讶：图片无法显示，页面无法加载或者加载缓慢，等等。大多数时候这个问题不严重，只是一个小小的错误或者你的web主机配置问题。 
      
+
      远程 web 服务器与本地服务器的运行表现通常有很大差别，因此在你的网站上线之时对它进行测试是个不错的主意。你可能会对为数众多的问题表示惊讶：图片无法显示，页面无法加载或者加载缓慢，等等。大多数时候这个问题不严重，只是一个小小的错误或者你的 web 主机配置问题。 
      
 
 
      让我们看下如何诊断并解决那些问题。
      
 
@@ -45,7 +45,7 @@ 
      噢哦，图片去哪里了？Oops, the ‘unicorn’ image is missing
      
 
-
      打开 Firefox 的Network tool (Tools ➤ Web Developer ➤ Network) 并重新加载页面：
      
+
      打开 Firefox 的 Network tool (Tools ➤ Web Developer ➤ Network) 并重新加载页面：
      
 
 
      The image has a 404 error
      
 
@@ -67,7 +67,7 @@ 
      HTTP 状态
      
  
      404: Not found
      
  
      不言自明。我们接下来将会讨论如何解决这个问题。
      
  
      500: Internal server error
      
- 
      服务器出了点问题。比如，也许是服务器端语言 ({{Glossary("PHP")}}, .Net, etc.) 停止工作，或者web服务器本身出现配置问题。通常，最好的方法是诉诸你的托管服务提供商的支持团队。
      
+ 
      服务器出了点问题。比如，也许是服务器端语言 ({{Glossary("PHP")}}, .Net, etc.) 停止工作，或者 web 服务器本身出现配置问题。通常，最好的方法是诉诸你的托管服务提供商的支持团队。
      
  
      503: Service unavailable
      
  
      通常是由于短期的系统过载造成的。服务器有一些问题，稍后重试。
      
 
@@ -75,7 +75,7 @@ 
      HTTP 状态
      
 
        
 
      
 
-
      作为初学者检查我们的 (简易) 网站，我们通常会处理200,304,403和404。
      
+
      作为初学者检查我们的 (简易) 网站，我们通常会处理 200,304,403 和 404。
      
 
 
      修复 404
      
 
@@ -83,22 +83,22 @@ 
      修复 404
      
 
 
      Le list of images in our project
      
 
-
      乍一看，我们请求的图片似乎在正确的位置... 但是网络工具却出现了"404"的报错.。事实证明我们的HTML代码中出现了错别字： unicorn_pics.png 而不是unicorn_pic.png.。所以，通过在你的代码编辑器中改变图片的src 属性来纠正错别字。
      
+
      乍一看，我们请求的图片似乎在正确的位置... 但是网络工具却出现了"404"的报错.。事实证明我们的 HTML 代码中出现了错别字： unicorn_pics.png 而不是unicorn_pic.png.。所以，通过在你的代码编辑器中改变图片的src 属性来纠正错别字。
      
 
 
      Deleting the ‘s’
      
 
-
      保存, 推送到服务器，并在你的浏览器中重现加载网页。
      
+
      保存，推送到服务器，并在你的浏览器中重现加载网页。
      
 
 
      The image loads corectly in the browser
      
 
-
      搞定！ 让我们再看一遍 {{Glossary("HTTP")}} 状态：
      
+
      搞定！让我们再看一遍 {{Glossary("HTTP")}} 状态：
      
 
 
        
  
      •  / 和 unicorn_pic.png 的状态码为200，意味着我们成功加载了页面和图片。
        • 
  
      •  basic.css 的状态码为304，意味着这个文件在上次请求后就没有再变动，因此浏览器可以在其缓存中使用该文件，而不是接收新的副本。
        • 
 
      
 
-
      因此，我们修复了错误并且沿途了解了一些HTTP状态！
      
+
      因此，我们修复了错误并且沿途了解了一些 HTTP 状态！
      
 
 
      频繁的错误
      
 
@@ -106,7 +106,7 @@ 
      频繁的错误
      
 
 
      地址中的错别字
      
 
-
      我们想要输入 http://demozilla.examplehostingprovider.net/ 但输入得太快而遗漏了一个 “l”：
      
+
      我们想要输入 http://demozilla.examplehostingprovider.net/ 但输入得太快而遗漏了一个“l”：
      
 
 
      Address unreachable
      
 
@@ -124,7 +124,7 @@ 
      JavaScript 错误
      
 
 
      A Javascript error is shown in the Console
      
 
-
      在这个例子中，我们清楚（相当清楚）错误所在，可以马上进行修复(我们将在 另一个系列 的文章中提到JavaScript )。
      
+
      在这个例子中，我们清楚（相当清楚）错误所在，可以马上进行修复 (我们将在 另一个系列 的文章中提到 JavaScript )。
      
 
 
      更多需要检查的地方
      
 
@@ -132,7 +132,7 @@ 
      更多需要检查的地方
      
 
 
      性能如何？
      
 
-
      页面加载足够快吗？ 类似 WebPagetest.org 的网站或者类似 YSlow 的浏览器附加组件可以告诉你一些有趣的事情。
      
+
      页面加载足够快吗？类似 WebPagetest.org 的网站或者类似 YSlow 的浏览器附加组件可以告诉你一些有趣的事情。
      
 
 
      Yslow diagnostics
      
 
@@ -153,7 +153,7 @@ 
      服务器响应是否足够快？
      
 
-
      记住一个方便的键盘快捷键：Ctrl+C 。 Ctrl+C 给运行发送了一个 “中断” 信号并令其中止。如果你不中止运行, ping 将会不断地 ping 服务器。
      
+
      记住一个方便的键盘快捷键：Ctrl+C 。 Ctrl+C 给运行发送了一个“中断”信号并令其中止。如果你不中止运行， ping 将会不断地 ping 服务器。
      
 
 
      一份简易清单
      
 
diff --git a/files/zh-cn/learn/common_questions/common_web_layouts/index.md b/files/zh-cn/learn/common_questions/common_web_layouts/index.md
index ec54db1e5e9ef9..e6f0006976a344 100644
--- a/files/zh-cn/learn/common_questions/common_web_layouts/index.md
+++ b/files/zh-cn/learn/common_questions/common_web_layouts/index.md
@@ -1,5 +1,5 @@
 ---
-title: 常见web布局都包含什么？
+title: 常见 web 布局都包含什么？
 slug: Learn/Common_questions/Common_web_layouts
 tags:
   - CSS
diff --git a/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
index e09f4040de875d..636d3ae82f6e59 100644
--- a/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
+++ b/files/zh-cn/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
@@ -1,39 +1,39 @@
 ---
-title: 如何在Google App Engine上托管你的网站?
+title: 如何在 Google App Engine 上托管你的网站？
 slug: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
 translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
 ---
-
      Google App Engine 是一个功能强大的平台，它能让你在谷歌的infrastructure 上构建并运行应用，你可以在这上面：从头构建多层WEB应用，或建立一个静态网站。
      
+
      Google App Engine 是一个功能强大的平台，它能让你在谷歌的 infrastructure 上构建并运行应用，你可以在这上面：从头构建多层 WEB 应用，或建立一个静态网站。
      
 
 
      接下来是手把手入门的教程：
      
 
 
      创建一个谷歌云平台项目
      
 
-
      为了在你自己的网站或者app使用谷歌的工具, 你需要在谷歌云平台上创建一个新项目( a new project )   当然，需要谷歌账号。
      
+
      为了在你自己的网站或者 app 使用谷歌的工具， 你需要在谷歌云平台上创建一个新项目 ( a new project )   当然，需要谷歌账号。
      
 
 
        
  
      1. 打开谷歌云平台控制台（Google Cloud Platform Console），再打开 App Engine dashboard 页面  并点击 Create .
        2. 
- 
      2. 如果从未创建过项目(project)，会提示你是否选择接收邮箱升级，并需要同意团队服务条款才能继续。
        3. 
- 
      3. 键入项目名，并编辑项目ID(请记下你的项目ID) 
        
-  本教程的示例值:
+ 
      4. 如果从未创建过项目 (project)，会提示你是否选择接收邮箱升级，并需要同意团队服务条款才能继续。
        5. 
+ 
      5. 键入项目名，并编辑项目 ID(请记下你的项目 ID) 
        
+  本教程的示例值：
   
          
    
        • Project Name: GAE Sample Site
          • 
    
        • Project ID: gaesamplesite
          • 
   
        
  
        6. 
- 
      6. 点击Create 以创建工程
        7. 
+ 
      7. 点击 Create 以创建工程
        8. 
 
      
 
-
      创建一个应用(application)
      
+
      创建一个应用 (application)
      
 
-
      每个云平台项目都可以包含一个APP引擎应用，所以我们来为自己的项目准备一个app
      
+
      每个云平台项目都可以包含一个 APP 引擎应用，所以我们来为自己的项目准备一个 app
      
 
 
        
- 
      1. 我们需要一个样例应用来发布. 如果你还没有, 请下载 sample app 并解压.
        2. 
+ 
      2. 我们需要一个样例应用来发布. 如果你还没有， 请下载 sample app 并解压。
        3. 
  
      3. 看一下这个样例应用的结构—website文件夹包括你的网站内容，app.yaml文件是你的应用配置文件
   
          
    
        • 你的网站内容必须放在website文件夹下，并且入口文件必须取名为index.html，其他部分可以自行定义。
          • 
-   
        •  app.yaml 文件是一个配置文件，它高速应用引擎怎么映射UR到你的静态文件，你不需要编辑它。
          • 
+   
        •  app.yaml 文件是一个配置文件，它高速应用引擎怎么映射 UR 到你的静态文件，你不需要编辑它。
          • 
   
        
  
        4. 
 
      
@@ -45,18 +45,18 @@ 
      发布你的应用
      
 
        
  
      1. 打开Google Cloud Shell.
        2. 
  
      2. 把 sample-app目录拖拽到代码编辑器左边
        3. 
- 
      3. 在命令行中键入如下命令选择你的项目:
+ 
      4. 在命令行中键入如下命令选择你的项目：
   
        gcloud config set project gaesamplesite
        
  
        5. 
- 
      5. 键入如下命令 进入到 app的 目录:
+ 
      6. 键入如下命令 进入到 app 的 目录：
   
        cd sample-app
        
  
        7. 
- 
      7. 你现在可以部署应用程序，即将应用程序上传到App Engine：
+ 
      8. 你现在可以部署应用程序，即将应用程序上传到 App Engine：
   
        gcloud app deploy
        
  
        9. 
  
      9. 输入一个数字以选择你希望应用程序所在的区域。.
        10. 
- 
      10. 键入 Y 确认.
        11. 
- 
      11. 现在你可以在浏览器中访问你的站点了，比如对于项目ID 是gaesamplesite的网站, go输入 gaesamplesite.appspot.com访问。
        12. 
+ 
      12. 键入 Y 确认。
        13. 
+ 
      13. 现在你可以在浏览器中访问你的站点了，比如对于项目 ID 是gaesamplesite 的网站, go 输入 gaesamplesite.appspot.com访问。
        14. 
 
      
 
 
      更多信息
      
diff --git a/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html
index 6c683bf763b5a4..fbceec41dd45a8 100644
--- a/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html
+++ b/files/zh-cn/learn/common_questions/how_does_the_internet_work/index.html
@@ -5,18 +5,18 @@
 original_slug: learn/How_the_Internet_works
 ---
 
      
-
       这篇文章讨论什么是互联网以及它是如何工作的.
      
+
       这篇文章讨论什么是互联网以及它是如何工作的。
      
 
      
 
 
-   
+   
-   
-   
+   
+   
      
  
   
      前提:前提：
    无，但是鼓励先去阅读 关于设定项目目标的文章
   
      
   
      目标:你将会学习到网络的基础技术，以及它与互联网的区别.目标：你将会学习到网络的基础技术，以及它与互联网的区别。
   
      
        
 
      
@@ -25,31 +25,31 @@ 
      概述
      
 
 
      互联网是网络的支柱，以这种技术为基础使网络成为可能。作为基础，互联网是把电脑互相连接起来的一个巨大网络。
      
 
-
      互联网的历史有些模糊不清。它始于1960年美国军方资助的研究项目。1980年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。
      
+
      互联网的历史有些模糊不清。它始于 1960 年美国军方资助的研究项目。1980 年在许多公共大学和公司的支持下，它演变为一种公共基础设施。随着时间的变化，各种各样的技术支持着互联网的发展，但是它的工作方式却没有改变多少：互联网确保所有的电脑之间的连接，无论发生什么他们依旧保持连接。
      
 
 
      自主学习
      
 
 
 
 
      深入探索
      
 
 
      一个简单的网络
      
 
-
      当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式(通常是网线) 还是无线方式（比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。
      
+
      当两台电脑需要通信的时候，你必须要连接他们，无论通过有线方式 (通常是网线) 还是无线方式（比如 WiFi 或 蓝牙 )。所有现代电脑都支持这些连接。
      
 
 
      
-
      提示: 接下来的内容，我们将只谈论有线连接， 而无线连接的原理与此相同。
      
+
      提示： 接下来的内容，我们将只谈论有线连接， 而无线连接的原理与此相同。
      
 
      
 
 
      Two computers linked together
      
 
-
      通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要45条网线。
      
+
      通常一个网络不仅限于两台电脑。你可以尽你所想地连接电脑，但是情况立刻变得复杂了。如果你尝试连接，比如说十台电脑，每台电脑有九个插头，总共需要 45 条网线。
      
 
 
      Ten computers all together
      
 
-
      为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（router）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑B，电脑A必须把信息发送给路由器，路由器将收到的信息转发给电脑B，并且确保信息不会发送给电脑C。
      
+
      为了解决这个问题，网络上的每台电脑需要链接到一个叫做路由器（router）的特殊小电脑。路由器只干一件事：就像火车站的信号员，它要确保从一台电脑上发出的一条信息可以到达正确的电脑。为了把信息发送给电脑 B，电脑 A 必须把信息发送给路由器，路由器将收到的信息转发给电脑 B，并且确保信息不会发送给电脑 C。
      
 
 
      一旦我们把路由器加入到这个系统，我们的网络中便只需要十条网线：每台电脑一个插口，路由器上十个插口。
      
 
@@ -57,31 +57,31 @@ 
      一个简单的网络
      
 
 
      网络中的网
      
 
-
      到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢? 当然一台路由器覆盖不了这么远, 但是,如果你阅读得比较认真，我们曾提到路由器像其他电脑一样,所以我们为什么不把两个路由器彼此连接呢?
      
+
      到目前为止一切都很好 . 但是我们要连接成百上千，上亿台电脑呢？当然一台路由器覆盖不了这么远，但是，如果你阅读得比较认真，我们曾提到路由器像其他电脑一样，所以我们为什么不把两个路由器彼此连接呢？
      
 
 
      Two routers linked together
      
 
-
      我们把电脑连接路由器, 接着路由器连接路由器,我们就会有无穷的规模。
      
+
      我们把电脑连接路由器，接着路由器连接路由器，我们就会有无穷的规模。
      
 
 
      Routers linked to routers
      
 
-
      这样网络越来越接近我们所说的互联网 ，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其它地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（modem），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。
      
+
      这样网络越来越接近我们所说的互联网，但是我们遗漏了一些东西。我们建立网络是为了我们自己的目的。所以不同的人会建立不同的网络：你的朋友，你的邻居，每个人都可以拥有自己的计算机网络。在你的房子和世界其它地方之间架设电缆将这些不同的网络连接起来是不可能的，那么你该如何处理这件事呢？其实已经有电缆连接到你的房子了，比如，电线和电话。电话基础设施已经可以把你家连接到世界的任何角落，所以它就是我们需要的线。为了连接电话这种网络我们需要一种基础设备叫做调制解调器（modem），调制解调器可以把网络信息变成电话设施可以处理的信息，反之亦然。
      
 
 
      A router linked to a modem
      
 
-
      这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP是一家可以管理一些特殊的路由器的公司，这些路由器连接其他ISP的路由器. 你的网络消息可以被ISP捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。
      
+
      这样，我们可以通过电话基础设施相互连接。下一步是把信息从我们的网络发送到我们想要到达的地方。为了做这些，我们需要把我们的网络连接到互联网服务提供商（ISP）。ISP 是一家可以管理一些特殊的路由器的公司，这些路由器连接其他 ISP 的路由器。你的网络消息可以被 ISP 捕获并发送到相应的网络。互联网就是由这些所有的网络设施所组成。
      
 
 
      Full Internet stack
      
 
 
      寻找电脑
      
 
-
      如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：192.168.2.10。
      
+
      如果你想给一台电脑发送一条信息，你必须指明它是哪台电脑。因此，任何连接到网络中的电脑都需要有一个唯一的地址来标记它，叫做 "IP 地址" （IP 代表网络协议）。这个地址由四部分被点分隔的数字序列组成，比如：192.168.2.10。
      
 
-
      对于电脑这样已经很好了,但是人类却很难记忆这一串地址。为了简单处理，我们给IP地址取一个容易阅读的别名：域名。比如，google.com 被用于IP地址 172.217.7.14。这样我们通过这些域名可以很容易的通过网络连接到电脑.
      
+
      对于电脑这样已经很好了，但是人类却很难记忆这一串地址。为了简单处理，我们给 IP 地址取一个容易阅读的别名：域名。比如，google.com 被用于 IP 地址 172.217.7.14。这样我们通过这些域名可以很容易的通过网络连接到电脑。
      
 
 
      互联网（Internet）和网络（web）
      
 
-
      你可能注意到了, 当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（Web servers））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和{{Glossary("IRC")}}.
      
+
      你可能注意到了，当我们通过浏览器上网的时候，我们通常是用域名去到达一个网站。这是否意味着互联网（Internet）和网络（Web）是一样的？事实并非这么简单。正如向我们所见，互联网是一种基础的技术，它允许我们把成千上万的电脑连接在一起。在这些电脑中，有 一些电脑（我们称之为网络服务器（Web servers））可以发送一些浏览器可以理解的信息。互联网是基础设施，网络是建立在这种基础设施之上的服务。值得注意的是，一些其他服务运行在互联网之上，比如邮箱和{{Glossary("IRC")}}.
      
 
 
      下一步
      
 
diff --git a/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html b/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html
index 59224bf91ad62e..2ac062bd90474e 100644
--- a/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html
+++ b/files/zh-cn/learn/common_questions/how_much_does_it_cost/index.html
@@ -12,7 +12,7 @@
   
    准备工作：
    
-    
      你已经了解你需要什么软件，以及网页、网站等术语之间的差异， 以及域名是什么 。
      
+    
      你已经了解你需要什么软件，以及网页、网站等术语之间的差异，以及域名是什么 。
      
    
   
   
@@ -24,7 +24,7 @@
 
 
      概要
      
 
-
      经营一个网站可以一毛不拔，也可以倾家荡产。 本文中我们将讨论各种事项的花费，以及如何将钱花得物有所值（或者白嫖）。
      
+
      经营一个网站可以一毛不拔，也可以倾家荡产。本文中我们将讨论各种事项的花费，以及如何将钱花得物有所值（或者白嫖）。
      
 
 
      软件
      
 
@@ -34,64 +34,64 @@ 
      文本编辑器
      
 
 
      有很多免费的编辑器，例如 Atom、Brackets、Bluefish、TextWrangler、Eclipse、Netbeans 和 Visual Studio Code。Sublime Text 之类的编辑器可以无限制试用，但最好还是付费购买。PhpStorm 之类的编辑器则需花费几十至两百美元不等，取决于你购买的种类。Microsoft Visual Studio 之类的编辑器则可能需要花费数百至数千美元，不过 Visual Studio Express 对独立开发者和开源项目免费。付费编辑器通常都有试用版。
      
 
-
      开始学习时，我们建议你尝试几个不同的编辑器，找到最适合自己的。 如果你只写简单的 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("Javascript")}}，就挑个简易的编辑器。
      
+
      开始学习时，我们建议你尝试几个不同的编辑器，找到最适合自己的。如果你只写简单的 {{Glossary("HTML")}}、{{Glossary("CSS")}} 和 {{Glossary("Javascript")}}，就挑个简易的编辑器。
      
 
 
      价格并不一定能体现编辑器的品质和实用程度。试过才知道满不满足需求。比如说 Sublime Text 很便宜，但有很多免费插件可供极大程度的扩展功能。
      
 
 
      图像编辑器
      
 
-
      你的系统可能已经自带了一个简单的图像编辑器或者图像浏览器（Windows上的画图，Ubuntu上的 Eye of Gnome, Mac上的Preview）。但是这些程序功能都很有限然后很快，你就会需要一个更强大的编辑器来添加图层，效果和分组。
      
+
      你的系统可能已经自带了一个简单的图像编辑器或者图像浏览器（Windows 上的画图，Ubuntu 上的 Eye of Gnome, Mac 上的 Preview）。但是这些程序功能都很有限然后很快，你就会需要一个更强大的编辑器来添加图层，效果和分组。
      
 
-
      编辑器的价格可以是免费的（GIMP），还有中等价位（PaintShop Pro，少于100美元）或几百美元（Adobe Photoshop）。
      
+
      编辑器的价格可以是免费的（GIMP），还有中等价位（PaintShop Pro，少于 100 美元）或几百美元（Adobe Photoshop）。
      
 
-
      你可以使用其中的任何一款。 它们都具有大致相同的功能（尽管其中一些功能非常完整，你可能永远不会使用所提供的每个功能)。无论如何，如果在某些时候你需要与其他设计师交流正在进行的项目，那么你应该首先了解他们正在使用的工具。编辑器可以将完成的项目导出为标准文件格式，但每个编辑器都可以按照专门的项目格式保存正在进行的项目。
      
+
      你可以使用其中的任何一款。它们都具有大致相同的功能（尽管其中一些功能非常完整，你可能永远不会使用所提供的每个功能)。无论如何，如果在某些时候你需要与其他设计师交流正在进行的项目，那么你应该首先了解他们正在使用的工具。编辑器可以将完成的项目导出为标准文件格式，但每个编辑器都可以按照专门的项目格式保存正在进行的项目。
      
 
 
      媒体编辑器
      
 
-
      如果你想在你的网站中添加音频或者视频，那么您可以嵌入在线服务（例如YouTube，Vimeo或Dailymotion）或包含您自己的视频（请参阅下面的带宽费用)。
      
+
      如果你想在你的网站中添加音频或者视频，那么您可以嵌入在线服务（例如 YouTube，Vimeo 或 Dailymotion）或包含您自己的视频（请参阅下面的带宽费用)。
      
 
-
      对于音频文件，你可以找到免费软件（Audacity，Wavosaur）或支付高达几百美元（Sony Sound Forge，Adobe Audition）。视频编辑软件同样可以免费使用（PiTiVi，OpenShot for Linux，iMovie for Mac），少于100美元（Adobe Premiere Elements）或几百美元（Adobe Premiere Pro，Avid Media Composer，Final Cut Pro）。 你使用数码相机购买的软件可能已经涵盖了你的所有需求。
      
+
      对于音频文件，你可以找到免费软件（Audacity，Wavosaur）或支付高达几百美元（Sony Sound Forge，Adobe Audition）。视频编辑软件同样可以免费使用（PiTiVi，OpenShot for Linux，iMovie for Mac），少于 100 美元（Adobe Premiere Elements）或几百美元（Adobe Premiere Pro，Avid Media Composer，Final Cut Pro）。你使用数码相机购买的软件可能已经涵盖了你的所有需求。
      
 
 
      发布工具
      
 
-
      你还需要一种将文件从本地硬盘上传到远程Web服务器的方法。 为了做到这一点，你必须使用FTP客户端。
      
+
      你还需要一种将文件从本地硬盘上传到远程 Web 服务器的方法。为了做到这一点，你必须使用 FTP 客户端。
      
 
-
      每个系统都包含一个FTP客户端作为文件管理器的一部分。 Windows资源管理器，Nautilus（一个常见的Linux文件管理器）和Mac Finder都包含该功能。 然而，人们更经常选择专门的FTP客户端，可以存储密码并且并行显示本地和远程目录。
      
+
      每个系统都包含一个 FTP 客户端作为文件管理器的一部分。Windows 资源管理器，Nautilus（一个常见的 Linux 文件管理器）和 Mac Finder 都包含该功能。然而，人们更经常选择专门的 FTP 客户端，可以存储密码并且并行显示本地和远程目录。
      
 
-
      如果你需要安装一个FTP客户端，这里有很多免费的选择：例如， 可以全平台使用的 FileZilla , windows上使用的WinSCP , Mac和 windows上都能使用的 Cyberduck ，还有很多)。
      
+
      如果你需要安装一个 FTP 客户端，这里有很多免费的选择：例如，可以全平台使用的 FileZilla , windows 上使用的WinSCP , Mac 和 windows 上都能使用的 Cyberduck ，还有很多)。
      
 
 
      
-
      注意：还有其他方法可以在远程服务器上发布内容，如rsync和git，但并不像FTP那样简单，我们不会在这里讨论。
      
+
      注意：还有其他方法可以在远程服务器上发布内容，如 rsync 和 git，但并不像 FTP 那样简单，我们不会在这里讨论。
      
 
      
 
 
      浏览器
      
 
-
      你已经拥有了一个浏览器或者可以免费下载一个。如果需要的话， 在这下载火狐浏览器或者 Google Chrome浏览器。
      
+
      你已经拥有了一个浏览器或者可以免费下载一个。如果需要的话，在这下载火狐浏览器或者 Google Chrome 浏览器。
      
 
 
      网络访问
      
 
 
      电脑 / 调制解调器
      
 
-
      你需要一台电脑。费用根据你的预算和你住的地方而有很大的不同。 要发布准系统网站，你只需要一台能够启动编辑器和浏览器的基本计算机，因此整个的价格相当低。
      
+
      你需要一台电脑。费用根据你的预算和你住的地方而有很大的不同。要发布准系统网站，你只需要一台能够启动编辑器和浏览器的基本计算机，因此整个的价格相当低。
      
 
 
      如果你要做更深入的设计，编辑图像，或是生产音频和视频文件，当然需要更高级的电脑。
      
 
-
      你要上传内容到远程服务器上（见下面的hosting），所以你需要一个调制解调器。更多时候你的网络服务提供商以每个月一些钱出租互联网连接给你。
      
+
      你要上传内容到远程服务器上（见下面的 hosting），所以你需要一个调制解调器。更多时候你的网络服务提供商以每个月一些钱出租互联网连接给你。
      
 
 
      互联网提供商连接
      
 
 
      确保你有足够的带宽
      
 
 
        
- 
      • 低带宽连接或许能够支持一个“简单的”网站（合理大小的图像，文本，一些层叠样式表CSS和JavaScript）。这些将会花费数十美元，包括租赁调制解调器。
        • 
- 
      • 另一方面，你可能需要更高级的数字用户线路，电缆，光纤通道如果你想要一个带有数以百计文件的大型网站或者你想要从ide网页服务器传输大量的音/视频。这可能花费的和低带宽连接一样，或者每个月几百美元用以专业使用。
        • 
+ 
      • 低带宽连接或许能够支持一个“简单的”网站（合理大小的图像，文本，一些层叠样式表 CSS 和 JavaScript）。这些将会花费数十美元，包括租赁调制解调器。
        • 
+ 
      • 另一方面，你可能需要更高级的数字用户线路，电缆，光纤通道如果你想要一个带有数以百计文件的大型网站或者你想要从 ide 网页服务器传输大量的音/视频。这可能花费的和低带宽连接一样，或者每个月几百美元用以专业使用。
        • 
 
      
 
 
      主机
      
 
 
      理解带宽
      
 
-
      主机供应商通过你网站消耗的带宽来收费。这些取决于在一个给定的时间内多少人或机器人访问你的内容、你的内容占用多少的服务空间（这就解释了为什么人们通常把他们的视频存储在比如Youtube、Dailymotion和Vimeo等专用服务上）。实际上，你的供应商可能 有个计划规定某个实例每天至多有几千访问的可用带宽用量（不同的主机供应商的规定通常都不同）。根据经验，考虑那些月付十到五十美元的个人主机。
      
+
      主机供应商通过你网站消耗的带宽来收费。这些取决于在一个给定的时间内多少人或机器人访问你的内容、你的内容占用多少的服务空间（这就解释了为什么人们通常把他们的视频存储在比如 Youtube、Dailymotion 和 Vimeo 等专用服务上）。实际上，你的供应商可能 有个计划规定某个实例每天至多有几千访问的可用带宽用量（不同的主机供应商的规定通常都不同）。根据经验，考虑那些月付十到五十美元的个人主机。
      
 
 
      
 
      注意：从来没有“无限”带宽这样的东西。如果你真的需要消耗大量的带宽，等着付一大把的票子吧。
      
@@ -99,7 +99,7 @@ 
      理解带宽
      
 
 
      域名
      
 
-
      您的域名必须由域名提供商（注册商）购买。 您的托管服务提供商也可能是注册服务商（1＆1，例如 甘地 同时是注册商和托管服务提供商）。 域名通常每年花费5-15美元。 费用取决于：
      
+
      您的域名必须由域名提供商（注册商）购买。您的托管服务提供商也可能是注册服务商（1＆1，例如 甘地 同时是注册商和托管服务提供商）。域名通常每年花费 5-15 美元。费用取决于：
      
 
 
        
  
      • 地方合同（一些国家顶级域名的成本非常高，因为不同的国家设定了不同的价格）
        • 
@@ -108,16 +108,16 @@ 
        域名
        
 
 
        自己动手托管与“打包”托管
        
 
-
        当你想发布一个网站时，你可以自己做所有事情：建立一个数据库（如果需要的话），建立一个内容管理系统或{{Glossary("CMS")}}（如 Wordpress ，  Dotclear ，spip ， 等等），上传预制的模板或你自己的模板。
        
+
        当你想发布一个网站时，你可以自己做所有事情：建立一个数据库（如果需要的话），建立一个内容管理系统或{{Glossary("CMS")}}（如 Wordpress ，  Dotclear ，spip ，等等），上传预制的模板或你自己的模板。
        
 
-
        您还可以依赖您的托管服务提供商已设置的环境，通常每月支付十美元至十五美元的费用，或者直接通过预先打包的CMS（例如 Wordpress ，Tumblr，Blogger ）直接订阅专用托管服务。 在后一种情况下，您不需要支付任何费用，但是您对模板的控制可能较少。
        
+
        您还可以依赖您的托管服务提供商已设置的环境，通常每月支付十美元至十五美元的费用，或者直接通过预先打包的 CMS（例如 Wordpress ，Tumblr，Blogger ）直接订阅专用托管服务。在后一种情况下，您不需要支付任何费用，但是您对模板的控制可能较少。
        
 
 
        免费托管与付费托管对比
        
 
 
        您可能会问，为什么在有这么多免费服务时，我还应该去支付我的托管费用？
        
 
 
          
- 
        1. 当你付费，你有更多的自由。 你的网站是你的，你可以从一个主机提供商无缝迁移到下一个。
          2. 
+ 
        2. 当你付费，你有更多的自由。你的网站是你的，你可以从一个主机提供商无缝迁移到下一个。
          3. 
  
        3. 免费托管服务提供商可能会将您的内容广告添加到您的内容中，而不受您的控制
          4. 
 
        
 
@@ -130,11 +130,11 @@ 
        专业网站机构和托管
        
 
        这里的成本取决于多种因素，例如：
        
 
 
          
- 
        • 这是一个有几页文字的简单网站吗？ 还是一个复杂的，长达千页的网站？
          • 
- 
        • 你想定期更新吗？ 或者它将成为一个静态网站？
          • 
- 
        • 网站必须连接到公司的IT部门以收集内容（比如内部数据）吗？
          • 
+ 
        • 这是一个有几页文字的简单网站吗？还是一个复杂的，长达千页的网站？
          • 
+ 
        • 你想定期更新吗？或者它将成为一个静态网站？
          • 
+ 
        • 网站必须连接到公司的 IT 部门以收集内容（比如内部数据）吗？
          • 
  
        • 你是否想要一些在当下的闪亮的新功能？ （例如：在撰写本文时，页面客户端具有复杂视差）
          • 
- 
        • 您是否需要该机构来考虑用户信息或解决复杂的{{Glossary("UX")}}问题（例如，创建一个吸引用户的策略或者进行一些A 或 B测试以在几个想法中选择最佳解决方案）？
          • 
+ 
        • 您是否需要该机构来考虑用户信息或解决复杂的{{Glossary("UX")}}问题（例如，创建一个吸引用户的策略或者进行一些 A 或 B 测试以在几个想法中选择最佳解决方案）？
          • 
 
        
 
 
        另外，为了托管的目的，
        
diff --git a/files/zh-cn/learn/common_questions/index.html b/files/zh-cn/learn/common_questions/index.html
index 40dae8fb2d6e8e..03f13e25c1345d 100644
--- a/files/zh-cn/learn/common_questions/index.html
+++ b/files/zh-cn/learn/common_questions/index.html
@@ -11,23 +11,23 @@
 ---
 
        学习区域的这一部分旨在为可能出现的常见问题提供答案，这些问题不一定是结构化的核心学习途径的一部分 (例如：HTML 或 CSS 的学习文章。) 这些文章旨在自己工作。
        
 
-
        Web怎样工作
        
+
        Web 怎样工作
        
 
-
        本部分涵盖Web机制 - 与Web生态系统的一般知识及其工作原理相关的问题。
        
+
        本部分涵盖 Web 机制 - 与 Web 生态系统的一般知识及其工作原理相关的问题。
        
 
 
        
  
        
  
        互联网是怎么工作的？
        
  
        
- 
        互联网是Web的基石，是让Web变得可能的基础设施。本质上来说，互联网是一个大型的相互交流的计算机网络。本文讨论了它在底层是如何工作的。
        
+ 
        互联网是 Web 的基石，是让 Web 变得可能的基础设施。本质上来说，互联网是一个大型的相互交流的计算机网络。本文讨论了它在底层是如何工作的。
        
  
        
  
        网页，网站，网络服务器和搜索引擎的区别是什么？
        
  
        
- 
        本文中我们讲述了各种和Web相关的概念：网页，网站，网络服务器，以及搜索引擎。这些概念常常被网络新手混淆，或者被误用。让我们看看它们到底代指的是什么吧！
        
+ 
        本文中我们讲述了各种和 Web 相关的概念：网页，网站，网络服务器，以及搜索引擎。这些概念常常被网络新手混淆，或者被误用。让我们看看它们到底代指的是什么吧！
        
  
        
- 
        什么是URL？
        
+ 
        什么是 URL？
        
  
        
- 
        利用 {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL 网络上的关键概念之一。 它现在是 {{Glossary("Browser","browsers")}} 用来在网络上检索任何已经发布的资源的主要机制。
        
+ 
        利用 {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL 网络上的关键概念之一。它现在是 {{Glossary("Browser","browsers")}} 用来在网络上检索任何已经发布的资源的主要机制。
        
  
        
  
        什么是域名？
        
  
        
@@ -35,7 +35,7 @@ 
        什么是网络服务器？
        
  
- 
        术语“Web服务器”可以指在Web上向客户端提供网站的硬件或软件，或者两者一起工作。在本文中，我们将讨论Web服务器如何工作，以及为什么它们是重要的。
        
+ 
        术语“Web 服务器”可以指在 Web 上向客户端提供网站的硬件或软件，或者两者一起工作。在本文中，我们将讨论 Web 服务器如何工作，以及为什么它们是重要的。
        
  
        
  
        什么是超链接？
        
  
        
@@ -52,21 +52,21 @@ 
        你需要什么软件用来造一个网站?
        
+ 
        你需要什么软件用来造一个网站？
        
  
  
        在本文中，我们将解释在编辑，上传或查看网站时需要使用哪些软件组件。
        
  
        
- 
        什么文本编辑器比较好用?
        
+ 
        什么文本编辑器比较好用？
        
  
        
- 
        在本文中，我们重点介绍在选择和安装用于Web开发的文本编辑器时需要考虑的一些事项。
        
+ 
        在本文中，我们重点介绍在选择和安装用于 Web 开发的文本编辑器时需要考虑的一些事项。
        
  
        
- 
        怎么搭建一个基础的开发环境?
        
+ 
        怎么搭建一个基础的开发环境？
        
  
        
- 
        当在一个web项目上工作时，你需要在本地测试它，然后再显示给世界。一些类型的代码需要一个服务器来测试， 在本文中，我们将向您介绍如何设置。我们还将介绍如何将可扩展的结构放置到位，这样即使您的项目变大，您的文件仍然保持有序。
        
+ 
        当在一个 web 项目上工作时，你需要在本地测试它，然后再显示给世界。一些类型的代码需要一个服务器来测试，在本文中，我们将向您介绍如何设置。我们还将介绍如何将可扩展的结构放置到位，这样即使您的项目变大，您的文件仍然保持有序。
        
  
        
  
        什么是浏览器开发者工具？
        
  
        
- 
        每个浏览器都有一组devtools，用于调试HTML，CSS和其他Web代码。本文解释如何使用浏览器的devtools的基本功能。
        
+ 
        每个浏览器都有一组 devtools，用于调试 HTML，CSS 和其他 Web 代码。本文解释如何使用浏览器的 devtools 的基本功能。
        
  
        
  
         你怎么来确保你的网站顺利的运行？
        
  
        
@@ -74,19 +74,19 @@ 
        怎么上传文件们到服务器？
        
  
- 
        本文介绍如何使用FTP工具在线发布您的网站 - 这是一种使网站上线的最常见方法，以便其他人可以通过计算机访问网站。
        
+ 
        本文介绍如何使用 FTP 工具在线发布您的网站 - 这是一种使网站上线的最常见方法，以便其他人可以通过计算机访问网站。
        
  
        
  
        怎么使用 GitHub Pages?
        
  
        
- 
        本文提供了使用GitHub的gh-pages功能发布内容的基本指南。
        
+ 
        本文提供了使用 GitHub 的 gh-pages 功能发布内容的基本指南。
        
  
        
- 
        如何在Google App Engine上托管你的网站?
        
+ 
        如何在 Google App Engine 上托管你的网站？
        
  
        
- 
        寻找一个托管您的网站的地方？以下是在Google App Engine上托管您的网站的分步指南。
        
+ 
        寻找一个托管您的网站的地方？以下是在 Google App Engine 上托管您的网站的分步指南。
        
  
        
- 
        有哪些工具可用于调试和提高网站性能?
        
+ 
        有哪些工具可用于调试和提高网站性能？
        
  
        
- 
        这组文章向您展示了如何使用Firefox中的开发工具来调试和提高网站性能，使用工具检查内存使用情况，JavaScript调用树，渲染的DOM节点数量等。
        
+ 
        这组文章向您展示了如何使用 Firefox 中的开发工具来调试和提高网站性能，使用工具检查内存使用情况，JavaScript 调用树，渲染的 DOM 节点数量等。
        
 
        
 
 
        设计和可访问性
        
@@ -99,7 +99,7 @@ 
        一般的网页布局是怎样的?
        
+ 
        一般的网页布局是怎样的？
        
  
  
        在为您的网站设计网页时，最好了解最常见的布局。这篇文章运行一些典型的网页布局，看看组成每一个的部分。
        
  
        
@@ -107,21 +107,21 @@ 
        怎么设计才能适用于所有用户?
        
+ 
        怎么设计才能适用于所有用户？
        
  
        
  
        本文提供了基本的技术，以帮助您为任何类型的用户设计网站 - 快速无障碍获胜和其他这样的事情。
        
  
        
- 
        残疾人的特殊关怀?
        
+ 
        残疾人的特殊关怀？
        
  
        
- 
        本文介绍了HTML的特定功能，可用于使不同残疾人更容易访问网页。
        
+ 
        本文介绍了 HTML 的特定功能，可用于使不同残疾人更容易访问网页。
        
  
        
- 
        HTML,CSS和JavaScript 问题
        
+ 
        HTML,CSS 和 JavaScript 问题
        
 
- 
        对于HTML / CSS / JavaScript问题的常见解决方案，请尝试以下文章：
        
+ 
        对于 HTML / CSS / JavaScript 问题的常见解决方案，请尝试以下文章：
        
 
  
  
        
diff --git a/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html
index aafdd28a891f93..3470c36bb56947 100644
--- a/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html
+++ b/files/zh-cn/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -12,11 +12,11 @@
 
-   
+   
-   
+   
@@ -30,13 +30,13 @@ 
        概述
        
  
        网页（webpage）
        
- 
        一份能够显示在网络浏览器（如Firefox,，Google Chrome，Microsoft Internet Explorer 或Edge，Apple的Safari）上的文档。网页也常被称作"web pages"（网页）或者就叫"pages"（页面）。
        
+ 
        一份能够显示在网络浏览器（如 Firefox,，Google Chrome，Microsoft Internet Explorer 或 Edge，Apple 的 Safari）上的文档。网页也常被称作"web pages"（网页）或者就叫"pages"（页面）。
        
  
        网站（website）
        
  
        一个由许多组合在一起，并常常以各种方式相互连接的网页组成的集合。网站常被称作"web site"（网站）或简称"site"（站点）。
        
  
        网络服务器（web server）
        
  
        一个在互联网上托管网站的计算机。
        
  
        搜索引擎（search engine）
        
- 
        帮助你寻找其他网页的网站，比如Google，Bing，或Yahoo。
        
+ 
        帮助你寻找其他网页的网站，比如 Google，Bing，或 Yahoo。
        
 
        自主学习
        
@@ -49,7 +49,7 @@ 
        深入探索
        网页
        
 
-
        一份网页文档是交给{{Glossary("浏览器")}}显示的简单文档。这种文档是由{{Glossary("超文本标记语言HTML")}}来编写的(在other articles可查看更多详细内容)。网页文档可以插入各种各样不同类型的资源，例如：
        
+
        一份网页文档是交给{{Glossary("浏览器")}}显示的简单文档。这种文档是由{{Glossary("超文本标记语言 HTML")}}来编写的 (在other articles可查看更多详细内容)。网页文档可以插入各种各样不同类型的资源，例如：
          
  
        • 样式信息 — 控制页面的观感
          • 
@@ -58,7 +58,7 @@ 
          网页
          
 
        
-
        提示: 浏览器也能显示其他文档，例如{{Glossary("PDF")}}文件或图像，但网页（webpage）这一概念专指HTML文档。其他情况我们则只会使用文档（document）这一概念
        
+
        提示：浏览器也能显示其他文档，例如{{Glossary("PDF")}}文件或图像，但网页（webpage）这一概念专指 HTML 文档。其他情况我们则只会使用文档（document）这一概念
        
 
        网络上所有可用的网页都可以通过一个独一无二的地址访问到。要访问一个页面，只需在你的浏览器地址栏中键入页面的地址。 
        
diff --git a/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html b/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html
index d860d24f9f066a..c2b44e6acf3652 100644
--- a/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html
+++ b/files/zh-cn/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -13,11 +13,11 @@
 
        
  
   
        前提:前提：
    了解 互联网是怎么工作的
   
        
   
        目标:目标：
    了解网页，网站，网络服务器和搜索引擎间的区别
   
        
          
 
 
 
 
 
 
 
 
 
 
 
 
        
-   
+   
-   
+   
@@ -31,34 +31,34 @@ 
        本地文件与远程文件
        测试本地文件存在的问题
        
 
-
        某些示例如果你将其作为本地文件打开的话，它将不会运行。 这可能是由于各种原因，最有可能是：
        
+
        某些示例如果你将其作为本地文件打开的话，它将不会运行。这可能是由于各种原因，最有可能是：
          
- 
        • 它们具有异步请求。 如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅 从服务器获取数据）。 这是因为安全限制（更多关于 Web 安全的信息，请参阅 站点安全）。
          • 
+ 
        • 它们具有异步请求。 如果你只是从本地文件运行示例，一些浏览器（包括 Chrome）将不会运行异步请求（请参阅 从服务器获取数据）。这是因为安全限制（更多关于 Web 安全的信息，请参阅 站点安全）。
          • 
  
        • 它们具有服务端代码。 服务器端语言（如 PHP 或 Python）需要一个特殊的服务器来解释代码并提供结果。
          • 
 
        运行一个简单的本地 HTTP 服务器
        
 
-
        为了解决异步请求的问题，我们需要通过在本地Web服务器上运行这些示例来测试这些示例。为我们的目的，最简单的方法之一就是使用Python的SimpleHTTPServer模块。
        
+
        为了解决异步请求的问题，我们需要通过在本地 Web 服务器上运行这些示例来测试这些示例。为我们的目的，最简单的方法之一就是使用 Python 的SimpleHTTPServer模块。
        我们需要：
          
  
        1. 
-  
          安装Python。如果您正在使用Linux或Mac OS X，则应该已经在您的系统上可用。如果您是Windows用户，则可以从Python主页获取安装程序，并按照说明进行安装：
          
+  
          安装 Python。如果您正在使用 Linux 或 Mac OS X，则应该已经在您的系统上可用。如果您是 Windows 用户，则可以从 Python 主页获取安装程序，并按照说明进行安装：
          
 
   
            
    
          • 转到python.org
            • 
-   
          • 在“下载”部分下，单击Python“3.xxx”的链接。
            • 
-   
          • 在页面的底部，选择Windows x86可执行文件安装程序并下载它。
            • 
+   
          • 在“下载”部分下，单击 Python“3.xxx”的链接。
            • 
+   
          • 在页面的底部，选择Windows x86 可执行文件安装程序并下载它。
            • 
    
          • 当它已经下载，运行它。
            • 
-   
          • 在第一个安装程序页面上，确保选中了“将Python 3.xxx添加到PATH”复选框。
            • 
+   
          • 在第一个安装程序页面上，确保选中了“将 Python 3.xxx 添加到 PATH”复选框。
            • 
    
          • 单击安装，然后在安装完成后单击关闭。
            • 
   
          
  
          2. 
  
        2. 
-  
          打开你的命令提示符（Windows）/终端（OS X / Linux）。要检查Python是否安装，请输入以下命令：
          
+  
          打开你的命令提示符（Windows）/终端（OS X / Linux）。要检查 Python 是否安装，请输入以下命令：
          
 
   
          python -V
          
  
          3. 
@@ -73,26 +73,26 @@ 
          运行一个简单的本地
  
        3. 
   
          输入命令在该目录中启动服务器：
          
 
-  
          ＃如果上面返回的Python版本是3.X 
+  
          ＃如果上面返回的 Python 版本是 3.X 
 python -m http.server 
-＃如果上面返回的Python版本是2.X 
+＃如果上面返回的 Python 版本是 2.X 
 python -m SimpleHTTPServer
          
  
          4. 
  
        4. 
-  
          默认情况下，这将在本地Web服务器上的端口8000上运行目录的内容。您可以通过转到localhost:8000Web浏览器中的URL来访问此服务器。在这里你会看到列出的目录的内容 - 点击你想运行的HTML文件。
          
+  
          默认情况下，这将在本地 Web 服务器上的端口 8000 上运行目录的内容。您可以通过转到localhost:8000Web 浏览器中的 URL 来访问此服务器。在这里你会看到列出的目录的内容 - 点击你想运行的 HTML 文件。
          
  
          5. 
 
        
-
        注意：如果您已经在端口8000上运行了某些东西，则可以通过运行server命令，然后选择另一个端口号（例如python -m http.server 7800 （Python 3.x）或python -m SimpleHTTPServer 7800 （Python 2.x））来选择另一个端口。然后您可以访问您的内容localhost:7800。
        
+
        注意：如果您已经在端口 8000 上运行了某些东西，则可以通过运行 server 命令，然后选择另一个端口号（例如python -m http.server 7800 （Python 3.x）或python -m SimpleHTTPServer 7800 （Python 2.x））来选择另一个端口。然后您可以访问您的内容localhost:7800。
        
 
        在本地运行服务器端语言
        
 
-
        Python的SimpleHTTPServer模块是有用的，但它不知道如何运行用PHP或Python等语言编写的代码。为了处理这个问题，你需要更多的东西 - 正是你需要的东西取决于你正在运行的服务器端语言。这里有几个例子：
        
+
        Python 的SimpleHTTPServer模块是有用的，但它不知道如何运行用 PHP 或 Python 等语言编写的代码。为了处理这个问题，你需要更多的东西 - 正是你需要的东西取决于你正在运行的服务器端语言。这里有几个例子：
          
- 
        • 要运行Python服务器端代码，您需要使用 Python 网络框架。您可以通过阅读Django Web Framework（Python）来了解如何使用Django框架。Flask也是一个不错的选择（稍微轻量一点）。要运行Flask，你需要先安装Python / PIP，然后使用pip3 install flask 来安装Flask。此时，您应该能够运行Python Flask示例python3 python-example.py，然后在您的浏览器中打开 localhost:5000 查看。
          • 
- 
        • 要运行Node.js（JavaScript）服务器端代码，您可以直接使用Node或选择构建于其上的框架。Express是一个不错的选择 - 请参阅Express Web Framework（Node.js / JavaScript）。
          • 
- 
        • 要运行PHP服务器端代码，您需要一个可以解释PHP的服务器设置。本地PHP测试的好选择是MAMP（Mac和Windows），  AMPPS（Mac，Windows，Linux）和LAMP（Linux，Apache，MySQL和PHP / Python / Perl）。这些是完整的包，创建本地设置，允许您运行Apache服务器，PHP和MySQL数据库。
          • 
+ 
        • 要运行 Python 服务器端代码，您需要使用 Python 网络框架。您可以通过阅读Django Web Framework（Python）来了解如何使用 Django 框架。Flask也是一个不错的选择（稍微轻量一点）。要运行 Flask，你需要先安装 Python / PIP，然后使用pip3 install flask 来安装 Flask。此时，您应该能够运行 Python Flask 示例python3 python-example.py，然后在您的浏览器中打开 localhost:5000 查看。
          • 
+ 
        • 要运行 Node.js（JavaScript）服务器端代码，您可以直接使用 Node 或选择构建于其上的框架。Express 是一个不错的选择 - 请参阅Express Web Framework（Node.js / JavaScript）。
          • 
+ 
        • 要运行 PHP 服务器端代码，您需要一个可以解释 PHP 的服务器设置。本地 PHP 测试的好选择是MAMP（Mac 和 Windows），  AMPPS（Mac，Windows，Linux）和LAMP（Linux，Apache，MySQL 和 PHP / Python / Perl）。这些是完整的包，创建本地设置，允许您运行 Apache 服务器，PHP 和 MySQL 数据库。
          • 
 
        
diff --git a/files/zh-cn/learn/common_questions/thinking_before_coding/index.html b/files/zh-cn/learn/common_questions/thinking_before_coding/index.html
index 8007595b84cae4..ac878e5903be0d 100644
--- a/files/zh-cn/learn/common_questions/thinking_before_coding/index.html
+++ b/files/zh-cn/learn/common_questions/thinking_before_coding/index.html
@@ -8,19 +8,19 @@
 
        
  
   
        前提:前提：
    你需要知道互联网是怎么工作的，以及什么是网络服务器。
   
        
   
        目标:目标：
    你将学习如何配置本地测试服务器。
   
        
          
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
        
-   
+   
-   
-   
+   
+   
        
  
   
        前提:前提：
    无
   
        
   
        目标:学会设定目标来给自己的web项目导航目标：学会设定目标来给自己的 web 项目导航
   
        
          
 
        
 
 
        概述
        
 
-
        当刚开始一个Web项目时，大多数人所关心更多是技术方面。当然你必须先能熟练运用各种工具，但是最关键的其实是你想要做出一个怎样的产品。这看上去很简单，但是有很多的项目的失败并不是因为缺少相应的技术水平，而是缺少一个明确的目标。
        
+
        当刚开始一个 Web 项目时，大多数人所关心更多是技术方面。当然你必须先能熟练运用各种工具，但是最关键的其实是你想要做出一个怎样的产品。这看上去很简单，但是有很多的项目的失败并不是因为缺少相应的技术水平，而是缺少一个明确的目标。
        
 
 
        所以当你有一个想法并且想把它付诸实践的话，在一切启动之前你首先要问一问自己下面这几个问题：
        
 
@@ -30,7 +30,7 @@ 
        概述
        
  
      • 做什么，以怎样的顺序，才能达成我的目标？
        • 
 
      
 
-
      这就是项目构思(project ideation)，这是达成你目标的第一步，无论你是初学者还是经验丰富的开发者。
      
+
      这就是项目构思 (project ideation)，这是达成你目标的第一步，无论你是初学者还是经验丰富的开发者。
      
 
 
      自主学习
      
 
@@ -38,14 +38,14 @@ 
      自主学习
      
 
 
      深入探索
      
 
-
      一个项目永远不应该从技术的一方开始建立。音乐家没办法谱写任何旋律除非他知道他要创作出怎样的歌曲，对于画家、作家、Web开发者来说同样如此。技术是我们接下来才需要考虑的。
      
+
      一个项目永远不应该从技术的一方开始建立。音乐家没办法谱写任何旋律除非他知道他要创作出怎样的歌曲，对于画家、作家、Web 开发者来说同样如此。技术是我们接下来才需要考虑的。
      
 
-
      技术显然是重要的。音乐家必须精通他们手中的乐器。但再好的音乐家也不能在没有想法的情况下制作出美妙的音乐。因此，在我们考虑技术(采用怎样的编程语言和工具)之前，你首先应该停下来好好想一想关于你想要做出的产品的各种细节。
      
+
      技术显然是重要的。音乐家必须精通他们手中的乐器。但再好的音乐家也不能在没有想法的情况下制作出美妙的音乐。因此，在我们考虑技术 (采用怎样的编程语言和工具) 之前，你首先应该停下来好好想一想关于你想要做出的产品的各种细节。
      
 
 
      和朋友们讨论讨论你的想法是一个好的开始，但是光这样还不够。你需要安静地坐下来好好捋一捋你的想法，为了能有一个清晰的思路关于如何实现你的想法。想要做到这些，你只需要一支笔和一张纸并回答下面这些问题。
      
 
 
      
-
      注意: 有数不清的方法来实现你的想法，这里就不一一列举了。（不单独写本书不足以说明它）我们这里只采用一些简单的方法来处理专业人士所谓的 项目想法, 项目计划和项目管理。
      
+
      注意： 有数不清的方法来实现你的想法，这里就不一一列举了。（不单独写本书不足以说明它）我们这里只采用一些简单的方法来处理专业人士所谓的 项目想法, 项目计划和项目管理。
      
 
      
 
 
      我到底想完成什么？
      
@@ -82,21 +82,21 @@ 
      我到底想完成什么？
      
 
 
      网站如何实现我的目标？
      
 
-
      现在，你有了一个目录清单，而且你迫切需要一个网站来实现这些目标。你确定吗?
      
+
      现在，你有了一个目录清单，而且你迫切需要一个网站来实现这些目标。你确定吗？
      
 
-
      让我们回过头看看我们的例子。我们有5个目标和音乐相关，另一个和日常生活相关(找到你的另一半)，还有一个和这些完全无关：猫的照片。建立一个网站来实现这所有的目标合理吗？甚至是必要的吗？ 毕竟现有的很多网站服务就能达成你的目标，不需要新建一个网站。
      
+
      让我们回过头看看我们的例子。我们有 5 个目标和音乐相关，另一个和日常生活相关 (找到你的另一半)，还有一个和这些完全无关：猫的照片。建立一个网站来实现这所有的目标合理吗？甚至是必要的吗？毕竟现有的很多网站服务就能达成你的目标，不需要新建一个网站。
      
 
-
      找一个男（女）朋友就是一个很好的例子，体现了使用现有资源比构建一个全新的网站更有意义。为什么呢？因为比起实际去找个男（女）朋友，构建和维护网站将会花费我们更多的时间。既然我们的目标是最重要的，我们应该把我们的精力放在借助已有的工具而不是从头开始。还有，我们有很多可以用来展示相片的web服务，所以如果只是为了传播我们的猫咪多么可爱而构建一个新网站，就太不值得在这上面下功夫了。
      
+
      找一个男（女）朋友就是一个很好的例子，体现了使用现有资源比构建一个全新的网站更有意义。为什么呢？因为比起实际去找个男（女）朋友，构建和维护网站将会花费我们更多的时间。既然我们的目标是最重要的，我们应该把我们的精力放在借助已有的工具而不是从头开始。还有，我们有很多可以用来展示相片的 web 服务，所以如果只是为了传播我们的猫咪多么可爱而构建一个新网站，就太不值得在这上面下功夫了。
      
 
-
      其他的五个目标都和音乐有关。当然，有许多 web 服务能够达成这些目标，但是在这种情况下构建一个我们自己的专用网站是有意义的。这样的一个网站是整合所有我们想要发布在同一个地方的内容的最佳方式（有利于目标3,5和6），而且能促进我们与公众的互动（有利于目标2和4）。总之，既然这些目标都围绕着同一个主题，把一切放在一起将帮助我们达成目标，同时帮助我们的读者与我们联系。
      
+
      其他的五个目标都和音乐有关。当然，有许多 web 服务能够达成这些目标，但是在这种情况下构建一个我们自己的专用网站是有意义的。这样的一个网站是整合所有我们想要发布在同一个地方的内容的最佳方式（有利于目标 3,5 和 6），而且能促进我们与公众的互动（有利于目标 2 和 4）。总之，既然这些目标都围绕着同一个主题，把一切放在一起将帮助我们达成目标，同时帮助我们的读者与我们联系。
      
 
-
      那么一个网站如何帮助我达成我的目标呢? 通过回答这个问题，你将找到达成目标的最佳方式，同时把自己从白费力气中解救出来。
      
+
      那么一个网站如何帮助我达成我的目标呢？通过回答这个问题，你将找到达成目标的最佳方式，同时把自己从白费力气中解救出来。
      
 
 
      做什么，以怎样的顺序，才能达成我的目标？
      
 
 
      现在你知道你想要完成什么，是时候把这些目标变成可行的步骤了。另外我补充一点，你的目标可能会不断变化。在项目的过程中，它们也会随着时间的推移而发生变化，可能是你遇到了意想不到的困难，或者只是改变了你的想法。
      
 
-
      与其一个冗长的解释, 不如让我们回到如下表格中的例子上:
      
+
      与其一个冗长的解释，不如让我们回到如下表格中的例子上：
      
 
 
@@ -111,7 +111,7 @@ 
      做什么
    
      
@@ -122,7 +122,7 @@ 
      做什么
     
        
      
      1. 写下一些文章来开启讨论
        2. 
      
      2. 明确文章的外观
        3. 
-     
      3. 在网站上发布这些文章 （怎么做？）
        4. 
+     
      4. 在网站上发布这些文章（怎么做？）
        5. 
     
      
    
   
      
@@ -130,7 +130,7 @@ 
      做什么
    
      
@@ -160,9 +160,9 @@ 
      做什么
  
 
      
  
      
     
        
      
      1. 录制一段音乐
        2. 
-     
      2. 准备一些可在线使用的音频文件（你能用现有的Web服务来实现吗？)
        3. 
+     
      3. 准备一些可在线使用的音频文件（你能用现有的 Web 服务来实现吗？)
        4. 
      
      4. 让人们在网站的某个地方听见你的音乐
        5. 
     
      
    
      与其他音乐家见面
    
     
        
-     
      1. 向人们提供你的联系方式 (电子邮件? Facebook? 电话? 邮件?)
        2. 
+     
      2. 向人们提供你的联系方式 (电子邮件？Facebook? 电话？邮件？)
        3. 
      
      3. 明确人们怎样从你的网站上找到那些联系方式
        4. 
     
      
    
      
 
-
      有两件事需要注意。第一， 其中的有些事情和 web 不相关（例如：录制音乐，写文章）。 通常这些线下活动比项目的 Web 端更重要。例如，在销售方面，处理供应、付款和发货比建立一个人们可以订购的网站更为重要和耗时。 
      
+
      有两件事需要注意。第一，其中的有些事情和 web 不相关（例如：录制音乐，写文章）。通常这些线下活动比项目的 Web 端更重要。例如，在销售方面，处理供应、付款和发货比建立一个人们可以订购的网站更为重要和耗时。 
      
 
-
      第二， 制定可行的步骤会导致你需要回答新的问题。通常情况下，问题比我们最初想的要多。（例如，我应该学习如何自己做这些，请别人帮我做，或者使用第三方服务？）
      
+
      第二，制定可行的步骤会导致你需要回答新的问题。通常情况下，问题比我们最初想的要多。（例如，我应该学习如何自己做这些，请别人帮我做，或者使用第三方服务？）
      
 
 
      总结
      
 
diff --git a/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html b/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html
index fae7c64b1aff20..d57745aa5b56df 100644
--- a/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html
+++ b/files/zh-cn/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -10,12 +10,12 @@
 
-   
+   
-   
-   
+   
+   
      
  
   
      前提:前提：
    你必须知道什么是网络服务器？ 以及域名是如何工作的。你必须知道如何搭建一个基本环境，还有如何写一个简单的网页。
   
      
   
      目标:学习如何将文件上传到FTP服务器。目标：学习如何将文件上传到 FTP 服务器。
   
      
        
 
      
@@ -30,15 +30,15 @@ 
      自主学习
      
 
 
      深入探究
      
 
-
      了解FTP客户端：FireFTP
      
+
      了解 FTP 客户端：FireFTP
      
 
-
      有很多FTP客户端。我们的demo使用FireFTP演示，因为用FireFTP构建是非常容易的。如果你使用FireFTP,只要转到FireFTP插件页面并安装FireFTP。
      
+
      有很多 FTP 客户端。我们的 demo 使用 FireFTP 演示，因为用 FireFTP 构建是非常容易的。如果你使用 FireFTP，只要转到 FireFTP 插件页面并安装 FireFTP。
      
 
 
      
-
      当然这有许多其他的选项。参见发布工具：获取FTP更多的信息。
      
+
      当然这有许多其他的选项。参见发布工具：获取 FTP更多的信息。
      
 
      
 
-
      在个新的标签中打开FireFTP，FireFTP有两种办法。
      
+
      在个新的标签中打开 FireFTP，FireFTP 有两种办法。
      
 
 
        
  
      1. Firefox menu  ➤ Developer ➤ FireFTP
        2. 
@@ -51,40 +51,40 @@ 
        了解FTP客户端：FireFTP
        
 
 
        登入（Logging in）
        
 
-
        在这个例子中，我们假设我们的托管提供商（将托管我们的HTTP Web服务器的服务）是一个虚构的公司“Example Hosting Provider”，其URL如下所示：
        
+
        在这个例子中，我们假设我们的托管提供商（将托管我们的 HTTP Web 服务器的服务）是一个虚构的公司“Example Hosting Provider”，其 URL 如下所示：
        
 
 
        mypersonalwebsite.examplehostingprovider.net.
        
 
 
        我们刚刚开通了一个帐户，并从他们那里收到了这些信息：
        
 
 
        
-
        恭喜在Example Hosting Provider开设帐户。
        
+
        恭喜在 Example Hosting Provider 开设帐户。
        
 
-
        你的账户是: demozilla
        
+
        你的账户是：demozilla
        
 
 
        您的网站将在：
        
 
 
        demozilla.examplehostingprovider.net
        
 
-
        要发布到此帐户，请使用以下凭据通过FTP进行连接：
        
+
        要发布到此帐户，请使用以下凭据通过 FTP 进行连接：
        
 
 
          
- 
        • FTP 服务: ftp://demozilla.examplehostingprovider.net
          • 
- 
        • 用户名: demozilla
          • 
- 
        • 密码: quickbrownfox
          • 
- 
        • 要在Web上发布，请将文件放入Public / htdocs目录中。
          • 
+ 
        • FTP 服务：ftp://demozilla.examplehostingprovider.net
          • 
+ 
        • 用户名：demozilla
          • 
+ 
        • 密码：quickbrownfox
          • 
+ 
        • 要在 Web 上发布，请将文件放入Public / htdocs目录中。
          • 
 
        
 
        
 
-
        让我们查看一下此网页http://demozilla.examplehostingprovider.net/ — 正如你所见，现在这里什么也没有:
        
+
        让我们查看一下此网页http://demozilla.examplehostingprovider.net/ — 正如你所见，现在这里什么也没有：
        
 
 
        Our demozilla personal website, seen in a browser: it's empty
        
 
 
        
-
        注意: 根据您的托管服务提供商的不同，大部分时间您会看到一个页面，内容如下：“此网站由[托管服务]托管”。
        
+
        注意： 根据您的托管服务提供商的不同，大部分时间您会看到一个页面，内容如下：“此网站由 [托管服务] 托管”。
        
 
        
 
-
        要将FTP客户端连接到远程服务器，请按“创建帐户...”按钮并使用托管提供商提供的信息填写字段：
        
+
        要将 FTP 客户端连接到远程服务器，请按“创建帐户...”按钮并使用托管提供商提供的信息填写字段：
        
 
 
        FireFTP: creating an account
        
 
@@ -97,9 +97,9 @@ 
        在这里和那里：本地
 
        让我们来看看你所看到的：
        
 
 
          
- 
        • 在左边，你会看到你的本地文件。 导航到您存储网站的目录（本例中为mdn）。
          • 
- 
        • 在右侧，您会看到远程文件。 我们登录到了我们远程的FTP根目录（在这种情况下，users/ demozilla）
          • 
- 
        • 现在您可以忽略底部区域。 它是您的FTP客户端和服务器之间每次交互的实时日志。
          • 
+ 
        • 在左边，你会看到你的本地文件。导航到您存储网站的目录（本例中为mdn）。
          • 
+ 
        • 在右侧，您会看到远程文件。我们登录到了我们远程的 FTP 根目录（在这种情况下，users/ demozilla）
          • 
+ 
        • 现在您可以忽略底部区域。它是您的 FTP 客户端和服务器之间每次交互的实时日志。
          • 
 
        
 
 
        上传到服务器
        
@@ -112,29 +112,29 @@ 
        上传到服务器
        
 
 
        The files show in the remote view: they have been pushed to the server
        
 
-
        文件都上传成功了吗?
        
+
        文件都上传成功了吗？
        
 
-
        到目前为止，很好，但文件真的在线吗？ 您可以在浏览器中返回您的网站（例如http://demozilla.examplehostingprovider.net/）进行仔细检查：
        
+
        到目前为止，很好，但文件真的在线吗？您可以在浏览器中返回您的网站（例如http://demozilla.examplehostingprovider.net/）进行仔细检查：
        
 
 
        Here we go: our website is live!
        
 
-
        瞧！ 我们的网站已经活灵活现了！
        
+
        瞧！我们的网站已经活灵活现了！
        
 
 
        其他方式上传文件
        
 
-
        FTP协议是发布网站的一种众所周知的方法，但不是唯一的方法。 以下是其他一些可能性：
        
+
        FTP 协议是发布网站的一种众所周知的方法，但不是唯一的方法。以下是其他一些可能性：
        
 
 
          
- 
        •  Web界面。 作为远程文件上传服务前端的HTML界面。 由您的托管服务提供。
          • 
- 
        • GitHub（高级）。 使用 提交/推送 方法的组合上传{{Glossary('git')}} 。 请参阅我们的 “Web指南入门” 中 发布您的网站 文章。
          • 
- 
        • {{Glossary("Rsync")}}（高级）。 本地到远程的文件同步系统。
          • 
+ 
        •  Web 界面。作为远程文件上传服务前端的 HTML 界面。由您的托管服务提供。
          • 
+ 
        • GitHub（高级）。使用 提交/推送 方法的组合上传{{Glossary('git')}} 。请参阅我们的“Web 指南入门”中 发布您的网站 文章。
          • 
+ 
        • {{Glossary("Rsync")}}（高级）。本地到远程的文件同步系统。
          • 
  
        • {{Glossary('WebDAV')}}。
          • 
  
        • {{Glossary('WebDAV')}}. {{Glossary('HTTP')}}协议的扩展，允许更多的高级文件管理。
          • 
 
        
 
 
        下一步
        
 
-
        干得好，你几乎快完成了。 最后一项重要任务是确保您的网站正常工作。
        
+
        干得好，你几乎快完成了。最后一项重要任务是确保您的网站正常工作。
        
 
 
         
        
 
diff --git a/files/zh-cn/learn/common_questions/using_github_pages/index.html b/files/zh-cn/learn/common_questions/using_github_pages/index.html
index 2433bdb0517a8b..2201343c817c09 100644
--- a/files/zh-cn/learn/common_questions/using_github_pages/index.html
+++ b/files/zh-cn/learn/common_questions/using_github_pages/index.html
@@ -1,5 +1,5 @@
 ---
-title: 应该如何使用Github Pages?
+title: 应该如何使用 Github Pages?
 slug: Learn/Common_questions/Using_Github_pages
 tags:
   - GitHub
@@ -9,92 +9,92 @@
   - 指导
 translation_of: Learn/Common_questions/Using_Github_pages
 ---
-
        GitHub是一个“公共编码”网站。它允许您上传代码存储库并存储在 Git 版本控制系统上。然后，您可以在代码项目上进行协作，默认情况下系统是开源的，这意味着世界上任何人都可以找到您的GitHub代码，使用它，从中学习，并改进它。同样的，对于其他人的代码您也可以这么做！本文提供了一个基本的指南，即使用Github的gh-pages功能发布内容。
        
+
        GitHub是一个“公共编码”网站。它允许您上传代码存储库并存储在 Git 版本控制系统上。然后，您可以在代码项目上进行协作，默认情况下系统是开源的，这意味着世界上任何人都可以找到您的 GitHub 代码，使用它，从中学习，并改进它。同样的，对于其他人的代码您也可以这么做！本文提供了一个基本的指南，即使用 Github 的 gh-pages 功能发布内容。
        
 
 
        发布内容
        
 
-
        GitHub是一个非常重要和有用的社区，值得参与其中，Git / GitHub也是一个非常受欢迎的版本控制系统 - 现在大多数科技公司在其工作流程中使用它。 GitHub有一个非常有用的功能，称为GitHub Pages，它允许您在Web上实时发布网站代码。
        
+
        GitHub 是一个非常重要和有用的社区，值得参与其中，Git / GitHub 也是一个非常受欢迎的版本控制系统 - 现在大多数科技公司在其工作流程中使用它。GitHub 有一个非常有用的功能，称为GitHub Pages，它允许您在 Web 上实时发布网站代码。
        
 
-
        基本Github设置
        
+
        基本 Github 设置
        
 
 
          
- 
        1. 首先，在您的机器上安装Git。这是GitHub工作的底层版本控制系统软件。
          2. 
- 
        2. 接下来，注册一个GitHub帐户。这很简单易操作。
          3. 
+ 
        3. 首先，在您的机器上安装 Git。这是 GitHub 工作的底层版本控制系统软件。
          4. 
+ 
        4. 接下来，注册一个 GitHub 帐户。这很简单易操作。
          5. 
  
        5. 注册后，用您的用户名和密码登录github.com。
          6. 
 
        
 
 
        准备上传代码
        
 
-
        您可以将任何您喜欢的代码存储在Github资源库中，但要使用GitHub Pages功能实现全面效果，您的代码应该被构造为典型的网站，例如主入口点是一个名为index.html的HTML文件。
        
+
        您可以将任何您喜欢的代码存储在 Github 资源库中，但要使用 GitHub Pages 功能实现全面效果，您的代码应该被构造为典型的网站，例如主入口点是一个名为 index.html 的 HTML 文件。
        
 
-
        第一步，您需要做的另一件事是将您的代码目录初始化为Git存储库。按照下述步骤：
        
+
        第一步，您需要做的另一件事是将您的代码目录初始化为 Git 存储库。按照下述步骤：
        
 
 
          
- 
        1. 将命令行指向您的test-site目录（或者任何一个您能调用的包含有您的网站的目录）。为此，请使用cd命令（即“更改目录”）。如果您已经将您的网站放到了位于桌面上的test-site目录中，则可以输入以下内容：
+ 
        2. 将命令行指向您的 test-site 目录（或者任何一个您能调用的包含有您的网站的目录）。为此，请使用 cd 命令（即“更改目录”）。如果您已经将您的网站放到了位于桌面上的 test-site 目录中，则可以输入以下内容：
   
          cd Desktop/test-site
          
  
          3. 
- 
        3. 当命令行指向您的网站所在目录时，键入以下命令，该命令告诉git工具将目录转换为git仓库：
+ 
        4. 当命令行指向您的网站所在目录时，键入以下命令，该命令告诉 git 工具将目录转换为 git 仓库：
   
          git init
          
  
          5. 
 
        
 
 
        命令行界面
        
 
-
        将代码上传到Github的最佳方法是通过命令行 - 这是一个窗口，您可以在其中输入命令来执行诸如创建文件和运行程序等操作，而不是在用户界面内单击。它看起来像这样：
        
+
        将代码上传到 Github 的最佳方法是通过命令行 - 这是一个窗口，您可以在其中输入命令来执行诸如创建文件和运行程序等操作，而不是在用户界面内单击。它看起来像这样：
        
 
 
        
 
 
        
-
        注意: 您也可以考虑使用Git图形用户界面来执行相同的工作，如果您不熟悉命令行。
        
+
        注意: 您也可以考虑使用Git 图形用户界面来执行相同的工作，如果您不熟悉命令行。
        
 
        
 
 
        每个操作系统都附带有一个命令行工具：
        
 
 
          
- 
        • Windows: 可以通过按Windows键，键入命令提示符，并从出现的列表中选择命令提示符。请注意，Windows具有与Linux和OS X不同的命令约定，因此以下命令可能因您的机器而异。
          • 
+ 
        • Windows: 可以通过按 Windows 键，键入命令提示符，并从出现的列表中选择命令提示符。请注意，Windows 具有与 Linux 和 OS X 不同的命令约定，因此以下命令可能因您的机器而异。
          • 
  
        • OS X: 终端可以在应用程序>实用程序中找到。
          • 
- 
        • Linux: 通常你可以用Ctrl + Alt + T启动一个终端。如果不行，请在应用程序栏或菜单中查找Terminal。
          • 
+ 
        • Linux: 通常你可以用 Ctrl + Alt + T 启动一个终端。如果不行，请在应用程序栏或菜单中查找Terminal。
          • 
 
        
 
-
        起初这可能看起来有点吓人，但不要担心 - 你很快就会得到基本的窍门。您可以通过键入命令并按Enter键来告诉计算机在终端中执行某些操作，如上所示。
        
+
        起初这可能看起来有点吓人，但不要担心 - 你很快就会得到基本的窍门。您可以通过键入命令并按 Enter 键来告诉计算机在终端中执行某些操作，如上所示。
        
 
 
        为您的代码创建一个仓库
        
 
 
          
- 
        1. 接下来，您需要为您的文件创建一个新的仓库。单击GitHub主页右上角的加号（+），然后选择“ New Repository”。
          2. 
- 
        2. 在此页面的“Repository name”框中，为您的代码库起一个名字，例如:my-repository。
          3. 
+ 
        3. 接下来，您需要为您的文件创建一个新的仓库。单击 GitHub 主页右上角的加号（+），然后选择“ New Repository”。
          4. 
+ 
        4. 在此页面的“Repository name”框中，为您的代码库起一个名字，例如：my-repository。
          5. 
  
        5. 还要填写一个描述来说明您的存储库将包含哪些内容。你的屏幕应该是这样的
          
   
          6. 
  
        6. 单击Create repository;您将会看到如下页面：
          
   
          7. 
 
        
 
-
        将您的文件上传到GitHub
        
+
        将您的文件上传到 GitHub
        
 
 
          
- 
        1. 在当前页面上，您可能对本节的这部分感兴趣“…or push an existing repository from the command line（或者从命令行推送一个现有存储库）”。您应该看到本节中列出的两行代码。复制整个第一行，将其粘贴到命令行中，然后按Enter键。命令应该看起来像是这样的：
+ 
        2. 在当前页面上，您可能对本节的这部分感兴趣“…or push an existing repository from the command line（或者从命令行推送一个现有存储库）”。您应该看到本节中列出的两行代码。复制整个第一行，将其粘贴到命令行中，然后按 Enter 键。命令应该看起来像是这样的：
 
   
          git remote add origin https://github.com/chrisdavidmills/my-repository.git
          
  
          3. 
- 
        3. 接下来，键入以下两个命令，每个命令之后按Enter。这些指令将会把代码上传到GitHub，并要求Git管理这些文件。
+ 
        4. 接下来，键入以下两个命令，每个命令之后按 Enter。这些指令将会把代码上传到 GitHub，并要求 Git 管理这些文件。
   
          git add --all
 git commit -m 'adding my files to my repository'
          
  
          5. 
- 
        5. 最后，将代码推送到GitHub，通过您正在访问的GitHub网页，然后输入我们看到的两个命令中的第二个命令“ …or push an existing repository from the command line（或从命令行部分推入现有存储库）部分”：
+ 
        6. 最后，将代码推送到 GitHub，通过您正在访问的 GitHub 网页，然后输入我们看到的两个命令中的第二个命令“ …or push an existing repository from the command line（或从命令行部分推入现有存储库）部分”：
   
          git push -u origin master
          
  
          7. 
- 
        7. 现在你需要为你的仓库创建一个gh-pages分支;刷新当前页面，您将看到一个类似下面的存储库页面。您需要点击Branch：master按钮，在文本输入框中输入gh-pages，然后按蓝色按钮，即创建分支Create branch: gh-pages。这将创建一个特殊的代码分支，称为gh-pages，该分支会在特殊位置发布。它的URL采用username.github.io/my-repository-name的格式，所以在我的例子中，URL是https://chrisdavidmills.github.io/my-repository。显示的页面是index.html页面。
          
+ 
        8. 现在你需要为你的仓库创建一个 gh-pages 分支;刷新当前页面，您将看到一个类似下面的存储库页面。您需要点击Branch：master按钮，在文本输入框中输入 gh-pages，然后按蓝色按钮，即创建分支Create branch: gh-pages。这将创建一个特殊的代码分支，称为 gh-pages，该分支会在特殊位置发布。它的 URL 采用 username.github.io/my-repository-name 的格式，所以在我的例子中，URL 是 https://chrisdavidmills.github.io/my-repository。显示的页面是 index.html 页面。
          
   
          9. 
- 
        9. 在新的浏览器标签中浏览您的GitHub Pages的网址，您将能够在线访问您的网站！通过电子邮件把地址发送给你的朋友，炫耀你的掌握的成果吧。
          10. 
+ 
        10. 在新的浏览器标签中浏览您的 GitHub Pages 的网址，您将能够在线访问您的网站！通过电子邮件把地址发送给你的朋友，炫耀你的掌握的成果吧。
          11. 
 
        
 
 
        
-
        注意 ：如果卡住了，GitHub Pages主页也是非常有帮助的。
        
+
        注意 ：如果卡住了，GitHub Pages 主页也是非常有帮助的。
        
 
        
 
-
        更多的GitHub知识
        
+
        更多的 GitHub 知识
        
 
-
        如果您想对test-site进行更多更改并将其上传到GitHub，那么您只需像以前一样对文件进行更改。然后，您需要输入以下命令（在每个之后按Enter键）将这些更改推送到GitHub：
        
+
        如果您想对 test-site 进行更多更改并将其上传到 GitHub，那么您只需像以前一样对文件进行更改。然后，您需要输入以下命令（在每个之后按 Enter 键）将这些更改推送到 GitHub：
        
 
 
        git add --all
 git commit -m 'another commit'
@@ -102,4 +102,4 @@ 
        更多的GitHub知识
        
 
 
        您可以使用更合适的消息替换上一次的提交信息，以描述您刚刚做出的更改。
        
 
-
        我们仅仅提供了Git的浅显基本的信息。要了解更多信息，请先从GitHub帮助站点开始。
        
+
        我们仅仅提供了 Git 的浅显基本的信息。要了解更多信息，请先从GitHub 帮助站点开始。
        
diff --git a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html
index 85cd22d2b15815..7ae14173efb36e 100644
--- a/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html
+++ b/files/zh-cn/learn/common_questions/what_are_browser_developer_tools/index.html
@@ -8,11 +8,11 @@
 original_slug: Learn/Discover_browser_developer_tools
 ---
 
        
-
        每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
        
+
        每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
        
 
        
 
 
        
-
        注意：在你运行下面的例子之前，打开我们在Web开发入门系列文章中建立的初学者示例网站。你应该按照下面的步骤打开。
        
+
        注意：在你运行下面的例子之前，打开我们在Web 开发入门系列文章中建立的初学者示例网站。你应该按照下面的步骤打开。
        
 
        
 
 
        如何在浏览器中打开开发者工具
        
@@ -39,14 +39,14 @@ 
        如何在浏览器中打开
    
      2. Opera. Developer ➤ Web Inspector
        3. 
   
    
  
- 
  • 右键菜单：右键单击网页中的一个项目上（在Mac上按Ctrl点击），并从弹出的菜单中选择检查元素（译者注：选择检查（Chrome）或查看元素（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。
    • 
+ 
  • 右键菜单：右键单击网页中的一个项目上（在 Mac 上按 Ctrl 点击），并从弹出的菜单中选择检查元素（译者注：选择检查（Chrome）或查看元素（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。
    • 
 

 
 

 
-
检查器（Inspector）：DOM 浏览器和CSS编辑器

+
检查器（Inspector）：DOM 浏览器和 CSS 编辑器

 
-
开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的HTML运行时的样子，以及哪些CSS规则被应用到了页面上元素。它还允许您立即修改HTML和CSS并在浏览器中实时观察修改的结果。

+
开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的 HTML 运行时的样子，以及哪些 CSS 规则被应用到了页面上元素。它还允许您立即修改 HTML 和 CSS 并在浏览器中实时观察修改的结果。

 
 

 
@@ -54,29 +54,29 @@ 
如何在浏览器中打开
 
 
    
  
  • 点击“检查”选项卡。
    • 
- 
  • 在Internet Explorer中，点击DOM Explorer，或按Ctrl + 1。
    • 
- 
  • 在Safari中，控制就不是很清楚了，但是你如果你没有选择的东西出现在窗口看到HTML。按下按钮查看CSS样式。
    • 
+ 
  • 在 Internet Explorer 中，点击 DOM Explorer，或按 Ctrl + 1。
    • 
+ 
  • 在 Safari 中，控制就不是很清楚了，但是你如果你没有选择的东西出现在窗口看到 HTML。按下按钮查看 CSS 样式。
    • 
 

 
-
探索DOM检查器

+
探索 DOM 检查器

 
-
首先在DOM检查器中右键单击（按Ctrl点击）一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：

+
首先在 DOM 检查器中右键单击（按 Ctrl 点击）一个 HTML 元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：

 
 

 
 
    
  
  • 删除节点（或删除元素）：删除当前元素。
    • 
- 
  • 编辑HTML（或添加属性/编辑文本）：让您更改HTML和看到在变化的结果。对于调试和测试非常有用。
    • 
+ 
  • 编辑 HTML（或添加属性/编辑文本）：让您更改 HTML 和看到在变化的结果。对于调试和测试非常有用。
    • 
  
  • :hover/:active/:focus（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。
    • 
- 
  • 复制/复制为HTML：复制当前选定的HTML。
    • 
- 
  • 一些浏览器也有复制CSS路径和复制XPath，允许你选择复制当前的HTML元素CSS选择器或XPath表达式。
    • 
+ 
  • 复制/复制为HTML：复制当前选定的 HTML。
    • 
+ 
  • 一些浏览器也有复制 CSS 路径和复制 XPath，允许你选择复制当前的 HTML 元素 CSS 选择器或 XPath 表达式。
    • 
 

 
-
现在试着编辑一些你的DOM。双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。

+
现在试着编辑一些你的 DOM。双击元素，或在页面内容里右键单击它并选择编辑 HTML。你可以做出任何你想要的改变，但你不能保存。

 
-
探索CSS编辑器

+
探索 CSS 编辑器

 
-
默认情况下，CSS编辑器显示当前所选元素应用的CSS规则：

+
默认情况下，CSS 编辑器显示当前所选元素应用的 CSS 规则：

 
 
这些功能特别有用：

 
@@ -89,28 +89,28 @@ 
探索CSS编辑器

  
  • 您还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，您可以在其中为页面写入一个全新的声明。
    • 
 
 
-
    您会注意到CSS查看器顶部的一些可点击的选项卡：
    
+
    您会注意到 CSS 查看器顶部的一些可点击的选项卡：
    
 
 
      
  
    • 计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。
      • 
  
    • 盒子模型：这可以直观地表示当前元素的框模型，所以您可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。
      • 
- 
    • 字体：在Firefox中，“字体”选项卡显示应用于当前元素的字体。
      • 
+ 
    • 字体：在 Firefox 中，“字体”选项卡显示应用于当前元素的字体。
      • 
 
    
 
 
    了解更多
    
 
-
    了解更多Inspector在不同的浏览器中的细节：
    
+
    了解更多 Inspector 在不同的浏览器中的细节：
    
 
 
 
-
    JavaScript调试器
    
+
    JavaScript 调试器
    
 
-
    你可在JavaScript调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。
    
+
    你可在 JavaScript 调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。
    
 
 
    
 
@@ -134,7 +134,7 @@ 
    文件列表
    
 
 
    源码
    
 
-
    在你想要停止执行的位置设置间断点。在下面图片中，高亮的第18行就是被设置的断点。
    
+
    在你想要停止执行的位置设置间断点。在下面图片中，高亮的第 18 行就是被设置的断点。
    
 
 
    
 
@@ -150,7 +150,7 @@ 
    “监视表达式”和“断点
 
 
    调用栈 区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。
    
 
-
    最后一部分，Scopes，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在addItemClick函数中是如何变化的。
    
+
    最后一部分，Scopes，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对象在 addItemClick 函数中是如何变化的。
    
 
 
 
@@ -158,7 +158,7 @@ 
    “监视表达式”和“断点
 
 
    再了解一些
    
 
-
    了解不同浏览器中的JavaScript调试器：
    
+
    了解不同浏览器中的 JavaScript 调试器：
    
 
 
 
-
    JavaScript控制台  
    
+
    JavaScript 控制台  
    
 
-
    JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在Internet Explorer中，按Ctrl + 2.）这将给你一个如下所示的窗口:
    
+
    JavaScript 控制台是一个非常有用的工具，用于调试没有按预期运行的 JavaScript。它允许您针对浏览器当前加载的页面运行 JavaScript 行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在 Internet Explorer 中，按 Ctrl + 2.）这将给你一个如下所示的窗口：
    
 
 
    
 
-
    要查看会发生什么，请尝试逐个输入以下代码片段（然后按Enter键）:
    
+
    要查看会发生什么，请尝试逐个输入以下代码片段（然后按 Enter 键）:
    
 
 
      
  
    1. 
@@ -185,8 +185,8 @@ 
      JavaScript控制台  
      
  
    2. 
   
      var my_image = document.createElement('img');
 
-//下面的url已经不再可用，这里注释掉，后面补上了一个可以url
-//且myImage在文章开始给的“初学者示例网址”存在声明冲突，所以改为my_image
+//下面的 url 已经不再可用，这里注释掉，后面补上了一个可以 url
+//且 myImage 在文章开始给的“初学者示例网址”存在声明冲突，所以改为 my_image
 //myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
 my_image.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
 
@@ -214,12 +214,12 @@ 
      JavaScript控制台  
      
 
 
      了解更多
      
 
-
      了解更多JavaScript控制台在不同浏览器中的细节:
      
+
      了解更多 JavaScript 控制台在不同浏览器中的细节：
      
 
 
 
diff --git a/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html b/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html
index f26b6b9984ebeb..955a1f4d258c41 100644
--- a/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html
+++ b/files/zh-cn/learn/common_questions/what_are_hyperlinks/index.html
@@ -1,5 +1,5 @@
 ---
-title: 什么是超链接?
+title: 什么是超链接？
 slug: Learn/Common_questions/What_are_hyperlinks
 tags:
   - 初学者
@@ -14,11 +14,11 @@
 
-   
+   
-   
+   
@@ -29,19 +29,19 @@ 
      概述
      超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念。为了解释什么是链接，我们需要回到网络架构的底层。
      
 
-
      早在1989年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：
      
+
      早在 1989 年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：
        
- 
      1. {{Glossary("URL")}}, 跟踪Web文档的地址系统
        2. 
- 
      2. {{Glossary("HTTP")}}, 一个传输协议，以便在给定URL时查找文档
        3. 
+ 
      3. {{Glossary("URL")}}, 跟踪 Web 文档的地址系统
        4. 
+ 
      4. {{Glossary("HTTP")}}, 一个传输协议，以便在给定 URL 时查找文档
        5. 
  
      5. {{Glossary("HTML")}}, 允许嵌入超链接的文档格式
        6. 
 
      
 
-
      正如您在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。 Web的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。
      
+
      正如您在三大支柱中所看到的，网络上的一切都围绕着文档以及如何访问它们。Web 的最初目的是提供一种简单的方式来访问，阅读和浏览文本文档。从那时起，网络已经发展到提供图像，视频和二进制数据的访问，但是这些改进几乎没有改变三大支柱。
      
 
-
      在Web之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的URL已经使得文档容易被访问，但是你很难通过输入一个长URL来访问一个文档。超链接改变了这一切。链接可以将任何文本与URL相关联，因此用户只要激活链接就可以到达目标文档。
      
+
      在 Web 之前，很难访问文档并从一个文档跳转到另一个文档。人类可以理解的 URL 已经使得文档容易被访问，但是你很难通过输入一个长 URL 来访问一个文档。超链接改变了这一切。链接可以将任何文本与 URL 相关联，因此用户只要激活链接就可以到达目标文档。
      
 
-
      默认情况下，链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按Tab键直到链接处于焦点，然后按Enter键或空格键来激活链接。
      
+
      默认情况下，链接是一段具有下划线的蓝色文本，在视觉上与周围的文字明显不同。用手指触击或用鼠标点击一个链接会激活链接；你如果使用键盘，那么按 Tab 键直到链接处于焦点，然后按 Enter 键或空格键来激活链接。
      Example of a basic display and effect of a link in a web page
      
 
@@ -49,7 +49,7 @@ 
      概述
      深入探索
      
 
-
      正如我们所说的，链接是一段链接到URL的文本，我们使用链接来跳转到另一个文档。关于链接，有一些细节值得考虑：
      
+
      正如我们所说的，链接是一段链接到 URL 的文本，我们使用链接来跳转到另一个文档。关于链接，有一些细节值得考虑：
      链接的类型
      
 
@@ -57,7 +57,7 @@ 
      链接的类型
      内链
      内链是您的网页之间的链接。没有内部链接，就没有网站（当然，除非是只有一页的网站）。
      外链
      
- 
      外链是从您的网页链接到其他人的网页的链接。没有外部链接，就没有web，因为web是网页的网络。使用外部链接提供除您自己维护的内容之外的信息。
      
+ 
      外链是从您的网页链接到其他人的网页的链接。没有外部链接，就没有 web，因为 web 是网页的网络。使用外部链接提供除您自己维护的内容之外的信息。
      传入链接
      传入链接是从其他人的网页链接到您的网页的链接。这只是从被链接者的角度看到的外部链接。请注意，当有人链接到您的网站时，您不必链接回去。
      
@@ -91,6 +91,6 @@ 
      下一步
      所以现在当然你想要建立一些链接的网页！
        
- 
      • 为了获得更多的理论背景, 了解 URL以及其结构,因为每个链接都指向一个URL.
        • 
- 
      • 想要一些更实际的东西? 我们的 HTML介绍 模块中的创建超链接 解释了如何实现详细的超链接
        • 
+ 
      • 为了获得更多的理论背景，了解 URL 以及其结构,因为每个链接都指向一个 URL.
        • 
+ 
      • 想要一些更实际的东西？我们的 HTML 介绍 模块中的创建超链接 解释了如何实现详细的超链接
        • 
 
      
diff --git a/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html b/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html
index 1eeb6940a979e1..f4cf909d0af129 100644
--- a/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html
+++ b/files/zh-cn/learn/common_questions/what_is_a_domain_name/index.html
@@ -15,11 +15,11 @@
 
      
  
   
      前提:前提：
    你该知道 互联网是怎样工作的 ，并且熟悉 网页，网站，网络服务器和搜索引擎间的区别
   
      
   
      目标:目标：
    了解 Web 上的超链接概念以及超链接的重要性。
    
   
      
 
 
 
 
 
 
 
 
 
 
  
  
  
  
  
 
 
 
 
      
-   
-   
+   
+   
-   
+   
@@ -29,11 +29,11 @@ 
      概述
      域名（Domain names）是互联网基础架构的关键部分。它们为互联网上任何可用的网页服务器提供了方便人类理解的地址。
      
 
-
      任何连上互联网的电脑都可以通过一个公共{{Glossary("IP")}}地址访问到，对于IPv4地址来说，这个地址有32位（它们通常写成四个范围在0~255以内，由点分隔的数字组成，比如173.194.121.32），而对于IPv6来说，这个地址有128位，通常写成八组由冒号分隔的四个十六进制数(e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). 计算机可以很容易地处理这些IP地址, 但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变 。为了解决这些问题，我们使用方便记忆的地址，称作域名。
      
+
      任何连上互联网的电脑都可以通过一个公共{{Glossary("IP")}}地址访问到，对于 IPv4 地址来说，这个地址有 32 位（它们通常写成四个范围在 0~255 以内，由点分隔的数字组成，比如 173.194.121.32），而对于 IPv6 来说，这个地址有 128 位，通常写成八组由冒号分隔的四个十六进制数 (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). 计算机可以很容易地处理这些 IP 地址，但是对一个人来说很难找出谁在操控这些服务器以及这些网站提供什么服务。IP 地址很难记忆而且可能会随着时间的推移发生改变。为了解决这些问题，我们使用方便记忆的地址，称作域名。
      自主学习
      
 
-
      还没有可用的资料。请考虑为此投稿[Please, consider contributing]。
      
+
      还没有可用的资料。请考虑为此投稿 [Please, consider contributing]。
      深入探索
      
 
@@ -47,23 +47,23 @@ 
      域名的结构
      {{Glossary("TLD")}} （Top-Level Domain，顶级域名）
      
 
-
      顶级域名可以告诉用户域名所提供的服务类型。最通用的顶级域名（.com, .org, .net）不需要web服务器满足严格的标准，但一些顶级域名则执行更严格的政策。比如：
      
+
      顶级域名可以告诉用户域名所提供的服务类型。最通用的顶级域名（.com, .org, .net）不需要 web 服务器满足严格的标准，但一些顶级域名则执行更严格的政策。比如：
        
- 
      • 地区的顶级域名，如.us，.fr，或.sh，可以要求必须提供给定语言的服务器或者托管在指定国家。这些TLD通常表明对应的网页服务从属于何种语言或哪个地区。
        • 
- 
      • 包含.gov的顶级域名只能被政府部门使用。
        • 
- 
      • .edu只能为教育或研究机构使用。
        • 
+ 
      • 地区的顶级域名，如.us，.fr，或.sh，可以要求必须提供给定语言的服务器或者托管在指定国家。这些 TLD 通常表明对应的网页服务从属于何种语言或哪个地区。
        • 
+ 
      • 包含.gov 的顶级域名只能被政府部门使用。
        • 
+ 
      • .edu 只能为教育或研究机构使用。
        • 
 
      
 
-
      顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到63个字符，不过为了使用方便，大多数顶级域名都是两到三个字符。
      
+
      顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到 63 个字符，不过为了使用方便，大多数顶级域名都是两到三个字符。
      顶级域名的完整列表是ICANN维护的。
      
  
      标签 (或者说是组件)
      
- 
      标签都是紧随着TLD的。标签由1到63个大小写不敏感的字符组成，这些字符包含字母A-z，数字0-9，甚至 “-” 这个符号（当然，“-” 不应该出现在标签开头或者标签的结尾）。举几个例子，a，97，或者 hello-strange-person-16-how-are-you  都是合法的标签。
      
+ 
      标签都是紧随着 TLD 的。标签由 1 到 63 个大小写不敏感的字符组成，这些字符包含字母 A-z，数字 0-9，甚至“-”这个符号（当然，“-”不应该出现在标签开头或者标签的结尾）。举几个例子，a，97，或者 hello-strange-person-16-how-are-you  都是合法的标签。
      
  
      Secondary Level Domain, 二级域名
      
- 
      刚好位于TLD前面的标签也被称为二级域名 (SLD)。一个域名可以有多个标签（或者说是组件），没有强制规定必须要3个标签来构成域名。例如，www.inf.ed.ac.uk 是一个正确的域名。当拥有了“上级”部分(例如 mozilla.org)，你还可以创建另外的域名 (有时被称为 "子域名") (例如 developer.mozilla.org).
      
+ 
      刚好位于 TLD 前面的标签也被称为二级域名 (SLD)。一个域名可以有多个标签（或者说是组件），没有强制规定必须要 3 个标签来构成域名。例如，www.inf.ed.ac.uk 是一个正确的域名。当拥有了“上级”部分 (例如 mozilla.org)，你还可以创建另外的域名 (有时被称为 "子域名") (例如 developer.mozilla.org).
      
 
      购买域名
      
@@ -75,7 +75,7 @@ 
      谁拥有域名？
      被称为域名注册商的公司通过域名登记来记录连接你和你的域名的技术与管理信息。
      
-
      提示 : 对于一些域名，它可能不归属于某个域名注册商来负责记录。比如说，每个在.fire下的域名由Amazon管理。
      
+
      提示 : 对于一些域名，它可能不归属于某个域名注册商来负责记录。比如说，每个在.fire 下的域名由 Amazon 管理。
      
 
      找个可用的域名
      
@@ -84,7 +84,7 @@ 
      找个可用的域名
        
  
      • 去域名注册商的网站。它们大多会提供"whois"服务，告诉你一个域名是否可用。
        • 
- 
      • 另外，如果你使用系统的内置shell，可以在里面输入whois命令，下面显示的是mozilla.org网站的结果：
        • 
+ 
      • 另外，如果你使用系统的内置 shell，可以在里面输入 whois 命令，下面显示的是 mozilla.org 网站的结果：
        • 
 
      $ whois mozilla.org
@@ -111,7 +111,7 @@ 
      找个可用的域名
      
 Registrant Phone:+1.6509030800
 
      
 
-
      正如你所见，我不能注册mozilla.org，因为Mozilla基金会已经注册它了。
      
+
      正如你所见，我不能注册mozilla.org，因为 Mozilla 基金会已经注册它了。
      另外，如果你想看看我能不能注册afunkydomainname.org：
      
 
@@ -119,7 +119,7 @@ 
      找个可用的域名
      
 NOT FOUND
 
 
-
      正如你所见，（在本文写作时）这个域名在whois数据库中不存在，所以我们可以要求去注册它。祝你好运吧！
      
+
      正如你所见，（在本文写作时）这个域名在 whois 数据库中不存在，所以我们可以要求去注册它。祝你好运吧！
      获得一个域名
      
 
@@ -129,40 +129,40 @@ 
      获得一个域名
    3. 去域名注册商的网站。
    4. 通常那些网站上都有突出的"获得域名"宣传，点击它。
    5. 按要求仔细填表。一定要仔细检查你是否有将你想要的域名拼错。一旦你给错误域名付款了，便为时已晚！
      6. 
- 
    6. 注册商将会在域名正确注册后通知你。数小时之内，所有DNS服务器都会收到你的DNS信息。
      7. 
+ 
    7. 注册商将会在域名正确注册后通知你。数小时之内，所有 DNS 服务器都会收到你的 DNS 信息。
      8. 
-
      注意: 在这个过程中注册商会要求你的真实住址。请保证你正确地填写了，因为在一些国家，如果你没有提供合法的地址，注册商会关闭你的域名。
      
+
      注意： 在这个过程中注册商会要求你的真实住址。请保证你正确地填写了，因为在一些国家，如果你没有提供合法的地址，注册商会关闭你的域名。
      
 
      DNS 刷新
      
 
-
      DNS数据库存储在全球每个DNS服务器上，所有这些服务器都源于(refer to)几个被称为“权威名称服务器”或“顶级DNS服务器”。只要您的注册商创建或更新给定域名的任何信息，信息就必须在每个DNS数据库中刷新。 知道给定域名的每个DNS服务器都会存储一段时间的信息，然后再次刷新（DNS服务器再次查询权威服务器）。 因此，知道此域名的DNS服务器需要一些时间才能获取最新信息。
      
+
      DNS 数据库存储在全球每个 DNS 服务器上，所有这些服务器都源于 (refer to) 几个被称为“权威名称服务器”或“顶级 DNS 服务器”。只要您的注册商创建或更新给定域名的任何信息，信息就必须在每个 DNS 数据库中刷新。知道给定域名的每个 DNS 服务器都会存储一段时间的信息，然后再次刷新（DNS 服务器再次查询权威服务器）。因此，知道此域名的 DNS 服务器需要一些时间才能获取最新信息。
      
-
      注意 : 这个时间一般被称为 传播时间 。 然而这个术语是不精准的，因为更新本身没有传播 (top → down)。被你电脑(down)查询的 DNS 服务器只在他需要的时候才从权威服务器(top)中获取信息。
      
+
      注意 : 这个时间一般被称为 传播时间 。然而这个术语是不精准的，因为更新本身没有传播 (top → down)。被你电脑 (down) 查询的 DNS 服务器只在他需要的时候才从权威服务器 (top) 中获取信息。
      
 
      
 
-
      DNS请求如何工作？
      
+
      DNS 请求如何工作？
      
 
-
      正如我们所看到的，当你想在浏览器中展示一个网页的时候，输入域名比输入IP简单多了。让我们看一下这个过程：
      
+
      正如我们所看到的，当你想在浏览器中展示一个网页的时候，输入域名比输入 IP 简单多了。让我们看一下这个过程：
        
  
      1. 在你的浏览器地址栏输入mozilla.org。
        2. 
- 
      2. 您的浏览器询问您的计算机是否已经识别此域名所确定的IP地址（使用本地DNS缓存）。 如果是的话，这个域名被转换为IP地址，然后浏览器与网络服务器交换内容。结束。
        3. 
- 
      3. 如果你的电脑不知道 mozilla.org 域名背后的IP, 它会询问一个DNS服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的IP。
        4. 
- 
      4. 现在电脑知道了要请求的IP地址，你的浏览器能够与网络服务器交换内容。
        5. 
+ 
      5. 您的浏览器询问您的计算机是否已经识别此域名所确定的 IP 地址（使用本地 DNS 缓存）。如果是的话，这个域名被转换为 IP 地址，然后浏览器与网络服务器交换内容。结束。
        6. 
+ 
      6. 如果你的电脑不知道 mozilla.org 域名背后的 IP, 它会询问一个 DNS 服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的 IP。
        7. 
+ 
      7. 现在电脑知道了要请求的 IP 地址，你的浏览器能够与网络服务器交换内容。
        8. 
 
      Explanation of the steps needed to obtain the result to a DNS request
      下一步
      
 
-
      好了,我们讲了许多有关的步骤和结构. 接下来.
      
+
      好了，我们讲了许多有关的步骤和结构。接下来。
      
diff --git a/files/zh-cn/learn/common_questions/what_is_a_url/index.html b/files/zh-cn/learn/common_questions/what_is_a_url/index.html
index 86bfc82cad6771..a77f99fdb040ad 100644
--- a/files/zh-cn/learn/common_questions/what_is_a_url/index.html
+++ b/files/zh-cn/learn/common_questions/what_is_a_url/index.html
@@ -1,21 +1,21 @@
 ---
-title: 什么是URL？
+title: 什么是 URL？
 slug: Learn/Common_questions/What_is_a_URL
 translation_of: Learn/Common_questions/What_is_a_URL
 ---
 
      
-
      本文讨论了统一资源定位符(URL)，并解释了他们是什么，以及如何被构建的。
      
+
      本文讨论了统一资源定位符 (URL)，并解释了他们是什么，以及如何被构建的。
      
 
      
  
   
      前提:首先你得知道 互联网是怎么工作的 并理解 什么是URL。前提：首先你得知道 互联网是怎么工作的 并理解 什么是 URL。
   
      
   
      目标:目标：
    学习域名是什么，域名的工作方式，以及域名的重要性。
   
      
        
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      
-   
+   
-   
-   
+   
+   
      
  
   
      前提:前提：
    你首先需要知道 互联网是如何工作的，什么是网络服务器 以及 网络中超链接的概念。
   
      
   
      目标:你将会学习到 URL是什么，以及它在网络上是如何工作的 。目标：你将会学习到 URL 是什么，以及它在网络上是如何工作的。
   
      
        
 
      
@@ -24,7 +24,7 @@ 
      概述
      
 
 
      和 {{Glossary("Hypertext")}} 以及 {{Glossary("HTTP")}} 一样，URL 是 Web 中的一个核心概念。它是{{Glossary("Browser","浏览器")}}用来检索 web 上公布的任何资源的机制。
      
 
-
      URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 web 服务器的拥有者需要认真地维护资源以及与它关联的URL。
      
+
      URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。而在实际中，也有一些例外，最常见的情况就是一个 URL 指向了不存在的或是被移动过的资源。由于通过 URL 呈现的资源和 URL 本身由 Web 服务器处理，因此 web 服务器的拥有者需要认真地维护资源以及与它关联的 URL。
      
 
 
      自主学习
      
 
@@ -32,9 +32,9 @@ 
      自主学习
      
 
 
      深入探索
      
 
-
      基础：剖析URL
      
+
      基础：剖析 URL
      
 
-
      下面是一些URL的示例：
      
+
      下面是一些 URL 的示例：
      
 
 
      https://developer.mozilla.org
 https://developer.mozilla.org/en-US/docs/Learn/
@@ -42,55 +42,55 @@ 
      基础：剖析URL
      
 
 
      您可以将上面的这些网址输进您的浏览器地址栏来告诉浏览器加载相关联的页面（或资源）。
      
 
-
      一个URL由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个URL为例看看其中最重要的部分：
      
+
      一个 URL 由不同的部分组成，其中一些是必须的，而另一些是可选的。让我们以下面这个 URL 为例看看其中最重要的部分：
      
 
 
      http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
      
 
 
      
  
      Protocol
      
- 
      http 是协议。它表明了浏览器必须使用何种协议。它通常都是HTTP协议或是HTTP协议的安全版，即HTTPS。Web需要它们二者之一，但浏览器也知道如何处理其他协议，比如mailto:（打开邮件客户端）或者 ftp:（处理文件传输），所以当你看到这些协议时，不必惊讶。
      
+ 
      http 是协议。它表明了浏览器必须使用何种协议。它通常都是 HTTP 协议或是 HTTP 协议的安全版，即 HTTPS。Web 需要它们二者之一，但浏览器也知道如何处理其他协议，比如mailto:（打开邮件客户端）或者 ftp:（处理文件传输），所以当你看到这些协议时，不必惊讶。
      
  
      Domaine Name
      
- 
      www.example.com 是域名。 它表明正在请求哪个Web服务器。或者，可以直接使用{{Glossary("IP address")}}, 但是因为它不太方便，所以它不经常在网络上使用。.
      
+ 
      www.example.com 是域名。它表明正在请求哪个 Web 服务器。或者，可以直接使用{{Glossary("IP address")}}, 但是因为它不太方便，所以它不经常在网络上使用。.
      
  
      Port
      
- 
      :80 是端口。 它表示用于访问Web服务器上的资源的技术“门”。如果Web服务器使用HTTP协议的标准端口（HTTP为80，HTTPS为443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。
      
+ 
      :80 是端口。它表示用于访问 Web 服务器上的资源的技术“门”。如果 Web 服务器使用 HTTP 协议的标准端口（HTTP 为 80，HTTPS 为 443）来授予其资源的访问权限，则通常会被忽略。否则是强制性的。
      
  
      Path to the file
      
- 
      /path/to/myfile.html 是网络服务器上资源的路径。在Web的早期阶段，像这样的路径表示Web服务器上的物理文件位置。如今，它主要是由没有任何物理现实的Web服务器处理的抽象。
      
+ 
      /path/to/myfile.html 是网络服务器上资源的路径。在 Web 的早期阶段，像这样的路径表示 Web 服务器上的物理文件位置。如今，它主要是由没有任何物理现实的 Web 服务器处理的抽象。
      
  
      Parameters
      
- 
      ?key1=value1&key2=value2 是提供给网络服务器的额外参数。 这些参数是用 & 符号分隔的键/值对列表。在返回资源之前，Web服务器可以使用这些参数来执行额外的操作。每个Web服务器都有自己关于参数的规则，唯一可靠的方式来知道特定Web服务器是否处理参数是通过询问Web服务器所有者。
      
+ 
      ?key1=value1&key2=value2 是提供给网络服务器的额外参数。这些参数是用 & 符号分隔的键/值对列表。在返回资源之前，Web服务器可以使用这些参数来执行额外的操作。每个Web服务器都有自己关于参数的规则，唯一可靠的方式来知道特定Web服务器是否处理参数是通过询问Web服务器所有者。
      
  
      Anchor
      
- 
      #SomewhereInTheDocument 是资源本身的另一部分的锚点. 锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在HTML文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。值得注意的是，＃后面的部分（也称为片段标识符）从来没有发送到请求的服务器。
      
+ 
      #SomewhereInTheDocument 是资源本身的另一部分的锚点。锚点表示资源中的一种“书签”，给浏览器显示位于该“加书签”位置的内容的方向。例如，在 HTML 文档上，浏览器将滚动到定义锚点的位置;在视频或音频文档上，浏览器将尝试转到锚代表的时间。值得注意的是，＃后面的部分（也称为片段标识符）从来没有发送到请求的服务器。
      
 
      
 
-
      {{Note('这里是关于URLs的 一些额外的部分和一些额外的规则 , 但它们对于普通用户或Web开发者不是非常重要。 你不必担心这个，要构筑和使用完全实用的URLs不必了解这些。')}}
      
+
      {{Note('这里是关于 URLs 的 一些额外的部分和一些额外的规则 , 但它们对于普通用户或 Web 开发者不是非常重要。你不必担心这个，要构筑和使用完全实用的 URLs 不必了解这些。')}}
      
 
-
      你可能想到一个URL类似普通信件的地址：协议代表你要使用的邮政服务，域名是城市或者城镇，端口则像邮政编码；路径代表着你的信件所有递送的大楼；参数则提供额外的信息，如大楼所在单元；最后，锚点表示信件的收件人。
      
+
      你可能想到一个 URL 类似普通信件的地址：协议代表你要使用的邮政服务，域名是城市或者城镇，端口则像邮政编码；路径代表着你的信件所有递送的大楼；参数则提供额外的信息，如大楼所在单元；最后，锚点表示信件的收件人。
      
 
-
      如何使用URL
      
+
      如何使用 URL
      
 
-
      可以直接在浏览器的地址栏里输入任何URL，来获得后台的资源。但是这仅仅是冰山一角。
      
+
      可以直接在浏览器的地址栏里输入任何 URL，来获得后台的资源。但是这仅仅是冰山一角。
      
 
-
       {{Glossary("HTML")}} 语言 — 后续会再来讨论 — 对URLs有大量的使用:
      
+
       {{Glossary("HTML")}} 语言 — 后续会再来讨论 — 对 URLs 有大量的使用：
      
 
 
        
  
      • 为在其他文档中新建链接，用 {{HTMLElement("a")}} ;
        • 
  
      • 为将文档与它的相关资源关联，用各种标签如 {{HTMLElement("link")}} 或 {{HTMLElement("script")}} ;
        • 
  
      • 为显示多媒体如图片 (用 {{HTMLElement("img")}} ), 视频 (用 {{HTMLElement("video")}} ), 声音和音乐 (用 {{HTMLElement("audio")}} ), 等等;
        • 
- 
      • 为显示其他HTML文档，用 {{HTMLElement("iframe")}} .
        • 
+ 
      • 为显示其他 HTML 文档，用 {{HTMLElement("iframe")}} .
        • 
 
      
 
-
      其他大量使用URLs的技术如 {{Glossary("CSS")}} 或 {{Glossary("JavaScript")}}, 这些才是Web的中心。
      
+
      其他大量使用 URLs 的技术如 {{Glossary("CSS")}} 或 {{Glossary("JavaScript")}}, 这些才是 Web 的中心。
      
 
-
      绝对URL和相对URL
      
+
      绝对 URL 和相对 URL
      
 
-
      我们上面看到的是一个绝对的URL，但也有一个叫做相对URL的东西。我们来看看这个区别意味着什么呢？
      
+
      我们上面看到的是一个绝对的 URL，但也有一个叫做相对 URL 的东西。我们来看看这个区别意味着什么呢？
      
 
-
      URL的必需部分在很大程度上取决于使用URL的上下文。在浏览器的地址栏中，网址没有任何上下文，因此您必须提供一个完整的（或绝对的）URL，就像我们上面看到的一样。您不需要包括协议（浏览器默认使用HTTP）或端口（仅当目标Web服务器使用某些异常端口时才需要），但URL的所有其他部分都是必需的。
      
+
      URL 的必需部分在很大程度上取决于使用 URL 的上下文。在浏览器的地址栏中，网址没有任何上下文，因此您必须提供一个完整的（或绝对的）URL，就像我们上面看到的一样。您不需要包括协议（浏览器默认使用 HTTP）或端口（仅当目标 Web 服务器使用某些异常端口时才需要），但 URL 的所有其他部分都是必需的。
      
 
-
      当文档中使用URL时，例如HTML页面中的内容有所不同。因为浏览器已经有文档自己的URL，它可以使用这些信息来填写该文档中可用的任何URL的缺失部分。我们可以通过仅查看URL的路径部分来区分绝对URL和相对URL。如果URL的路径部分以“/”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文。
      
+
      当文档中使用 URL 时，例如 HTML 页面中的内容有所不同。因为浏览器已经有文档自己的 URL，它可以使用这些信息来填写该文档中可用的任何 URL 的缺失部分。我们可以通过仅查看 URL 的路径部分来区分绝对 URL 和相对 URL。如果 URL 的路径部分以“/”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文。
      
 
 
      我们来看一些例子来使这个更清楚。
      
 
-
      绝对URL示例
      
+
      绝对 URL 示例
      
 
 
      
  
      完整网址（与之前使用的网址相同）
      
@@ -101,19 +101,19 @@ 
      绝对URL示例
      
  
      
  
      //developer.mozilla.org/en-US/docs/Learn
      
 
- 
      在这种情况下，浏览器将使用与用于加载该URL的文档相同的协议来调用该URL。
      
+ 
      在这种情况下，浏览器将使用与用于加载该 URL 的文档相同的协议来调用该 URL。
      
  
      
  
      隐去域名
      
  
      
  
      /en-US/docs/Learn
      
 
- 
      这是HTML文档中绝对URL最常见的用例。浏览器将使用与用于加载托管该URL的文档相同的协议和相同的域名。注意：不可能省略该域名而不省略协议。
      
+ 
      这是 HTML 文档中绝对 URL 最常见的用例。浏览器将使用与用于加载托管该 URL 的文档相同的协议和相同的域名。注意：不可能省略该域名而不省略协议。
      
  
      
 
      
 
-
      相对URL示例
      
+
      相对 URL 示例
      
 
-
      为了更好地了解以下示例，我们假设从位于以下URL的文档中调用URL： https://developer.mozilla.org/en-US/docs/Learn
      
+
      为了更好地了解以下示例，我们假设从位于以下 URL 的文档中调用 URL： https://developer.mozilla.org/en-US/docs/Learn
      
 
 
      
  
      子资源
      
@@ -125,15 +125,15 @@ 
      相对URL示例
      
  
      
  
      ../CSS/display
      
 
- 
      在这种情况下，我们使用从UNIX文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器。在这里，我们要达到以下URL：https://developer.mozilla.org/en-US/docs/Learn/../CSS/display，可以将其简化为：https://developer.mozilla.org/en-US/docs/CSS/display
      
+ 
      在这种情况下，我们使用从 UNIX 文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器。在这里，我们要达到以下 URL：https://developer.mozilla.org/en-US/docs/Learn/../CSS/display，可以将其简化为：https://developer.mozilla.org/en-US/docs/CSS/display
      
  
      
 
      
 
 
      语义 URLs
      
 
-
      尽管URL具有非常的技术性，但URL表示一个可读性的网站入口点。它们可以被记住，并且任何人都可以将它们输入浏览器的地址栏。人是Web的核心，因此建立所谓的 semantic URLs 被认为是最佳实践。语义URL使用具有固有含义的单词，任何人都可以理解，无论他们的技术水平如何。
      
+
      尽管 URL 具有非常的技术性，但 URL 表示一个可读性的网站入口点。它们可以被记住，并且任何人都可以将它们输入浏览器的地址栏。人是 Web 的核心，因此建立所谓的 semantic URLs 被认为是最佳实践。语义 URL 使用具有固有含义的单词，任何人都可以理解，无论他们的技术水平如何。
      
 
-
      语言语义当然与电脑无关。您可能经常看到看起来像随机字符混搭的网址。但创建人类可读的URL有很多优点：
      
+
      语言语义当然与电脑无关。您可能经常看到看起来像随机字符混搭的网址。但创建人类可读的 URL 有很多优点：
      
 
 
        
  
      • 操作它们更容易
        • 
diff --git a/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html b/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html
index df2c75c58abfd2..fe82810eabfbc7 100644
--- a/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html
+++ b/files/zh-cn/learn/common_questions/what_is_a_web_server/index.html
@@ -10,11 +10,11 @@
 
-   
+   
-   
+   
@@ -25,19 +25,19 @@ 
        概述
        “网络服务器（Web server）”可以代指硬件或软件，或者是它们协同工作的整体。
          
- 
        1. 硬件部分，一个网络服务器是一台存储了网络服务软件以及网站的组成文件（比如，HTML文档、图片、CSS样式表和JavaScript文件）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
          2. 
- 
        2. 软件部分，网络服务器包括控制网络用户如何访问托管文件的几个部分，至少他要是一台HTTP服务器。一台HTTP服务器是一种能够理解URL（网络地址）和HTTP（浏览器用来查看网页的协议）的软件。通过服务器上存储的网站的域名（比如mozilla.org）可以访问这个服务器，并且他还可以将他的内容分发给最终用户的设备。
          3. 
+ 
        3. 硬件部分，一个网络服务器是一台存储了网络服务软件以及网站的组成文件（比如，HTML 文档、图片、CSS 样式表和 JavaScript 文件）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
          4. 
+ 
        4. 软件部分，网络服务器包括控制网络用户如何访问托管文件的几个部分，至少他要是一台 HTTP 服务器。一台 HTTP 服务器是一种能够理解 URL（网络地址）和 HTTP（浏览器用来查看网页的协议）的软件。通过服务器上存储的网站的域名（比如 mozilla.org）可以访问这个服务器，并且他还可以将他的内容分发给最终用户的设备。
          5. 
 
        
 
-
        基本上，当浏览器需要一个托管在网络服务器上的文件的时候，浏览器通过HTTP请求这个文件。当这个请求到达正确的网络服务器（硬件）时，HTTP服务器（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个404响应）， 并把这个文档通过HTTP发送给浏览器。
        
+
        基本上，当浏览器需要一个托管在网络服务器上的文件的时候，浏览器通过 HTTP 请求这个文件。当这个请求到达正确的网络服务器（硬件）时，HTTP 服务器（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个 404 响应），并把这个文档通过 HTTP 发送给浏览器。
        Basic representation of a client/server connection through HTTP
        要发布一个网站，你需要一个静态或动态的服务器。
        
 
-
        静态网络服务器（static web server），或者堆栈，由一个计算机（硬件）和一个 HTTP 服务器（软件）组成。我们称它为 “静态” 是因为这个服务器把它托管文件的 “保持原样” 地传送到你的浏览器。
        
+
        静态网络服务器（static web server），或者堆栈，由一个计算机（硬件）和一个 HTTP 服务器（软件）组成。我们称它为“静态”是因为这个服务器把它托管文件的“保持原样”地传送到你的浏览器。
        
 
-
        动态网络服务器（dynamic web server） 由一个静态的网络服务器加上额外的软件组成，最普遍的是一个应用服务器 [application server] 和一个数据库 [database]。我们称它为 “动态” 是因为这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新。
        
+
        动态网络服务器（dynamic web server） 由一个静态的网络服务器加上额外的软件组成，最普遍的是一个应用服务器 [application server] 和一个数据库 [database]。我们称它为“动态”是因为这个应用服务器会在通过 HTTP 服务器把托管文件传送到你的浏览器之前会对这些托管文件进行更新。
        举个例子，要生成你在浏览器中看到的最终网页，应用服务器或许会用一个数据库中的内容填充一个 HTML 模板。网站像 MDN 或者维基百科 [Wikipedia] 有成千上万的网页，但是它们不是真正的 HTML 文档，它们只是少数的 HTML 模板以及一个巨大的数据库。这样的设置让它更快更简单地维护以及分发内容。
        
 
@@ -51,7 +51,7 @@ 
        深入探索
        托管文件
        
 
-
        一个网络服务器首先需要存储这个网站的文件，也就是说所有的 HTML 文档和它们的相关资源 （related assets），包括图片，CSS 样式表，JavaScript 文件，字形 （fonts） 以及影像。
        
+
        一个网络服务器首先需要存储这个网站的文件，也就是说所有的 HTML 文档和它们的相关资源（related assets），包括图片，CSS 样式表，JavaScript 文件，字形（fonts） 以及影像。
        严格来说，你可以在你自己的计算机上托管所有的这些文件，但是在一个专用的网络服务器上存储它们会方便得多，因为它
        
 
@@ -62,19 +62,19 @@ 
        托管文件
      • 由一个第三方提供者维护
        • 
 
-
        因为所有的这些原因，寻找一个优秀的托管提供者是建立你的网站的一个重要部分。比较不同公司提供的服务并选择一个适合你的需求和预算的服务（服务的价格从免费到每月上万美金不等）。你可以在这篇文章 （article）中找到更多的细节。
        
+
        因为所有的这些原因，寻找一个优秀的托管提供者是建立你的网站的一个重要部分。比较不同公司提供的服务并选择一个适合你的需求和预算的服务（服务的价格从免费到每月上万美金不等）。你可以在这篇文章（article）中找到更多的细节。
        一旦你设置好一个网络托管解决方案，你只需要去上传你的文件到你的网络服务器 [upload your files to your web server]。
        
 
-
        通过HTTP交流
        
+
        通过 HTTP 交流
        
 
-
        第二点，一个网络服务器提供了 {{Glossary("HTTP")}}（超文本传输协议）支持。正如它的名字暗示，HTTP 明确提出了如何在两台计算机间传输超文本（比如说链接的网络文档 （linked web documents））。
        
+
        第二点，一个网络服务器提供了 {{Glossary("HTTP")}}（超文本传输协议）支持。正如它的名字暗示，HTTP 明确提出了如何在两台计算机间传输超文本（比如说链接的网络文档（linked web documents））。
        
 
-
        一个协议（{{Glossary("Protocol")}}）是一套为了在两台计算机间交流而制定的规则。 HTTP 是一个文本化的 （textual），无状态的 （stateless）协议。
        
+
        一个协议（{{Glossary("Protocol")}}）是一套为了在两台计算机间交流而制定的规则。 HTTP 是一个文本化的（textual），无状态的（stateless）协议。
        
  
        文本化
        
- 
        所有的命令都是纯文本的 （plain-text） 和人类可读的 （human-readable）。
        
+ 
        所有的命令都是纯文本的（plain-text） 和人类可读的（human-readable）。
        
  
        无状态
        
  
        无论是服务器还是客户都不会记住之前的交流。举个例子，仅依靠 HTTP，一个服务器不能记住你输入的密码或者你正处于业务中的哪一步。你需要一个应用服务器来进行这样的工作。（我们会在日后的文章中涵盖这类的技术。）
        
 
        
@@ -82,24 +82,24 @@ 
        通过HTTP交流
        HTTP 为客户和服务器间的如何沟通提供清晰的规则。我们会在日后的一篇技术文章 中覆盖 HTTP 本身。就目前而言，只需要知道这几点：
          
- 
        • 只有用户可以制定 HTTP 请求，然后只会发送到服务器。服务器只能响应客户端的HTTP请求。
          • 
+ 
        • 只有用户可以制定 HTTP 请求，然后只会发送到服务器。服务器只能响应客户端的 HTTP 请求。
          • 
  
        • 当通过 HTTP 请求一个文件时，客户必须提供这个文件的{{Glossary("URL")}}。
          • 
  
        • 网络服务器必须应答每一个 HTTP 请求，至少也要回复一个错误信息。
          • 
 
        
 
-
        The MDN 404 page as an example of such error page在一个网络服务器上，HTTP服务器负责处理和应答传入的请求。
        
+
        The MDN 404 page as an example of such error page在一个网络服务器上，HTTP 服务器负责处理和应答传入的请求。
          
- 
        1. 当收到一个请求时， HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。
          2. 
+ 
        2. 当收到一个请求时，HTTP 服务器首先要检查所请求的 URL 是否与一个存在的文件相匹配。
          3. 
  
        3. 如果是，网络服务器会传送文件内容回到浏览器。如果不是，一个应用服务器会建立必要的文件。
          4. 
- 
        4. 如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是 “404 未找到” ["404 Not Found"]。（这错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面 [404 error pages]。）
          5. 
+ 
        5. 如果两种处理都不可能，网络服务器会返回一个错误信息到浏览器，最常见的是“404 未找到” ["404 Not Found"]。（这错误太常见以至于很多网页设计者花费许多时间去设计 404 错误页面 [404 error pages]。）
          6. 
 
        静态和动态内容
        
 
-
        粗略地说，一个服务器可以提供静态或者动态的内容。“静态” 意味着 “保持原样地提供”。静态的网站是最容易建立的，所以我们建议你制作一个静态的网站作为你的第一个网站。
        
+
        粗略地说，一个服务器可以提供静态或者动态的内容。“静态”意味着“保持原样地提供”。静态的网站是最容易建立的，所以我们建议你制作一个静态的网站作为你的第一个网站。
        
 
-
        “动态” 意味着服务器会处理内容甚至实时地从一个数据库中产生它。这个解决方案提供了更多的灵活性，但是技术堆栈变得更难去处理，让建立网站更惊人地复杂。
        
+
        “动态”意味着服务器会处理内容甚至实时地从一个数据库中产生它。这个解决方案提供了更多的灵活性，但是技术堆栈变得更难去处理，让建立网站更惊人地复杂。
        以你正在阅读的页面为例子。在正在托管它的网络服务器里，有一个应用服务器会从数据库提取文章内容，安排它的布局，把它放置在一些 HTML 模板中，然后为你传输结果。在这里，这个应用服务器叫做 Kuma 并且是由 Python （使用 Django 构架) 构建的。Mozilla 团队为了 MDN 的特殊要求开发 Kuma，但是这里有很多相似的建立在很多其他技术之上的应用。
        
 
diff --git a/files/zh-cn/learn/common_questions/what_is_accessibility/index.html b/files/zh-cn/learn/common_questions/what_is_accessibility/index.html
index 4786f4535652e5..e5c1dd52255c8f 100644
--- a/files/zh-cn/learn/common_questions/what_is_accessibility/index.html
+++ b/files/zh-cn/learn/common_questions/what_is_accessibility/index.html
@@ -4,17 +4,17 @@
 translation_of: Learn/Common_questions/What_is_accessibility
 ---
 
        
-
        本文介绍了Web可访问性背后的一些基本概念。
        
+
        本文介绍了 Web 可访问性背后的一些基本概念。
        
 
        
  
   
        前提:前提：
    您应该已经知道 互联网是怎么工作的，并且了解网页，网站，网络服务器和搜索引擎的区别是什么
   
        
   
        目标:目标：
    了解网络服务器，明白它大概的工作原理
   
        
          
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
        
-   
+   
-   
+   
@@ -30,13 +30,13 @@ 
        自主学习
        深入探索
        
 
-
        可访问性: 一般原则
        
+
        可访问性：一般原则
        We might associate accessibility at first with negative limitations. This building has to be accessible, so it must follow these regulations for door width and toilet size and elevator placement.
        That's a narrow way to think of accessibility. Think of it as a wonderful way to empower people and serve more customers. What can the people in Brazil do with your English website? Can the people with smartphones browse a heavy, cluttered website designed for a large desktop monitor and unlimited bandwidth? They'll go somewhere else. In general, we must think about our product from the viewpoints of all our target customers, and adapt accordingly. Hence accessibility.
        
 
-
        Web可访问性
        
+
        Web 可访问性
        In the specific context of the web, accessibility means that anyone can benefit from your content, regardless of disability, location, technical limitations, or other circumstances.
        
 
@@ -54,7 +54,7 @@ 
        Web可访问性
        Let the user tab into/out of a video, play it, and pause it without being trapped in it.
        
 
-
        Web可访问性基础
        
+
        Web 可访问性基础
        A few necessities for basic Web accessibility include:
        
 
diff --git a/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html b/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html
index 0fb33ca670f199..4a6282b9f4c4c7 100644
--- a/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html
+++ b/files/zh-cn/learn/common_questions/what_software_do_i_need/index.html
@@ -134,7 +134,7 @@ 
        下一步
         
        
diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html
index 15bc58c87d9c0e..47c8b876b94047 100644
--- a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html
+++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html
@@ -18,7 +18,7 @@
   
-   
+   
        
  
   
        前提:前提：
    无
   
        
   
        目标:目标：
    学习可访问性，了解其重要性
   
        
          
 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
   
        
    目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。测试对 CSS 盒模型和其他盒相关特性的掌握程度，比如背景和边框。
   
        
          
 
        
@@ -32,17 +32,17 @@ 
        起点
        
 
      
 
 
      
-
      提醒：或者你也可以用JSBin或Glitch这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。
      
+
      提醒：或者你也可以用JSBin或Glitch这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的<style>元素里就好。
      
 
      
 
 
      项目简介
      
 
-
      你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。
      
+
      你的任务是创建一个酷炫的盒子，并探索 CSS 的乐趣。
      
 
 
      一般任务
      
 
 
        
- 
      • 把CSS链接到HTML里。
        • 
+ 
      • 把 CSS 链接到 HTML 里。
        • 
 
      
 
 
      样式化盒子
      
@@ -50,16 +50,16 @@ 
      样式化盒子
      
 
      给{{htmlelement("p")}}添加样式：
      
 
 
        
- 
      • 一个对于大按钮来说合理的宽度，200像素左右。
        • 
+ 
      • 一个对于大按钮来说合理的宽度，200 像素左右。
        • 
  
      • 一个对于大按钮来说合理的高度，并使文本纵向居中。
        • 
  
      • 居中文本。
        • 
- 
      • 用rem使字体稍大一点，大约17-18像素，在注释里说说你的值是怎么算出来的。
        • 
+ 
      • 用rem使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。
        • 
  
      • 给你的设计定一个基础颜色，把它作为盒子的背景颜色。
        • 
  
      • 把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。
        • 
  
      • 一个精巧的圆角边框。
        • 
- 
      • 一个跟基础颜色相近、1像素宽的实线边框，颜色要稍深一点。
        • 
- 
      • 一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在30%的处渐变到0.2的不透明度，然后保持相同颜色到最后。
        • 
- 
      • 多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的3D外观。
        • 
+ 
      • 一个跟基础颜色相近、1 像素宽的实线边框，颜色要稍深一点。
        • 
+ 
      • 一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在 30% 的处渐变到 0.2 的不透明度，然后保持相同颜色到最后。
        • 
+ 
      • 多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的 3D 外观。
        • 
 
      
 
 
      范例
      
@@ -70,7 +70,7 @@ 
      范例
      
 
 
      评估
      
 
-
      如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
      
+
      如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC 频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
      
 
 
      {{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
      
 
diff --git a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html
index 2d0c21dccfcfb2..80286baad7bd4c 100644
--- a/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html
+++ b/files/zh-cn/learn/css/building_blocks/advanced_styling_effects/index.html
@@ -13,24 +13,24 @@
  
   
    预备知识：
-   HTML 基础(学习 Introduction to HTML) ，了解CSS工作原理 (学习 Introduction to CSS.)
+   HTML 基础 (学习 Introduction to HTML) ，了解 CSS 工作原理 (学习 Introduction to CSS.)
   
   
    目标：
-   要了解如何使用高级的盒子效果，并了解一些在CSS语言中出现的新样式工具。
+   要了解如何使用高级的盒子效果，并了解一些在 CSS 语言中出现的新样式工具。
   
  
 
 
 
      盒子阴影
      
 
-
      回到我们的样式化文本模块，我们查看了{{cssxref("text-shadow")}}属性，它允许您将一个或多个阴影应用到元素的文本上。对于盒子来说，存在一个等价的属性——{{cssxref("box-shadow")}}允许您将一个或多个阴影应用到一个实际的元素盒子中。和文本阴影一样，盒子的阴影在各种浏览器中也得到了很好的支持，但只有在IE9+（IE9及更新版本）中可用。你的旧IE版本的用户可能只需要应付没有阴影的情况，所以只要测试一下你的设计，确保你的内容在没有他们的情况下是清晰可见的。
      
+
      回到我们的样式化文本模块，我们查看了{{cssxref("text-shadow")}}属性，它允许您将一个或多个阴影应用到元素的文本上。对于盒子来说，存在一个等价的属性——{{cssxref("box-shadow")}}允许您将一个或多个阴影应用到一个实际的元素盒子中。和文本阴影一样，盒子的阴影在各种浏览器中也得到了很好的支持，但只有在 IE9+（IE9 及更新版本）中可用。你的旧 IE 版本的用户可能只需要应付没有阴影的情况，所以只要测试一下你的设计，确保你的内容在没有他们的情况下是清晰可见的。
      
 
 
      你可以 box-shadow.html在这部分找到例子 (见源码)。
      
 
 
      一个简单的盒子阴影
      
 
-
      让我们看一个简单的例子来起步。首先,一些HTML：
      
+
      让我们看一个简单的例子来起步。首先，一些 HTML：
      
 
 
      <article class="simple">
   <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
@@ -57,11 +57,11 @@ 
      一个简单的盒子阴影
      
 
 
      {{ EmbedLiveSample('一个简单的盒子阴影', '100%', 100) }}
      
 
-
      你会看到，我们在box-shadow属性值中有4个项：
      
+
      你会看到，我们在box-shadow属性值中有 4 个项：
      
 
 
        
- 
      1. 第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
        2. 
- 
      2. 第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
        3. 
+ 
      3. 第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移 (如果值为负的话则为左)。
        4. 
+ 
      4. 第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离 (或向上，如果值为负)。
        5. 
  
      5. 第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。
        6. 
  
      6. 颜色值是阴影的基本颜色（base color）。
        7. 
 
      
@@ -112,7 +112,7 @@ 
      其他盒子阴影特点
      
 
 
      与{{cssxref("text-shadow")}}不同，{{cssxref("box-shadow")}}有一个inset关键字可用——把它放在一个影子声明的开始，使它变成一个内部阴影，而不是一个外部阴影。让我们看一看。
      
 
-
      首先，我们将为这个例子使用一些不同的HTML：
      
+
      首先，我们将为这个例子使用一些不同的 HTML：
      
 
 
      <button>Press me!</button>
      
 
@@ -144,17 +144,17 @@ 
      其他盒子阴影特点
      
 
 
      在这里我们将focus/hover/active这些声明一起设置了按钮样式。这个按钮的默认状态下设置了一个简单的黑色盒阴影，并且加上了一对inset阴影，一个明的，一个暗的，位于按钮的两个对角上，以此给按钮一种很棒的阴影效果。
      
 
-
      当按钮被按下时，这里的active声明将第一个盒阴影换成一个非常暗的inset阴影。给人一种按钮被按下的样子。
      
+
      当按钮被按下时，这里的 active 声明将第一个盒阴影换成一个非常暗的 inset 阴影。给人一种按钮被按下的样子。
      
 
 
      
-
      注意: 还有一个可以在box-shadow中设置的值 — 另外一个位于颜色值前面可选的长度值，即spread radius，如果设置了这个值，将会导致阴影变得比原始的阴影更大，这个值不是很常用，但是值得一提。
      
+
      注意: 还有一个可以在 box-shadow 中设置的值 — 另外一个位于颜色值前面可选的长度值，即spread radius，如果设置了这个值，将会导致阴影变得比原始的阴影更大，这个值不是很常用，但是值得一提。
      
 
      
 
 
      Filters（滤镜）
      
 
-
      CSS滤镜提供了一种过滤元素的方法，就好比你在诸如Photoshop这样的平面设计程序中过滤元素一样。有大量的不同的选项可以使用，你可以在{{cssxref("filter")}} 参考页面阅读所有相关的更多细节。在这篇文章中，我们将会向你介绍它的语法，并且向你展示将会发生多么有趣的结果。
      
+
      CSS 滤镜提供了一种过滤元素的方法，就好比你在诸如 Photoshop 这样的平面设计程序中过滤元素一样。有大量的不同的选项可以使用，你可以在{{cssxref("filter")}} 参考页面阅读所有相关的更多细节。在这篇文章中，我们将会向你介绍它的语法，并且向你展示将会发生多么有趣的结果。
      
 
-
      基本上，滤镜可以应用在任何元素上，块元素（block）或者行内元素（inline）——你只需要使用filter属性，并且给他一个特定的过滤函数的值。有些可用的滤镜选项和其他CSS特性做的事情十分相似，例如drop-shadow()的工作方式以及产生的效果和 {{cssxref("box-shadow")}} 或{{cssxref("text-shadow")}}十分相似。然而滤镜真正出色的地方在于，它们作用于盒（box）内内容（content）的确切形状，而不仅仅将盒子本身作为一个大的块，这看起来会更棒，即使他们可能不会总是变成你想要的模样。让我们来举一个简单的例子来阐明我们的意思：
      
+
      基本上，滤镜可以应用在任何元素上，块元素（block）或者行内元素（inline）——你只需要使用filter属性，并且给他一个特定的过滤函数的值。有些可用的滤镜选项和其他 CSS 特性做的事情十分相似，例如drop-shadow()的工作方式以及产生的效果和 {{cssxref("box-shadow")}} 或{{cssxref("text-shadow")}}十分相似。然而滤镜真正出色的地方在于，它们作用于盒（box）内内容（content）的确切形状，而不仅仅将盒子本身作为一个大的块，这看起来会更棒，即使他们可能不会总是变成你想要的模样。让我们来举一个简单的例子来阐明我们的意思：
      
 
 
      首先，一些简单的 HTML:
      
 
@@ -163,7 +163,7 @@ 
      Filters（滤镜）
      
 <p class="box-shadow">Box shadow</p>
 
      
 
-
      现在是一些CSS,用来给它们各自一个下降的阴影:
      
+
      现在是一些 CSS，用来给它们各自一个下降的阴影：
      
 
 
      p {
   margin: 1rem auto;
@@ -181,17 +181,17 @@ 
      Filters（滤镜）
      
   box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
 }
      
 
-
      这给了我们一个如下的结果:
      
+
      这给了我们一个如下的结果：
      
 
 
      {{ EmbedLiveSample('Filters（滤镜）', '100%', 200) }}
      
 
-
      正如你所看到的, drop-shadow滤镜跟随着文本和border dashes的确切形状。而盒阴影（box-shadow）仅仅跟随着盒的四方。
      
+
      正如你所看到的，drop-shadow 滤镜跟随着文本和 border dashes 的确切形状。而盒阴影（box-shadow）仅仅跟随着盒的四方。
      
 
-
      其他需要注意的事:
      
+
      其他需要注意的事：
      
 
 
        
- 
      • 滤镜很新——它们可以被大多数的现代的浏览器支持，包括Microsoft Edge，但它们一点也不能被IE浏览器支持。因此如果你在你的设计中使用滤镜，你需要确保你的内容即使没有滤镜也是可用的。
        • 
- 
      • 你会看到我们在filter属性中通过-webkit-前缀包含了一个版本信息，这被称为一个 {{glossary("Vendor Prefix")}}，有时会被浏览器使用，以在一个新特性完整实现之前，当它与无前缀版本没有冲突的时候支持并实验这个特性。Vendor prefixes永远都不被指望着被web开发人员使用，但是它们有时候确实会被在产品页面中使用，即当实验性的特性确实被需要时。在这个实例中，Chrome/Safari/Opera 目前要求这些属性的-webkit-版本，而Edge 和 Firefox则使用后者，无前缀版本。
        • 
+ 
      • 滤镜很新——它们可以被大多数的现代的浏览器支持，包括 Microsoft Edge，但它们一点也不能被 IE 浏览器支持。因此如果你在你的设计中使用滤镜，你需要确保你的内容即使没有滤镜也是可用的。
        • 
+ 
      • 你会看到我们在filter属性中通过-webkit-前缀包含了一个版本信息，这被称为一个 {{glossary("Vendor Prefix")}}，有时会被浏览器使用，以在一个新特性完整实现之前，当它与无前缀版本没有冲突的时候支持并实验这个特性。Vendor prefixes 永远都不被指望着被 web 开发人员使用，但是它们有时候确实会被在产品页面中使用，即当实验性的特性确实被需要时。在这个实例中，Chrome/Safari/Opera 目前要求这些属性的-webkit-版本，而 Edge 和 Firefox 则使用后者，无前缀版本。
        • 
 
      
 
 
      
@@ -202,19 +202,19 @@ 
      Filters（滤镜）
      
 
 
      Blend modes（混合模式）
      
 
-
      CSS混合模式允许我们为元素添加一个混合模式 ，以当两个元素重叠时，指定一个混合的效果——最终每个像素所展示的颜色将会是原来像素中颜色和其下面一层相组合之后的结果，对于像Photoshop这样的图形程序的用户来说，混合模式应该也非常熟悉。
      
+
      CSS 混合模式允许我们为元素添加一个混合模式，以当两个元素重叠时，指定一个混合的效果——最终每个像素所展示的颜色将会是原来像素中颜色和其下面一层相组合之后的结果，对于像 Photoshop 这样的图形程序的用户来说，混合模式应该也非常熟悉。
      
 
-
      这里有两个在 CSS中用到的属性:
      
+
      这里有两个在 CSS 中用到的属性：
      
 
 
        
  
      • {{cssxref("background-blend-mode")}}, 用来将单个元素的多重背景图片和背景颜色设置混合在一起。
        • 
- 
      • {{cssxref("mix-blend-mode")}}, 用来将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容(content)混合在一起。
        • 
+ 
      • {{cssxref("mix-blend-mode")}}, 用来将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容 (content) 混合在一起。
        • 
 
      
 
 
      你可以找到比这里用到的更多的例子，在我们的blend-modes.html 示例页面 (查看 source code), 或者在 {{cssxref("<blend-mode>")}} 参考页面。
      
 
 
      
-
      注意: 混合模式（Blend modes ）同样也很新，而且略微不如滤镜（filter）的被支持度。至今也没有没Edge支持， 并且 Safari 也仅仅支持部分混合模式选项。
      
+
      注意: 混合模式（Blend modes）同样也很新，而且略微不如滤镜（filter）的被支持度。至今也没有没 Edge 支持，并且 Safari 也仅仅支持部分混合模式选项。
      
 
      
 
 
      background-blend-mode
      
@@ -268,7 +268,7 @@ 
      mix-blend-mode
      
   </div>
 </article>
      
 
-
      这是我们将用来装饰它的CSS:
      
+
      这是我们将用来装饰它的 CSS:
      
 
 
      article {
   width: 300px;
@@ -317,14 +317,14 @@ 
      mix-blend-mode
      
 
 
      -webkit-background-clip: text
      
 
-
      另一个我们认为在继续之前会提到的新特性(目前支持Chrome、Safari和Opera,和在Firefox正在实现)是{{cssxref("background-clip")}}的 text 值。当与专有 -webkit-text-fill-color: transparent; 特性一起使用时，这允许您将背景图像剪贴到元素文本的形状，从而产生一些不错的效果。这不是一个正式的标准，但是已经在多个浏览器中实现了，因为它很流行，并且被开发人员广泛使用。在这种情况下，这两种属性都需要一个-webkit-供应商前缀，甚至对于非webkit/Chrome-based的浏览器来说也是如此。
      
+
      另一个我们认为在继续之前会提到的新特性 (目前支持 Chrome、Safari 和 Opera，和在 Firefox 正在实现) 是{{cssxref("background-clip")}}的 text 值。当与专有 -webkit-text-fill-color: transparent; 特性一起使用时，这允许您将背景图像剪贴到元素文本的形状，从而产生一些不错的效果。这不是一个正式的标准，但是已经在多个浏览器中实现了，因为它很流行，并且被开发人员广泛使用。在这种情况下，这两种属性都需要一个-webkit-供应商前缀，甚至对于非 webkit/Chrome-based 的浏览器来说也是如此。
      
 
 
      .text-clip {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
      
 
-
      那么为什么其他浏览器会实现一个-webkit-前缀？主要是为了浏览器兼容性——许多web开发人员已经开始使用-webkit-前缀来实现web站点，它开始看起来像其他的浏览器一样被破坏了，而实际上他们遵循的是标准。因此，他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的CSS特性的危险——这不仅会导致浏览器兼容性问题，而且还会发生变化，因此你的代码随时可能崩溃。坚持标准要好得多。
      
+
      那么为什么其他浏览器会实现一个-webkit-前缀？主要是为了浏览器兼容性——许多 web 开发人员已经开始使用-webkit-前缀来实现 web 站点，它开始看起来像其他的浏览器一样被破坏了，而实际上他们遵循的是标准。因此，他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的 CSS 特性的危险——这不仅会导致浏览器兼容性问题，而且还会发生变化，因此你的代码随时可能崩溃。坚持标准要好得多。
      
 
 
      如果您确实希望在您的生产工作中使用这些特性，请确保在浏览器中进行彻底的测试，并检查这些特性不工作的地方，站点仍然可用。
      
 
@@ -332,7 +332,7 @@ 
      -webkit-background-clip: text
      
 
      注意：对于一个完整的-webkit-background-clip: text代码示例，见background-clip-text.html（也可以见源码）。
      
 
    
 
-
    自主学习:尝试一些效果
    
+
    自主学习：尝试一些效果
    
 
 
    现在轮到你了。对于这种自主学习，我们希望您使用下面所提供的代码来试验上面所读到的一些效果。
    
 
@@ -398,6 +398,6 @@ 
    Playable code
    
 
 
    总结
    
 
-
    我们希望这篇文章被证明是很有趣的——玩着闪亮的玩具通常是很有趣的，而且看看什么样的工具在尖端的浏览器中是可以得到的是我们很感兴趣的。您已经到达了样式盒文章的末尾，因此，接下来您将通过我们的评估来测试您的box syling技能。
    
+
    我们希望这篇文章被证明是很有趣的——玩着闪亮的玩具通常是很有趣的，而且看看什么样的工具在尖端的浏览器中是可以得到的是我们很感兴趣的。您已经到达了样式盒文章的末尾，因此，接下来您将通过我们的评估来测试您的 box syling 技能。
    
 
 
    {{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
    
diff --git a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html
index 5bf5e8b8f0c668..152c23de12e911 100644
--- a/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/zh-cn/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -5,13 +5,13 @@
 ---
 
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
    
 
-
    在这节课中，我们来看看，使用CSS背景和边框来做一些，具有一些创造性的事情。渐变、背景图像和圆角，背景和边框的巧妙运用是CSS中许多样式问题的答案。
    
+
    在这节课中，我们来看看，使用 CSS 背景和边框来做一些，具有一些创造性的事情。渐变、背景图像和圆角，背景和边框的巧妙运用是 CSS 中许多样式问题的答案。
    
 
 
-   
+   
@@ -20,7 +20,7 @@
  
    
  
   
    
    预备知识：基本的计算机知识，安装基本的软件，文件处理基本知识, HTML基础知识  (如果不了解HTML，请移步 学习HTML入门)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 学习CSS第一步.)基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识  (如果不了解 HTML，请移步 学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果不了解 CSS，请移步 学习 CSS 第一步.)
   
    
   
    
    目标：
    
 
    
 
-
    CSS的背景样式
    
+
    CSS 的背景样式
    
 
 
    CSS {{cssxref("background")}}属性是我们将在本课中学习的许多普通背景属性的简写。如果您在样式表中发现了一个复杂的背景属性，可能会觉得难以理解，因为可以同时传入这么多值。
    
 
@@ -30,13 +30,13 @@ 
    CSS的背景样式
    
 } 
 
    
 
-
    在本教程的后面部分，我们将返回到简写的工作方式，但是首先，我们通过分开使用各个普通背景属性的方式，看一下在CSS中使用背景可以做哪些不同的事情。
    
+
    在本教程的后面部分，我们将返回到简写的工作方式，但是首先，我们通过分开使用各个普通背景属性的方式，看一下在 CSS 中使用背景可以做哪些不同的事情。
    
 
 
    背景颜色
    
 
-
    {{cssxref("background-color")}}属性定义了CSS中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。
    
+
    {{cssxref("background-color")}}属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的<color>值。背景色扩展到元素的内容和内边距的下面。
    
 
-
    在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading和{{htmlelement("span")}}元素。
    
+
    在下面的示例中，我们使用了各种颜色值来为元素盒子添加背景颜色：heading 和{{htmlelement("span")}}元素。
    
 
 
    尝试修改为任何可用的 <color> 值。
    
 
@@ -50,11 +50,11 @@ 
    背景图片
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}
    
 
-
    如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个background-color属性，看看效果如何。
    
+
    如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加一个 background-color 属性，看看效果如何。
    
 
 
    控制背景平铺
    
 
-
    {{cssxref("background-repeat")}}属性用于控制图像的平铺行为。可用的值是:
    
+
    {{cssxref("background-repeat")}}属性用于控制图像的平铺行为。可用的值是：
    
 
 
      
  
    • no-repeat — 不重复。
      • 
@@ -63,7 +63,7 @@ 
      控制背景平铺
      
  
    • repeat — 在两个方向重复。
      • 
 
    
 
-
    在下面的示例中尝试这些值。我们已经将值设置为no-repeat，因此您将只能看到一个星星。尝试不同的值—repeat-x和repeat-y—看看它们的效果如何。
    
+
    在下面的示例中尝试这些值。我们已经将值设置为 no-repeat，因此您将只能看到一个星星。尝试不同的值—repeat-x 和 repeat-y—看看它们的效果如何。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}
    
 
@@ -71,7 +71,7 @@ 
    调整背景图像的大小
    
 
 
    在上面的例子中，我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 {{cssxref("background-size")}}属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
    
 
-
    你也可以使用关键字:
    
+
    你也可以使用关键字：
    
 
 
      
  
    • cover —浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
      • 
@@ -85,22 +85,22 @@ 
      调整背景图像的大小
      
 
        
  
      • 改变用于修改背景大小的长度单位。
        • 
  
      • 去掉长度单位，看看使用background-size: cover or background-size: contain会发生什么。
        • 
- 
      • 如果您的图像小于盒子，您可以更改background-repeat的值来重复图像。
        • 
+ 
      • 如果您的图像小于盒子，您可以更改 background-repeat 的值来重复图像。
        • 
 
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}
      
 
 
      背景图像定位
      
 
-
      {{cssxref("background-position")}}属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是(0,0)，框沿着水平(x)和垂直(y)轴定位。
      
+
      {{cssxref("background-position")}}属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中，框的左上角是 (0,0)，框沿着水平 (x) 和垂直 (y) 轴定位。
      
 
 
      
-
      注意：默认的背景位置值是(0,0)。
      
+
      注意：默认的背景位置值是 (0,0)。
      
 
      
 
 
      最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值。
      
 
-
      你可以使用像top和right这样的关键字(在{{cssxref("background-image")}}页面上查找其他的关键字):
      
+
      你可以使用像top和right这样的关键字 (在{{cssxref("background-image")}}页面上查找其他的关键字):
      
 
 
      .box {
   background-image: url(star.png);
@@ -126,7 +126,7 @@ 
      背景图像定位
      
   background-position: top 20px;
 }
      
 
-
      最后，您还可以使用4-value语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的CSS中，我们将背景从顶部调整20px，从右侧调整10px:
      
+
      最后，您还可以使用 4-value 语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景从顶部调整 20px，从右侧调整 10px:
      
 
 
      .box {
   background-image: url(star.png);
@@ -146,7 +146,7 @@ 
      渐变背景
      
 
 
      当渐变用于背景时，也可以使用像图像一样的{{cssxref("background-image")}}属性设置。
      
 
-
      您可以在MDN的<gradient>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用web上可用的许多CSS渐变生成器之一，比如这个 。您可以创建一个渐变，然后复制并粘贴生成它的源代码。
      
+
      您可以在 MDN 的<gradient>数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣方法是，使用 web 上可用的许多 CSS 渐变生成器之一，比如这个 。您可以创建一个渐变，然后复制并粘贴生成它的源代码。
      
 
 
      在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性梯度，它延伸到整个盒子上，还有一个径向梯度，它有一个固定的大小，因此会重复。
      
 
@@ -170,7 +170,7 @@ 
      多个背景图像
      
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;
      
 
-
      不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的image1的background-repeat值将是no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3将被赋予第一个位置值，image4将被赋予第二个位置值。
      
+
      不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 image1 的 background-repeat 值将是 no-repeat。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环—在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环—image3 将被赋予第一个位置值，image4 将被赋予第二个位置值。
      
 
 
      我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。
      
 
@@ -178,30 +178,30 @@ 
      多个背景图像
      
 
 
      背景附加
      
 
-
      另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由{{cssxref("background-attachment")}}属性控制的，它可以接受以下值:
      
+
      另一个可供选择的背景是指定他们如何滚动时，内容滚动。这是由{{cssxref("background-attachment")}}属性控制的，它可以接受以下值：
      
 
 
        
  
      • scroll: 使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
        • 
  
      • fixed: 使元素的背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
        • 
- 
      • local: 这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。
        • 
+ 
      • local: 这个值是后来添加的 (它只在 Internet Explorer 9+中受支持，而其他的在 IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。
        • 
 
      
 
 
      {{cssxref("background-attachment")}}属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 background-attachment.html (或者看看这儿的 源代码))。
      
 
-
      使用background 的简写
      
+
      使用 background 的简写
      
 
 
      正如我在本课开始时提到的，您将经常看到使用{{cssxref("background")}}属性指定的背景。这种简写允许您一次设置所有不同的属性。
      
 
 
      如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的例子中，我们有一个渐变，它指定大小和位置，然后是一个无重复的图像背景，它指定位置，然后是一个颜色。
      
 
-
      这里有一些规则，需要在简写背景属性时遵循，例如:
      
+
      这里有一些规则，需要在简写背景属性时遵循，例如：
      
 
 
        
  
      • background-color 只能在逗号之后指定。
        • 
  
      • background-size 值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。
        • 
 
      
 
-
      查看{{cssxref("background")}}的MDN页面，以查看所有的注意事项。
      
+
      查看{{cssxref("background")}}的 MDN 页面，以查看所有的注意事项。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}
      
 
@@ -209,17 +209,17 @@ 
      背景的可访问性考虑
      
 
 
      当你把文字放在背景图片或颜色上面时，你应该注意你有足够的对比度让文字对你的访客来说是清晰易读的。如果指定了一个图像，并且文本将被放置在该图像的顶部，您还应该指定一个background-color ，以便在图像未加载时文本也足够清晰。
      
 
-
      屏幕阅读者不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是HTML页面的一部分，而不是包含在背景中。
      
+
      屏幕阅读者不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是 HTML 页面的一部分，而不是包含在背景中。
      
 
 
      边框
      
 
-
      在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边界。通常，当我们使用CSS向元素添加边框时，我们使用一个简写属性在一行CSS中设置边框的颜色、宽度和样式。我们可以使用{{cssxref("border")}}为一个框的所有四个边设置边框。
      
+
      在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边界。通常，当我们使用 CSS 向元素添加边框时，我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。我们可以使用{{cssxref("border")}}为一个框的所有四个边设置边框。
      
 
 
      .box {
   border: 1px solid black;
 } 
      
 
-
      或者我们可以只设置盒子的一个边，例如:
      
+
      或者我们可以只设置盒子的一个边，例如：
      
 
 
      .box {
   border-top: 1px solid black;
@@ -242,7 +242,7 @@ 
      边框
      
 } 
      
 
 
      
-
      注意：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性(例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 详情。
      
+
      注意：这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性 (例如，从左到右或从右到左的文本，或从上到下)。在下一课中，我们将探讨这些问题，这包括处理不同的文本指示 详情。
      
 
      
 
 
      有各种各样的样式可以用于边框。在下面的例子中，为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。
      
@@ -253,13 +253,13 @@ 
      圆角
      
 
 
      通过使用{{cssxref("border-radius")}}属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。
      
 
-
      例如，要使一个盒子的四个角都有10px的圆角半径：
      
+
      例如，要使一个盒子的四个角都有 10px 的圆角半径：
      
 
 
      .box {
   border-radius: 10px;
 } 
      
 
-
      或使右上角的水平半径为1em，垂直半径为10％：
      
+
      或使右上角的水平半径为 1em，垂直半径为 10％：
      
 
 
      .box {
   border-top-right-radius: 1em 10%;
@@ -271,11 +271,11 @@ 
      圆角
      
 
 
      玩转背景和边框
      
 
-
      为了测试你的新知识，尝试使用背景和边框创建以下内容，使用下面的例子作为起点:
      
+
      为了测试你的新知识，尝试使用背景和边框创建以下内容，使用下面的例子作为起点：
      
 
 
        
- 
      1. 给方框一个5px的黑色实心边框，圆角为10px。
        2. 
- 
      2. 添加一个背景图像(使用URL balloons.jpg)，并调整它的大小，使它能够覆盖盒子。
        3. 
+ 
      3. 给方框一个 5px 的黑色实心边框，圆角为 10px。
        4. 
+ 
      4. 添加一个背景图像 (使用 URL balloons.jpg)，并调整它的大小，使它能够覆盖盒子。
        5. 
  
      5. 给<h2>一个半透明的黑色背景颜色，并使文本为白色。
        6. 
 
      
 
@@ -287,9 +287,9 @@ 
      玩转背景和边框
      
 
 
      总结
      
 
-
      我们在这里已经介绍了很多，您可以看到有很多要添加背景或边框到盒子中。如果您想了解更多关于我们讨论过的特性的信息，请浏览不同的属性页面。MDN上的每个页面都有更多的用法示例，供您玩转并增强您的知识。
      
+
      我们在这里已经介绍了很多，您可以看到有很多要添加背景或边框到盒子中。如果您想了解更多关于我们讨论过的特性的信息，请浏览不同的属性页面。MDN 上的每个页面都有更多的用法示例，供您玩转并增强您的知识。
      
 
-
      在下一课中，我们将了解文档排版与CSS的相互影响。以及了解当文本不是从左向右流动时会发生什么?
      
+
      在下一课中，我们将了解文档排版与 CSS 的相互影响。以及了解当文本不是从左向右流动时会发生什么？
      
 
 
      {{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
      
 
@@ -297,9 +297,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html
index 8bb286b852508e..54c0ce838c4e1f 100644
--- a/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/zh-cn/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -5,36 +5,36 @@
 ---
 
      {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
      
 
-
      本文旨在让你理解CSS的一些最基本的概念——层叠、优先级和继承——这些概念决定着如何将CSS应用到HTML中，以及如何解决冲突。
      
+
      本文旨在让你理解 CSS 的一些最基本的概念——层叠、优先级和继承——这些概念决定着如何将 CSS 应用到 HTML 中，以及如何解决冲突。
      
 
-
      尽管与课程的其他部分相比，完成这节课可能看起来没有那么直接的相关性，而且更学术性一些，但是理解这些东西将为您以后节省很多痛苦！ 我希望您仔细阅读本节，并在继续下一步学习之前，确保您是否理解了这些概念。
      
+
      尽管与课程的其他部分相比，完成这节课可能看起来没有那么直接的相关性，而且更学术性一些，但是理解这些东西将为您以后节省很多痛苦！我希望您仔细阅读本节，并在继续下一步学习之前，确保您是否理解了这些概念。
      
 
 
-   
-   
+   
+   
-   
+   
      
  
   
      预备知识:基本的计算机知识，安装基本的软件，文件处理基本知识, HTML基础知识  (如果不了解HTML，请移步 学习HTML入门)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 学习CSS第一步.)预备知识：基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识  (如果不了解 HTML，请移步 学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果不了解 CSS，请移步 学习 CSS 第一步.)
   
      
   
      
    目标：学习层叠、优先级，以及在CSS中继承是如何工作的。学习层叠、优先级，以及在 CSS 中继承是如何工作的。
   
      
        
 
      
 
 
      冲突规则
      
 
-
      CSS代表层叠样式表(Cascading Style Sheets)，理解第一个词cascading很重要— cascade 的表现方式是理解CSS的关键。
      
+
      CSS 代表层叠样式表 (Cascading Style Sheets)，理解第一个词cascading很重要— cascade 的表现方式是理解 CSS 的关键。
      
 
 
      在某些时候，在做一个项目过程中你会发现一些应该产生效果的样式没有生效。通常的原因是你创建了两个应用于同一个元素的规则。cascade, 和它密切相关的概念是 specificity，决定在发生冲突的时候应该使用哪条规则。设计元素样式的规则可能不是期望的规则，因此需要了解这些机制是如何工作的。
      
 
-
      这里也有继承的概念，也就是在默认情况下，一些css属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。
      
+
      这里也有继承的概念，也就是在默认情况下，一些 css 属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。
      
 
-
      我们来快速的看下正在处理的关键问题，然后依次了解它们是如何相互影响的，以及如何和css交互的。虽然这些概念难以理解，但是随着不断的练习，你会慢慢熟悉它的工作原理。
      
+
      我们来快速的看下正在处理的关键问题，然后依次了解它们是如何相互影响的，以及如何和 css 交互的。虽然这些概念难以理解，但是随着不断的练习，你会慢慢熟悉它的工作原理。
      
 
 
      层叠
      
 
-
      Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
      
+
      Stylesheets cascade（样式表层叠） — 简单的说，css 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
      
 
 
      下面的例子中，我们有两个关于 h1 的规则。h1 最后显示蓝色 — 这些规则有相同的优先级，所以顺序在最后的生效。
      
 
@@ -49,7 +49,7 @@ 
      优先级
      
  
    • 一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。
      • 
 
    
 
-
    举例时间! 下面我们再来介绍两个适用于 h1 的规则。下面的 h1 最后会显示红色 — 类选择器有更高的优先级，因此就会被应用——即使元素选择器顺序在它后面。
    
+
    举例时间 ! 下面我们再来介绍两个适用于 h1 的规则。下面的 h1 最后会显示红色 — 类选择器有更高的优先级，因此就会被应用——即使元素选择器顺序在它后面。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 
    
 
@@ -57,21 +57,21 @@ 
    优先级
    
 
 
    继承
    
 
-
    继承也需要在上下文中去理解 —— 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
    
+
    继承也需要在上下文中去理解 —— 一些设置在父元素上的 css 属性是可以被子元素继承的，有些则不能。
    
 
 
    举一个例子，如果你设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 
    
 
-
    一些属性是不能继承的 — 举个例子如果你在一个元素上设置 {{cssxref("width")}} 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!
    
+
    一些属性是不能继承的 — 举个例子如果你在一个元素上设置 {{cssxref("width")}} 50% ，所有的后代不会是父元素的宽度的 50% 。如果这个也可以继承的话，CSS 就会很难使用了！
    
 
 
    
-
    注: 在 MDN CSS 属性引用页面你会发现一个技术信息框，通常在规范区域的底部，列举了属性的很多数据信息，包括能否被继承。参见 color property Specifications section, 例子.
    
+
    注: 在 MDN CSS 属性引用页面你会发现一个技术信息框，通常在规范区域的底部，列举了属性的很多数据信息，包括能否被继承。参见 color property Specifications section, 例子。
    
 
    
 
 
    理解这些概念是如何协同工作的
    
 
-
    这三个概念一起来控制css规则应用于哪个元素；在下面的内容中，我们将看到它们是如何协同工作的。有时候会感觉有些复杂，但是当你对css有更多经验的时候，你就可以记住它们，即便忘记了细节，可以在网上查到，有经验的开发人员也不会记得所有细节。
    
+
    这三个概念一起来控制 css 规则应用于哪个元素；在下面的内容中，我们将看到它们是如何协同工作的。有时候会感觉有些复杂，但是当你对 css 有更多经验的时候，你就可以记住它们，即便忘记了细节，可以在网上查到，有经验的开发人员也不会记得所有细节。
    
 
 
    理解继承
    
 
@@ -81,13 +81,13 @@ 
    理解继承
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 
    
 
-
    像 widths (上面提到的), margins, padding, 和 borders 不会被继承。如果borders可以被继承，每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果!
    
+
    像 widths (上面提到的), margins, padding, 和 borders 不会被继承。如果 borders 可以被继承，每个列表和列表项都会获得一个边框 — 可能就不是我们想要的结果！
    
 
 
    哪些属性属于默认继承很大程度上是由常识决定的。
    
 
 
    控制继承
    
 
-
    CSS 为控制继承提供了四个特殊的通用属性值。每个css属性都接收这些值。
    
+
    CSS 为控制继承提供了四个特殊的通用属性值。每个 css 属性都接收这些值。
    
 
 
    
  
    {{cssxref("inherit")}}
    
@@ -99,20 +99,20 @@ 
    控制继承
    
 
    
 
 
    
-
    注: 还有一个新的属性, {{cssxref("revert")}}， 只有很少的浏览器支持。
    
+
    注: 还有一个新的属性， {{cssxref("revert")}}， 只有很少的浏览器支持。
    
 
    
 
 
    
 
    注: 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 有更多信息和具体是怎么工作的。
    
 
    
 
-
    下面的例子你可以通过修改css来查看它们的功能，写代码是掌握html和css最好的办法。
    
+
    下面的例子你可以通过修改 css 来查看它们的功能，写代码是掌握 html 和 css 最好的办法。
    
 
 
    例子：
    
 
 
      
- 
    1. 第二个列表项有类 my-class-1 。它设置了内部元素来继承属性。如果你删除这个类，它会如何改变链接的颜色?
      2. 
- 
    2. 你知道为什么第三个和第四个链接会是这样的颜色? 如果不知道看看之前的内容。
      3. 
+ 
    3. 第二个列表项有类 my-class-1 。它设置了内部元素来继承属性。如果你删除这个类，它会如何改变链接的颜色？
      4. 
+ 
    4. 你知道为什么第三个和第四个链接会是这样的颜色？ 如果不知道看看之前的内容。
      5. 
  
    5. 哪个链接的颜色会改变如果你对 <a> 添加一个新样式 — 例如 a { color: red; }?
      6. 
 
    
 
@@ -120,7 +120,7 @@ 
    控制继承
    
 
 
    重设所有属性值
    
 
-
    CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个(inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
    
+
    CSS 的 shorthand 属性 all 可以用于同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个 (inherit, initial, unset, or revert)。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
    
 
 
    下面的例子中有两个blockquote 。第一个用元素本身的样式 ，第二个设置 all 为 unset
    
 
@@ -130,7 +130,7 @@ 
    重设所有属性值
    
 
 
    理解层叠
    
 
-
    我们现在明白了为什么嵌套在html结构中的段落和应用于正文中的css颜色相同，从入门课程中，我们了解了如何将文档中的任何修改应用于某个对象的css，无论是把css指定某个元素还是创建一个类。现在，我们将要了解层叠如何定义在不止一个元素的时候怎么应用css规则。
    
+
    我们现在明白了为什么嵌套在 html 结构中的段落和应用于正文中的 css 颜色相同，从入门课程中，我们了解了如何将文档中的任何修改应用于某个对象的 css，无论是把 css 指定某个元素还是创建一个类。现在，我们将要了解层叠如何定义在不止一个元素的时候怎么应用 css 规则。
    
 
 
    有三个因素需要考虑，根据重要性排序如下，前面的更重要：
    
 
@@ -140,7 +140,7 @@ 
    理解层叠
    
  
  • 资源顺序
    • 
 
 
-
    我们从下往上，看看浏览器是如何决定该应用哪个css规则的。
    
+
    我们从下往上，看看浏览器是如何决定该应用哪个 css 规则的。
    
 
 
    资源顺序
    
 
@@ -154,7 +154,7 @@ 
    优先级
    
 
 
    这里需要注意虽然我们考虑的是选择器，以及应用在选中对象上的规则，但不会覆盖所有规则，只有相同的属性。
    
 
-
    这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。举个例子，在下面的样式中我给2级标题定义了通用样式，然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题，然后更具体的值通过对应类来实现。
    
+
    这样可以避免重复的 CSS。一种常见的做法是给基本元素定义通用样式，然后给不同的元素创建对应的类。举个例子，在下面的样式中我给 2 级标题定义了通用样式，然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题，然后更具体的值通过对应类来实现。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 
    
 
@@ -163,8 +163,8 @@ 
    优先级
    
 
    一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
    
 
 
      
- 
    1. 千位： 如果声明在 {{htmlattrxref("style")}} 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
      2. 
- 
    2. 百位： 选择器中包含ID选择器则该位得一分。
      3. 
+ 
    3. 千位： 如果声明在 {{htmlattrxref("style")}} 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是 1000。
      4. 
+ 
    4. 百位： 选择器中包含 ID 选择器则该位得一分。
      5. 
  
    5. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
      6. 
  
    6. 个位：选择器中包含元素、伪元素选择器则该位得一分。
      7. 
 
    
@@ -177,7 +177,7 @@ 
    优先级
    
 
    警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
    
 
    
 
-
    下面有几个单独的例子，有空可以看看。试着思考下，理解为什么优先级是这样定的。我们还没有深入介绍选择器，不过你可以在MDN上面找到每个选择器的详细信息  selectors reference.
    
+
    下面有几个单独的例子，有空可以看看。试着思考下，理解为什么优先级是这样定的。我们还没有深入介绍选择器，不过你可以在 MDN 上面找到每个选择器的详细信息  selectors reference.
    
 
 
@@ -238,29 +238,29 @@ 
    优先级
    {{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 
    
 
-
    这里发生了什么? 首先，我们先看看最上面的选择器规则，你会发现，我们已经把优先级计算出来放在最前面的注释里。
    
+
    这里发生了什么？ 首先，我们先看看最上面的选择器规则，你会发现，我们已经把优先级计算出来放在最前面的注释里。
      
- 
    • 前面两个选择器都是链接背景颜色的样式 — 第二个赢了使得背景变成蓝色因为它多了一个ID选择器：优先级 201 vs. 101。
      • 
- 
    • 第三四个选择器都是链接文本颜色样式 — 第二个（第四个）赢了使得文本变成白色因为它虽然少一个元素选择器，但是多了一个类选择器，多了9分。所以优先级是 113 vs. 104。
      • 
- 
    • 第5到7个选择器都是鼠标悬停时链接边框样式。第六个显然输给第五个优先级是 23 vs. 24 — 少了个元素选择器。 第七个，比第五第六都高 — 子选择器数量相同，但是有一个元素选择器变成类选择器。所以最后优先级是 33 vs. 23 和 24。
      • 
+ 
    • 前面两个选择器都是链接背景颜色的样式 — 第二个赢了使得背景变成蓝色因为它多了一个 ID 选择器：优先级 201 vs. 101。
      • 
+ 
    • 第三四个选择器都是链接文本颜色样式 — 第二个（第四个）赢了使得文本变成白色因为它虽然少一个元素选择器，但是多了一个类选择器，多了 9 分。所以优先级是 113 vs. 104。
      • 
+ 
    • 第 5 到 7 个选择器都是鼠标悬停时链接边框样式。第六个显然输给第五个优先级是 23 vs. 24 — 少了个元素选择器。 第七个，比第五第六都高 — 子选择器数量相同，但是有一个元素选择器变成类选择器。所以最后优先级是 33 vs. 23 和 24。
      • 
 
    !important
    有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。
    
 
-
    看看这个例子，有两个段落，其中一个有ID。
    
+
    看看这个例子，有两个段落，其中一个有 ID。
    {{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 
    让我们看看会发生什么 — 如果有什么疑问，试着删除一些属性：
      
- 
    1. 你会发现第三个规则 {{cssxref("color")}} 和 {{cssxref("padding")}} 的值被应用了，但是 {{cssxref("background-color")}} 没有。为什么? 应该三个都应用，因为顺序规则是后面覆盖前面。
      2. 
+ 
    2. 你会发现第三个规则 {{cssxref("color")}} 和 {{cssxref("padding")}} 的值被应用了，但是 {{cssxref("background-color")}} 没有。为什么？ 应该三个都应用，因为顺序规则是后面覆盖前面。
      3. 
  
    3. 无论如何， 上面的规则赢了，因为类选择器比元素选择器有更高的优先级。
      4. 
- 
    4. 两个元素都有  better{{htmlattrxref("class")}}，但是第二个有 {{htmlattrxref("id")}} 。因为ID选择器比类选择器优先级更高 (一个页面只能有一个独特的ID，但是很多元素都有相同的类 — ID 对于目标非常独特)，红色背景和1 pixel black border 应该都被应用到第二个元素，第一个元素应该是灰色背景和 no border，根据类选择器。
      5. 
- 
    5. 第二个元素有红色背景但是没有边框。为什么?因为 !important 声明在第二条规则里 — 在 border: none 后面，说明即使计算优先级低这个属性也使用这个值。
      6. 
+ 
    6. 两个元素都有  better{{htmlattrxref("class")}}，但是第二个有 {{htmlattrxref("id")}} 。因为 ID 选择器比类选择器优先级更高 (一个页面只能有一个独特的 ID，但是很多元素都有相同的类 — ID 对于目标非常独特)，红色背景和 1 pixel black border 应该都被应用到第二个元素，第一个元素应该是灰色背景和 no border，根据类选择器。
      7. 
+ 
    7. 第二个元素有红色背景但是没有边框。为什么？因为 !important 声明在第二条规则里 — 在 border: none 后面，说明即使计算优先级低这个属性也使用这个值。
      8. 
 
    
@@ -269,29 +269,29 @@ 
    !important
    
 
 
    了解 !important 是为了在阅读别人代码的时候知道有什么作用。 但是，强烈建议除了非常情况不要使用它。 !important 改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。
    
 
-
    在一种情况下，你可能不得不使用它：当你不能编辑核心的CSS模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。
    
+
    在一种情况下，你可能不得不使用它：当你不能编辑核心的 CSS 模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。
    
 
-
    CSS位置的影响
    
+
    CSS 位置的影响
    
 
-
    最后，也很有用，CSS声明的重要性取决于样式表中指定的——它让用户可以设置自定义样式表来覆盖开发人员定义的样式。例如用户可能视力受损，并想在所有网页上设置两倍的正常字体大小，以便更容易进行阅读。
    
+
    最后，也很有用，CSS 声明的重要性取决于样式表中指定的——它让用户可以设置自定义样式表来覆盖开发人员定义的样式。例如用户可能视力受损，并想在所有网页上设置两倍的正常字体大小，以便更容易进行阅读。
    
 
 
    简而言之
    
 
 
    相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：
    
 
 
      
- 
    1. 用户代理样式表中的声明(例如，浏览器的默认样式，在没有设置其他样式时使用)。
      2. 
- 
    2. 用户样式表中的常规声明(由用户设置的自定义样式)。
      3. 
- 
    3. 作者样式表中的常规声明(这些是我们web开发人员设置的样式)。
      4. 
+ 
    4. 用户代理样式表中的声明 (例如，浏览器的默认样式，在没有设置其他样式时使用)。
      5. 
+ 
    5. 用户样式表中的常规声明 (由用户设置的自定义样式)。
      6. 
+ 
    6. 作者样式表中的常规声明 (这些是我们 web 开发人员设置的样式)。
      7. 
  
    7. 作者样式表中的!important声明
      8. 
  
    8. 用户样式表中的!important 声明
      9. 
 
    
 
-
    对于web开发人员的样式表来说，覆盖用户样式表是有意义的，因此设计可以按预期进行，但是有时用户充足的理由覆盖web开发人员样式，正如上面提到的—这可以通过在他们的规则中使用!important来实现。
    
+
    对于 web 开发人员的样式表来说，覆盖用户样式表是有意义的，因此设计可以按预期进行，但是有时用户充足的理由覆盖 web 开发人员样式，正如上面提到的—这可以通过在他们的规则中使用!important来实现。
    
 
 
    主动学习：玩转层叠
    
 
-
    在这种主动学习中，我们希望您尝试编写一个新的规则，它将覆盖我们默认应用于链接的颜色和背景颜色。您可以使用我们在控制继承 节中查看的一个特殊值来在一个新规则中编写一个声明，该声明将重置背景颜色为白色，而不使用实际的颜色值吗?
    
+
    在这种主动学习中，我们希望您尝试编写一个新的规则，它将覆盖我们默认应用于链接的颜色和背景颜色。您可以使用我们在控制继承 节中查看的一个特殊值来在一个新规则中编写一个声明，该声明将重置背景颜色为白色，而不使用实际的颜色值吗？
    
 
 
    如果你犯了一个错误，你总是可以用重置按钮重置它。如果你真的卡住了，看看这里的解决方案 进入。
    
 
@@ -299,9 +299,9 @@ 
    主动学习：玩转层叠
    
 
 
    接下来做什么呢？
    
 
-
    如果您理解了本文的大部分内容，那么就做得很好了—您已经开始熟悉CSS的基本机制。接下来，我们将详细讨论选择器。
    
+
    如果您理解了本文的大部分内容，那么就做得很好了—您已经开始熟悉 CSS 的基本机制。接下来，我们将详细讨论选择器。
    
 
-
    如果您没有完全理解层叠，优先级和继承，也请不要担心！这绝对是我们到目前为止在课程中所涉及到的最复杂的事情，即使是专业的web开发人员有时也会觉得棘手。我们建议您在继续学习这门课程的过程中，反复阅读这篇文章几次，并继续思考它。
    
+
    如果您没有完全理解层叠，优先级和继承，也请不要担心！这绝对是我们到目前为止在课程中所涉及到的最复杂的事情，即使是专业的 web 开发人员有时也会觉得棘手。我们建议您在继续学习这门课程的过程中，反复阅读这篇文章几次，并继续思考它。
    
 
 
    如果您开始遇到样式没有按照预期应用的奇怪问题，请回到这里。这可能是一个特殊的问题。
    
 
@@ -311,9 +311,9 @@ 
    模块目录
    
 
 
      
  
    1. 层叠与继承
      2. 
- 
    2. CSS选择器
+ 
    3. CSS 选择器
   
    
diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
index 4af76ff5381744..eecb008865a53c 100644
--- a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
+++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
@@ -18,7 +18,7 @@
   
   
    
-   
+   
    
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
    目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。测试对 CSS 盒模型和其他盒相关特性的掌握程度，比如实现背景等。
   
    
  
 
    
@@ -33,7 +33,7 @@ 
    起点
    
 
 
 
    
-
    提醒：或者你也可以用JSBin或Glitch这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。
    
+
    提醒：或者你也可以用JSBin或Glitch这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的<style>元素里就好。
    
 
    
 
 
    项目简介
    
@@ -43,7 +43,7 @@ 
    项目简介
    
 
    信纸主体
    
 
 
      
- 
    • 把CSS链接到HTML文档里。
      • 
+ 
    • 把 CSS 链接到 HTML 文档里。
      • 
  
    • 给信纸添加这样一个背景：
   
        
    
      • 把之前下载的顶部图片固定到信纸顶部。
        • 
@@ -53,7 +53,7 @@ 
        信纸主体
        
  
  
      • 多添加一个background声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。
        • 
  
      • 给信纸添加一个白色的背景颜色。
        • 
- 
      • 给信纸添加一个1mm的上下实线边框，选一个符合信纸的颜色主题的边框颜色。
        • 
+ 
      • 给信纸添加一个 1mm 的上下实线边框，选一个符合信纸的颜色主题的边框颜色。
        • 
 
      
 
 
      标志
      
@@ -81,7 +81,7 @@ 
      范例
      
 
 
      评估
      
 
-
      如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
      
+
      如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC 频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
      
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
      
 
diff --git a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html
index ecd3c418534495..77f2095e02954e 100644
--- a/files/zh-cn/learn/css/building_blocks/debugging_css/index.html
+++ b/files/zh-cn/learn/css/building_blocks/debugging_css/index.html
@@ -10,11 +10,11 @@
 
-   
+   
-   
+   
@@ -32,7 +32,7 @@ 
      比较 DOM 和 View Source
      刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 HTML Pane 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。
      
 
-
      浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<h2>，结束标签是</h3>。），浏览器会尽力弄清你的意图，之后DOM中的HTML就以 <h2> 起始，以 </h2> 结束了。浏览器还会处理好 HTML 文档， JavaScript 做出的更改都会由 DOM 表现出来。
      
+
      浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是<h2>，结束标签是</h3>。），浏览器会尽力弄清你的意图，之后 DOM 中的 HTML 就以 <h2> 起始，以 </h2> 结束了。浏览器还会处理好 HTML 文档，JavaScript 做出的更改都会由 DOM 表现出来。
      相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 HTML tree 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。
      
 
@@ -80,7 +80,7 @@ 
      理解盒模型
      在这一面板上，被详细说明的属性之一为 box-sizing 属性，它控制了元素使用的盒模型种类。
      
 
-
      将这两个分别带有 box1 和 box2 类的盒子进行比较，它们可能都应用了相同的宽度（400像素），但是 box1 显然更宽。你可以在布局面板上看到，它正在使用 content-box 值，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。
      
+
      将这两个分别带有 box1 和 box2 类的盒子进行比较，它们可能都应用了相同的宽度（400 像素），但是 box1 显然更宽。你可以在布局面板上看到，它正在使用 content-box 值，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。
      带有 box2 类的盒子使用了 border-box，所以此时内边距和边框的值是从你赋给元素的值里面减去的，也就是说页面上被盒子占据的空间大小就是你指定的大小，此例中为 width: 400px。
      
 
@@ -119,55 +119,55 @@ 
      进一步了解火狐开发者工
 
 
      在 CSS 中调试问题
      
 
-
      在解决 CSS 问题时，DevTools 可以提供很大的帮助，因此当您发现自己的 CSS 表现不如预期时，应该如何解决呢？ 以下步骤应有所帮助。
      
+
      在解决 CSS 问题时，DevTools 可以提供很大的帮助，因此当您发现自己的 CSS 表现不如预期时，应该如何解决呢？以下步骤应有所帮助。
      从问题中后退一步
      
 
-
      任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为您通常无法获得错误消息用于网络搜索来帮助您找到解决方案。 如果您感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。 有时，当您停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。
      
+
      任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为您通常无法获得错误消息用于网络搜索来帮助您找到解决方案。如果您感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。有时，当您停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。
      你有一个有效的 HTML 和 CSS 吗？
      
 
-
      浏览器希望您的 CSS 和 HTML 能够正确编写，但是浏览器也非常宽容，即使标记或样式表中有错误，浏览器也会尽力显示您的网页。 如果您的代码有错误，浏览器需要猜测您的意思，并且可能会对您的想法做出不同的决定。 此外，两种不同的浏览器可能会以两种不同的方式来解决该问题。 因此，一个好的第一步是通过验证器运行 HTML 和 CSS，以获取并修复任何错误。
      
+
      浏览器希望您的 CSS 和 HTML 能够正确编写，但是浏览器也非常宽容，即使标记或样式表中有错误，浏览器也会尽力显示您的网页。如果您的代码有错误，浏览器需要猜测您的意思，并且可能会对您的想法做出不同的决定。此外，两种不同的浏览器可能会以两种不同的方式来解决该问题。因此，一个好的第一步是通过验证器运行 HTML 和 CSS，以获取并修复任何错误。
      
 
-
      属性和值是否被你正在测试的浏览器所支持?
      
+
      属性和值是否被你正在测试的浏览器所支持？
      
 
-
      浏览器会忽略他们不理解的 CSS。 如果您正在测试的浏览器不支持您正在使用的属性或值，则不会奔溃，但 CSS 不会被应用。 DevTools 通常会以某种方式突出显示不支持的属性和值。 在下面的屏幕截图中，浏览器不支持以下子网格值 {{cssxref("grid-template-columns")}}.
      
+
      浏览器会忽略他们不理解的 CSS。如果您正在测试的浏览器不支持您正在使用的属性或值，则不会奔溃，但 CSS 不会被应用。DevTools 通常会以某种方式突出显示不支持的属性和值。在下面的屏幕截图中，浏览器不支持以下子网格值 {{cssxref("grid-template-columns")}}.
      Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
      
 
-
      您还可以查看 MDN 每个属性页底部的浏览器兼容性表。 这些向您显示浏览器对该属性的支持，如果支持该属性的某些用法，而不支持其他用法，则经常会 break down。 这里显示了 {{cssxref("shape-outside")}} 属性的兼容性数据。
      
+
      您还可以查看 MDN 每个属性页底部的浏览器兼容性表。这些向您显示浏览器对该属性的支持，如果支持该属性的某些用法，而不支持其他用法，则经常会 break down。 这里显示了 {{cssxref("shape-outside")}} 属性的兼容性数据。
      是否有其它东西覆盖了你的 CSS?
      
 
-
      在这里，您所学到的关于特定性（specificity）的信息将非常有用。 如果您有一些更特定的内容要覆盖你打算做的，将会比较麻烦。 但是，如上所述，DevTools 将向您显示 CSS 是如何应用的，您可以弄清楚如何使新选择器足够具体，以覆盖旧的 CSS 样式。
      
+
      在这里，您所学到的关于特定性（specificity）的信息将非常有用。如果您有一些更特定的内容要覆盖你打算做的，将会比较麻烦。但是，如上所述，DevTools 将向您显示 CSS 是如何应用的，您可以弄清楚如何使新选择器足够具体，以覆盖旧的 CSS 样式。
      制作一个精简的问题测试用例
      
 
-
      如果上述步骤未能解决问题，则您需要做更多调查。 此时最好的做法是创建一个称为简化测试用例的东西。 能够“减化问题”是一项非常有用的技能。 这将帮助您在自己的代码和同事的代码中发现问题，还使您能够报告错误并更有效地寻求帮助。
      
+
      如果上述步骤未能解决问题，则您需要做更多调查。此时最好的做法是创建一个称为简化测试用例的东西。能够“减化问题”是一项非常有用的技能。这将帮助您在自己的代码和同事的代码中发现问题，还使您能够报告错误并更有效地寻求帮助。
      
 
-
      简化的测试用例是一个代码示例，它以最简单的方式演示了该问题，并删除了无关的周围内容和样式。 这通常意味着将有问题的代码从您的布局中取出，以制作一个仅显示该代码或功能的小示例。
      
+
      简化的测试用例是一个代码示例，它以最简单的方式演示了该问题，并删除了无关的周围内容和样式。这通常意味着将有问题的代码从您的布局中取出，以制作一个仅显示该代码或功能的小示例。
      
 
-
      创建一个简化测试用例:
      
+
      创建一个简化测试用例：
        
- 
      1. 如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。 诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。 您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。 之后，您可以检查问题是否仍然明显。
        2. 
- 
      2. 如果删除 JavaScript 不能解决问题，请不要调试包含 JavaScript 的部分。 如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。
        3. 
- 
      3. 删除所有不会导致此问题的 HTML。 删除布局中的组件甚至主要元素。 在保留问题可重现的情况下把代码量尽量减少。
        4. 
+ 
      4. 如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。之后，您可以检查问题是否仍然明显。
        5. 
+ 
      5. 如果删除 JavaScript 不能解决问题，请不要调试包含 JavaScript 的部分。如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。
        6. 
+ 
      6. 删除所有不会导致此问题的 HTML。删除布局中的组件甚至主要元素。在保留问题可重现的情况下把代码量尽量减少。
        7. 
  
      7. 删除掉任何不影响问题的 CSS。
        8. 
 
      
 
-
      在执行此操作的过程中，您可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。 当发现一些东西时，应该在代码中添加一些注释。 如果您需要帮助，这些注释将向帮助您的人显示您已经做了哪些尝试。 这很可能会为您提供足够的信息，以便能够搜索可能存在的问题和解决方法。
      
+
      在执行此操作的过程中，您可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。当发现一些东西时，应该在代码中添加一些注释。如果您需要帮助，这些注释将向帮助您的人显示您已经做了哪些尝试。这很可能会为您提供足够的信息，以便能够搜索可能存在的问题和解决方法。
      
 
-
      如果您还没有解决问题，那么减化测试用例可以通过发布到论坛或向同事展示来为寻求帮助提供依据。 如果能够表明在寻求帮助之前您已经完成了简化问题并准确确定问题根源的工作，那么会帮助您更容易地获得帮助。 一个更有经验的开发人员也许能够迅速发现问题并为您指明正确的方向，即使没有，您简化的测试用例也可以使他们快速查看并能够至少提供一些帮助。
      
+
      如果您还没有解决问题，那么减化测试用例可以通过发布到论坛或向同事展示来为寻求帮助提供依据。如果能够表明在寻求帮助之前您已经完成了简化问题并准确确定问题根源的工作，那么会帮助您更容易地获得帮助。一个更有经验的开发人员也许能够迅速发现问题并为您指明正确的方向，即使没有，您简化的测试用例也可以使他们快速查看并能够至少提供一些帮助。
      如果您的问题实际上是浏览器中的错误，则还可以使用简化的测试用例向相关的浏览器供应商提交错误报告（e.g. on Mozilla's bugzilla site）。
      
 
-
      随着对 CSS 的使用经验越来越丰富，您会发现发现问题的速度越来越快。 但是，即使我们中最有经验的人有时也会发现自己想知道到底发生了什么。 采取有条不紊的方法，简化测试用例，并向他人解释问题，通常会找到解决方法。
      
+
      随着对 CSS 的使用经验越来越丰富，您会发现发现问题的速度越来越快。但是，即使我们中最有经验的人有时也会发现自己想知道到底发生了什么。采取有条不紊的方法，简化测试用例，并向他人解释问题，通常会找到解决方法。
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
      
 
@@ -175,9 +175,9 @@ 
      模块目录
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html
index 387ee00b1a8b67..a04882abbddc13 100644
--- a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html
+++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html
@@ -1,5 +1,5 @@
 ---
-title: 基本的CSS理解
+title: 基本的 CSS 理解
 slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 tags:
   - 初学者
@@ -13,12 +13,12 @@
 
 
      {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
      
 
-
      你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。
      
+
      你已经在这个模块中了解到了很多内容，所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。
      
  
   
      必备条件:必备条件：
    会使用计算机、安装基础软件、基本了解文件处理、有 HTML 基础（请参考 HTML 导论）、了解 CSS 工作（请参考 CSS first steps）。
   
      
   
      目标:目标：
    学习浏览器 DevTools 基础、学会对 CSS 进行简单的审查和编辑。
   
      
        
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      
-   
+   
@@ -30,7 +30,7 @@
 
 
      起点
      
 
-
      在开始测验之前，你应该:
      
+
      在开始测验之前，你应该：
        
  
      • 将 HTML file for the exercise, 和 associated image file,拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话，也没有问题，不过需要保证你提供的图像是正方形的。
        • 
@@ -38,14 +38,14 @@ 
        起点
        
 
      
-
      注意: 另外, 你可以使用一个网站比如 JSBin 或 Glitch 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。
      
+
      注意: 另外，你可以使用一个网站比如 JSBin 或 Glitch 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。
      
 
      项目概要
      我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。
      
 
-
      基本设置:
      
+
      基本设置：
        
  
      • 首先，在你放 HTML 文件和图像文件的目录下，创建一个新的文件，把它命名为类似style.css。
        • 
@@ -57,12 +57,12 @@ 
        项目概要
        
 
        关注我们为你提供的选择器和规则集：
        
 
 
          
- 
        • 接下来, 我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。
          • 
+ 
        • 接下来，我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。
          • 
  
        • 现在是时候把正确的选择器放在正确的规则集上了！你的 CSS 资源中有四对选择器和规则集需要匹配，现在就开始匹配，并将它们添加到你的 CSS 文件。你需要：
   
            
    
          • 为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。
            • 
-   
          • 为header提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。
            • 
-   
          • 为footer提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。
            • 
+   
          • 为 header 提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。
            • 
+   
          • 为 footer 提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。
            • 
    
          • 将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100% (一个聪明的技巧，来确保它将放大/缩小，与父容器保持同样的高度，不管它变成什么高度。)
            • 
   
          
  
          • 
@@ -72,16 +72,16 @@ 
          项目概要
          
 
          你需要写的新规则：
          
 
 
            
- 
          • 编写一个同时面向 card head 和 card footer 的规则集,使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding ）但用 em 来表示。
            • 
- 
          • 浏览器会为<h2> 和 <p>元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集： margin 设置为 0。
            • 
+ 
          • 编写一个同时面向 card head 和 card footer 的规则集，使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding）但用 em 来表示。
            • 
+ 
          • 浏览器会为<h2> 和 <p>元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集：margin 设置为 0。
            • 
  
          • 为了阻止图像溢出名片的主要内容 ( <article> 元素)，我们需要给它设置一个明确的高度。设置 <article>的高度为 120px，但是使用 em来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。
            • 
  
          • 编写一个规则集，使 <h2> 有效的字体大小为 20px (使用 em表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
            • 
- 
          • 为页脚中的 <p> 编写一个规则集，使它的有效字体大小为 15px (使用 em表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是30px，你所有需要的数字都已经给你了，所以可以计算出行高。
            • 
- 
          • 最为最后一步, 为 <article> 中的段落设置一个合适的 padding 值，让它和 <h2> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。
            • 
+ 
          • 为页脚中的 <p> 编写一个规则集，使它的有效字体大小为 15px (使用 em表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
            • 
+ 
          • 最为最后一步，为 <article> 中的段落设置一个合适的 padding 值，让它和 <h2> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。
            • 
 
          
 
 
          
-
          注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)
          
+
          注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个 em 将会等于 10px 而不是默认的 16px。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em 元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)
          
 
          
 
 
          其他事情要考虑：
          
@@ -94,7 +94,7 @@ 
          项目概要
          
 
          注意和提示
          
 
 
            
- 
          • 你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML 。
            • 
+ 
          • 你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML。
            • 
  
          • 当使用 em 值代表一些你需要的像素长度的时候，想想 (<html>) 元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你 em 的值，至少在这样一个简单的情况下。
            • 
 
          
 
@@ -106,7 +106,7 @@ 
          示例
          
 
 
          评估
          
 
-
          如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问  Learning Area Discourse thread, 或在 #mdn的IRC频道 Mozilla IRC 中轻松获得打分指南. 首先尝试练习 - 作弊学不到什么！
          
+
          如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问  Learning Area Discourse thread, 或在 #mdn的 IRC 频道 Mozilla IRC 中轻松获得打分指南。首先尝试练习 - 作弊学不到什么！
          
 
 
          {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
          
 
diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html
index cc275d491ae857..1e403e4ddfa3a0 100644
--- a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html
+++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html
@@ -6,26 +6,26 @@
 ---
 
          {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
          
 
-
          目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。
          
+
          目前为止我们在 CSS 学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。
          
 
-
          然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。
          
+
          然而，CSS 在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。
          
 
 
      
  
   
      学习本章的前提条件:学习本章的前提条件：
    在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。
   
      
   
      
 
 
 
 
 
 
 
 
 
 
      
-   
+   
-   
+   
      
  
   
      
    先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML 基础（HTML 学习Introduction to HTML）以及 CSS 基础（学习CSS first steps）。
   
      
   
      
    目标：了解书写模式对现代CSS的重要了解书写模式对现代 CSS 的重要
   
      
        
 
      
 
 
      什么是书写模式
      
 
-
      CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。
      
+
      CSS 中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。
      
 
 
      下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。
      
 
@@ -57,13 +57,13 @@ 
      书写模式、块级布局
 
 
      
 
-
      一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。
      
+
      一旦你开始接触 CSS 布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。
      
 
 
      方向
      
 
-
      除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想将某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！
      
+
      除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想将某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是 CSS 本身功能的一部分。网页可不仅限于从左向右排列的语言！
      
 
-
      由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。
      
+
      由于书写模式和文本方向都是可变的，新的 CSS 布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握 CSS 非常有用。
      
 
 
      逻辑属性和逻辑值
      
 
@@ -75,7 +75,7 @@ 
      逻辑属性和逻辑值
      
 
 
      通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。
      
 
-
      为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。
      
+
      为了更容易实现这样的转变，CSS 最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。
      
 
 
      横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。
      
 
@@ -83,7 +83,7 @@ 
      逻辑属性和逻辑值
      
 
 
      逻辑外边距、边框和内边距属性
      
 
-
      我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。
      
+
      我们在前面两节中学习了 CSS 的盒模型和 CSS 边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像 width 和 height 有映射，这些属性也有相应的映射。
      
 
 
      margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。
      
 
@@ -97,7 +97,7 @@ 
      逻辑外边距、边框和
 
 
      {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}
      
 
-
      对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。
      
+
      对于每一个普通边距，都有许多属性可以参考，你可以在 MDN 页面（Logical Properties and Values）查看所有映射属性。
      
 
 
      逻辑值
      
 
@@ -112,18 +112,18 @@ 
      逻辑值
      
 
      之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。
      
 
 
      
-
      译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。
      
+
      译者注：float的逻辑值暂时只有 Firefox 和 Firefox for Android 支持，上面的例子可能无法生效。
      
 
      
 
 
      应该使用物理属性还是逻辑属性呢？
      
 
-
      逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。
      
+
      逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看 MDN 的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。
      
 
 
      总结
      
 
-
      本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。
      
+
      本章介绍的概念在 CSS 的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。
      
 
-
      在下一部分，我们将会看一下CSS中的溢出。
      
+
      在下一部分，我们将会看一下 CSS 中的溢出。
      
 
 
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
      
 
@@ -131,9 +131,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html
index df40d19a9372a4..b0ffdcec5306de 100644
--- a/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html
+++ b/files/zh-cn/learn/css/building_blocks/images_media_form_elements/index.html
@@ -7,43 +7,43 @@
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
      
 
-
      在这节课里，我们来看一下，在CSS中，某些特殊元素是怎样处理的。图像、其他媒体和表格元素的表现和普通的盒子有些不同，这取决于你使用CSS格式化它们的能力。理解什么可能做到，什么不可能做到能够省些力气，本节课将会聚焦于一些你需要知道的主要的事情上。
      
+
      在这节课里，我们来看一下，在 CSS 中，某些特殊元素是怎样处理的。图像、其他媒体和表格元素的表现和普通的盒子有些不同，这取决于你使用 CSS 格式化它们的能力。理解什么可能做到，什么不可能做到能够省些力气，本节课将会聚焦于一些你需要知道的主要的事情上。
      
 
 
-   
+   
-   
+   
      
  
   
      
    学习前提：基础的电脑技能、安装了必要的软件、处理文件的基本知识、HTML基础（学习Introduction to HTML）和对CSS工作原理的大致理解（学习CSS first steps）基础的电脑技能、安装了必要的软件、处理文件的基本知识、HTML 基础（学习Introduction to HTML）和对 CSS 工作原理的大致理解（学习CSS first steps）
   
      
   
      
    目标：.理解元素在经由CSS样式化时，是如何不一样地展现的。.理解元素在经由 CSS 样式化时，是如何不一样地展现的。
   
      
        
 
      
 
 
      替换元素
      
 
-
      图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。 但是，正如我们将看到的，CSS可以对图像执行多种操作。
      
+
      图像和视频被描述为替换元素。这意味着 CSS 不能影响这些元素的内部布局 - 仅影响它们在页面上于其他元素中的位置。但是，正如我们将看到的，CSS 可以对图像执行多种操作。
      
 
-
      某些替换元素（例如图像和视频）也被描述为具有宽高比。 这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。
      
+
      某些替换元素（例如图像和视频）也被描述为具有宽高比。这意味着它在水平（x）和垂直（y）尺寸上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。
      
 
 
      调整图像大小
      
 
-
      正如你从之前的几节课中所学到的那样，CSS中万物皆盒。如果你把一张图片放在一个盒子里，它的原始长和宽都比盒子的小或大，它要么比盒子显得小，要么从盒子里面溢出出去。你需要决定怎么处理溢出。
      
+
      正如你从之前的几节课中所学到的那样，CSS 中万物皆盒。如果你把一张图片放在一个盒子里，它的原始长和宽都比盒子的小或大，它要么比盒子显得小，要么从盒子里面溢出出去。你需要决定怎么处理溢出。
      
 
-
      在下面的示例中，我们有两个盒子，大小均为200像素：
      
+
      在下面的示例中，我们有两个盒子，大小均为 200 像素：
      
 
 
        
- 
      • 一个包含了一张小于200像素的图像，它比盒子小，所以不会拉伸以充满盒子。
        • 
- 
      • 另一张图像大于200像素，从盒子里面溢出。
        • 
+ 
      • 一个包含了一张小于 200 像素的图像，它比盒子小，所以不会拉伸以充满盒子。
        • 
+ 
      • 另一张图像大于 200 像素，从盒子里面溢出。
        • 
 
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}
      
 
 
      所以我们能怎么处理溢出问题呢？
      
 
-
      正如我们在我们之前的课程里面所学的那样，一个常用的技术是将一张图片的{{cssxref("max-width")}}设为100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素（例如<video>，或者<iframe>）起作用。
      
+
      正如我们在我们之前的课程里面所学的那样，一个常用的技术是将一张图片的{{cssxref("max-width")}}设为 100%。这将会允许图片尺寸上小于但不大于盒子。这个技术也会对其他替换元素（例如<video>，或者<iframe>）起作用。
      
 
 
      尝试向上面的示例中的<img>元素加入max-width: 100%，你会看到，小的图像不变，而大的变小了，能够放在盒子里。
      
 
@@ -61,7 +61,7 @@ 
      调整图像大小
      
 
 
      布局中的替换元素
      
 
-
      在替换元素使用各式CSS布局技巧时，你可能深切地体会到他们的展现略微与其他元素不同，例如，在一个flex或者grid布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。
      
+
      在替换元素使用各式 CSS 布局技巧时，你可能深切地体会到他们的展现略微与其他元素不同，例如，在一个 flex 或者 grid 布局中，元素默认会把拉伸到充满整块区域。图像不会拉伸，而是会被对齐到网格区域或者弹性容器的起始处。
      
 
 
      你可以看到这在下面的示例中发生了，下面的示例有个两列两行的网格容器，里面有四个物件。所有的<div>元素有自己的背景色，拉伸到了充满行和列的地步。但是，图像并没有被拉伸。
      
 
@@ -78,19 +78,19 @@ 
      布局中的替换元素
      
 
 
      这将会无条件地拉伸图像，所以很可能不会是你想要的。
      
 
-
      form元素
      
+
      form 元素
      
 
-
      用CSS格式化表单元素是一个需要技巧的工作，HTML Forms module 包含了详细的格式化表单元素的指导，所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。
      
+
      用 CSS 格式化表单元素是一个需要技巧的工作，HTML Forms module 包含了详细的格式化表单元素的指导，所以我在这里不会全部复述。在本文的这一节有一些关键的值得关注的基础。
      
 
-
      许多表格的控制是通过<input>元素的方式实现的，这定义了简单的表格区域，例如文字输入，更进一步还有HTML5新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的<textarea>，以及那些用来包含和标记表格的一些部分的元素，例如<fieldset>和<legend>。
      
+
      许多表格的控制是通过<input>元素的方式实现的，这定义了简单的表格区域，例如文字输入，更进一步还有 HTML5 新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的<textarea>，以及那些用来包含和标记表格的一些部分的元素，例如<fieldset>和<legend>。
      
 
-
      HTML5还涵盖了一些特性，它们允许Web开发者表示哪些区域是必填的，甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容，或者让必填区域空白，浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上，并没有达成一致。
      
+
      HTML5 还涵盖了一些特性，它们允许 Web 开发者表示哪些区域是必填的，甚至还能标识待填入的内容类型。如果用户输入了一些未预料的内容，或者让必填区域空白，浏览器会显示一个错误信息。不同的浏览器在它们给这样的物件的样式化和自定义余地的问题上，并没有达成一致。
      
 
 
      样式化文本输入元素
      
 
 
      允许文本输入的元素，例如<input type="text">，特定的类型例如<input type="email">以及<textarea>元素，是相当容易样式化的，它们会试图表现得和在你的页面上其他盒子一样。不过这些元素默认的样式化方式会改变，取决于你的用户访问站点时所使用的操作系统和浏览器。
      
 
-
      在下面的示例中，我们已经将一些文本输入用CSS样式化了，你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。
      
+
      在下面的示例中，我们已经将一些文本输入用 CSS 样式化了，你可以看到例如边框、内外边距之类的东西都像你想要的那样生效了。我们正在使用特性选择器来指向不同的输入类型。尝试通过改变边框、向输入区域增加背景色、改变字体和内边距的方式来改变表单的外观。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
      
 
@@ -98,11 +98,11 @@ 
      样式化文本输入元素
      
 
      重点：你应该在改变表单样式的时候小心，确保对于用户而言，它们仍然很容易被认出来是表单元素。你也许可以建立一个无边框的表单输入，其背景也与周围的内容难以区分开来，但是这会让表单很难识别和填入。
      
 
    
 
-
    正如在本教程的HTML部分的form styling课里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同，并在许多浏览器上测试复杂的表单。
    
+
    正如在本教程的 HTML 部分的form styling课里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是假设表单在不同的访客看来十分不同，并在许多浏览器上测试复杂的表单。
    
 
 
    继承和表单元素
    
 
-
    在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。
    
+
    在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用 body 中或者一个父元素中定义的字体，你需要向你的 CSS 中加入这条规则。
    
 
 
    button,
 input,
@@ -112,9 +112,9 @@ 
    继承和表单元素
    
   font-size : 100%;
 } 
    
 
-
    form元素与box-sizing
    
+
    form 元素与 box-sizing
    
 
-
    跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。你已经在我们的盒模型课中学习了box-sizing属性，在样式化表单时候，你可以使用这一知识，确保在给form元素设定宽度和高度时可以有统一的体验。
    
+
    跨浏览器的 form 元素对于不同的挂件使用不同的盒子约束规则。你已经在我们的盒模型课中学习了box-sizing属性，在样式化表单时候，你可以使用这一知识，确保在给 form 元素设定宽度和高度时可以有统一的体验。
    
 
 
    为了保证统一，将所有元素的内外边距均设为0是个好主意，然后在单独进行样式化控制的时候将这些加回来。
    
 
@@ -129,7 +129,7 @@ 
    form元素与box-sizing
    
 
 
    其他有用的设置
    
 
-
    除了上面提到的规则以外，你也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条：
    
+
    除了上面提到的规则以外，你也应该在<textarea>上设置overflow: auto 以避免 IE 在不需要滚动条的时候显示滚动条：
    
 
 
    textarea {
   overflow: auto;
@@ -154,10 +154,10 @@ 
    将一切都放在一起“重置
 } 
    
 
 
    
-
    备注：通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的CSS作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个Normalize.css，它被许多项目用作基础，是非常流行的样式表。
    
+
    备注：通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的 CSS 作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个Normalize.css，它被许多项目用作基础，是非常流行的样式表。
    
 
    
 
-
    至于样式化表单的更加深入的信息，可以看下这些教程的HTML一节的这两篇文章：
    
+
    至于样式化表单的更加深入的信息，可以看下这些教程的 HTML 一节的这两篇文章：
    
 
 
      
  
    • Styling HTML Forms
      • 
@@ -166,11 +166,11 @@ 
      将一切都放在一起“重置
 
 
      测试你的技能
      
 
-
      我们在本文中介绍了很多内容，但是您记住最重要的内容了么？ 在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见技能测试
      
+
      我们在本文中介绍了很多内容，但是您记住最重要的内容了么？在继续之前，您可以通过一些其他测试来验证您是否真正学习到了这些知识，参见技能测试
      
 
 
      小结
      
 
-
      这节课致力于说明在你用CSS处理图像、媒体和其他不普通的元素时，你会遇到的不同之处。在下篇文章中，我们将会了解一些在你样式化HTMl表格时有用的技巧。
      
+
      这节课致力于说明在你用 CSS 处理图像、媒体和其他不普通的元素时，你会遇到的不同之处。在下篇文章中，我们将会了解一些在你样式化 HTMl 表格时有用的技巧。
      
 
 
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
      
 
@@ -178,9 +178,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/images_tasks/index.html b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html
index 98ef5fb5b08d3e..38f1887f826585 100644
--- a/files/zh-cn/learn/css/building_blocks/images_tasks/index.html
+++ b/files/zh-cn/learn/css/building_blocks/images_tasks/index.html
@@ -17,7 +17,7 @@
 
 
      任务一
      
 
-
      在此任务中，您有一张溢出盒子的图像。 我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。
      
+
      在此任务中，您有一张溢出盒子的图像。我们希望图像缩小到适合盒子的大小，而没有多余的空白，并不介意某些图像是否被裁剪。
      
 
 
      An image in a box
      
 
@@ -31,13 +31,13 @@ 
      任务一
      
 
 
      任务二
      
 
-
      在此任务中，您会获得一个简单的表格。 您的任务是对该表单的外观进行以下更改：
      
+
      在此任务中，您会获得一个简单的表格。您的任务是对该表单的外观进行以下更改：
      
 
 
        
- 
      • 使用属性选择器定位.myform中的搜索(search)字段和按钮。
        • 
+ 
      • 使用属性选择器定位.myform 中的搜索 (search)字段和按钮。
        • 
  
      • 使表单字段和按钮使用与表单其余部分相同的文本大小。
        • 
- 
      • 给表单字段和按钮设置10像素的内边距。
        • 
- 
      • 为按钮提供紫色背景，白色前景，无边框和5px的圆角。
        • 
+ 
      • 给表单字段和按钮设置 10 像素的内边距。
        • 
+ 
      • 为按钮提供紫色背景，白色前景，无边框和 5px 的圆角。
        • 
 
      
 
 
      A single line form
      
@@ -57,13 +57,13 @@ 
      评价以及更多帮助
      
 
      如果您希望对自己的工作进行评估，或者遇到困难并希望寻求帮助，请执行以下操作：
      
 
 
        
- 
      1. 将您的工作上传到在线共享编辑器中，例如 CodePen, jsFiddle, Glitch.。 您可以自己编写代码，也可以使用以上部分中链接到的起点文件。
        2. 
- 
      2. 在MDN Discourse forum Learning category. “学习”类别中写一篇帖子，要求评估帮助。 您的帖子应包括：
        3. 
+ 
      3. 将您的工作上传到在线共享编辑器中，例如 CodePen, jsFiddle, Glitch.。您可以自己编写代码，也可以使用以上部分中链接到的起点文件。
        4. 
+ 
      4. 在MDN Discourse forum Learning category. “学习”类别中写一篇帖子，要求评估帮助。您的帖子应包括：
        5. 
 
      
 
 
        
  
      • 描述性标题，例如“Assessment wanted for Images skill test 1”。
        • 
  
      • 您已经尝试过的内容以及您希望我们做什么的详细信息，例如 如果您陷入困境并需要帮助，或者需要评估。
        • 
- 
      • 指向您要评估或需要帮助的示例的链接（如上面的步骤1中所述）。 这是很好好习惯-如果看不到代码，很难帮助存在问题的人。
        • 
+ 
      • 指向您要评估或需要帮助的示例的链接（如上面的步骤 1 中所述）。这是很好好习惯 - 如果看不到代码，很难帮助存在问题的人。
        • 
  
      • 指向实际任务或评估页面的链接，因此我们可以找到您需要帮助的问题。
        • 
 
      
diff --git a/files/zh-cn/learn/css/building_blocks/index.html b/files/zh-cn/learn/css/building_blocks/index.html
index 4d05ba48ec5793..d391e219964a02 100644
--- a/files/zh-cn/learn/css/building_blocks/index.html
+++ b/files/zh-cn/learn/css/building_blocks/index.html
@@ -1,13 +1,13 @@
 ---
-title: CSS构建
+title: CSS 构建
 slug: Learn/CSS/Building_blocks
 translation_of: Learn/CSS/Building_blocks
 ---
 
      {{LearnSidebar}}
      
 
-
      这个模块承接学习CSS 第一步——即你对(CSS)语言和其语法已经足够熟悉、并且有了一些基本的使用经验，该是稍微深入点学习的时候了。这个模块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。
      
+
      这个模块承接学习 CSS 第一步——即你对 (CSS) 语言和其语法已经足够熟悉、并且有了一些基本的使用经验，该是稍微深入点学习的时候了。这个模块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。
      
 
-
      本文目标是，在你进一步了解 为文本添加样式和CSS布局之前，为你提供一个助你写出合格CSS和理解所有基本理论的工具箱。
      
+
      本文目标是，在你进一步了解 为文本添加样式和CSS 布局之前，为你提供一个助你写出合格 CSS 和理解所有基本理论的工具箱。
      
 
 
      先决条件
      
 
@@ -16,8 +16,8 @@ 
      先决条件
      
 
        
  
      1. 使用计算机的基本知识，能够被动使用网络（也就是查看网页的内容）。
        2. 
  
      2. 建立基本工作环境（详见安装基础软件），知道如何建立和管理文档（详见处理文件）。
        3. 
- 
      3. HTML基础知识（参见HTML介绍模块）。
        4. 
- 
      4. CSS基础知识（参见学习CSS 第一步模块）。
        5. 
+ 
      5. HTML 基础知识（参见HTML 介绍模块）。
        6. 
+ 
      6. CSS 基础知识（参见学习 CSS 第一步模块）。
        7. 
 
      
 
 
      
@@ -26,48 +26,48 @@ 
      先决条件
      
 
 
      指南
      
 
-
      本模块包含以下文章，这些文章覆盖了绝大部分CSS语言基础。在学习这些文章的过程中，会有很多练习题供你检验自己的理解程度。
      
+
      本模块包含以下文章，这些文章覆盖了绝大部分 CSS 语言基础。在学习这些文章的过程中，会有很多练习题供你检验自己的理解程度。
      
 
 
      
  
      层叠与继承 
      
- 
      本节目标是帮你建立对——层叠、优先级和继承——这三个最基本的CSS概念的理解。这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。
      
- 
      CSS选择器
      
- 
      有各种类型的CSS选择器，以供我们精确选出要添加样式的元素。在本文及其子文章中，我们会详细过一遍不同类型的选择器，以此窥探CSS选择器的运行机理。子文章包括了：
      
+ 
      本节目标是帮你建立对——层叠、优先级和继承——这三个最基本的 CSS 概念的理解。这些概念控制着 CSS 如何应用于 HTML 以及应用时的优先顺序。
      
+ 
      CSS 选择器
      
+ 
      有各种类型的 CSS 选择器，以供我们精确选出要添加样式的元素。在本文及其子文章中，我们会详细过一遍不同类型的选择器，以此窥探 CSS 选择器的运行机理。子文章包括了：
      
  
      
  
  
      
  
      盒模型
      
- 
      所有CSS都是包在盒子里的，那么理解这些盒子就是让我们能够创建CSS布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务，本节我们会认真看看CSS盒模型，了解其原理及相关术语。
      
+ 
      所有 CSS 都是包在盒子里的，那么理解这些盒子就是让我们能够创建 CSS 布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务，本节我们会认真看看CSS 盒模型，了解其原理及相关术语。
      
  
      背景与边框 
      
- 
      在这一节课中，我们将会看一下你可以用CSS对背景和边框进行哪些创新。通过添加渐变、背景图片和圆角，背景和边框可以解决许多CSS中的样式问题。
      
+ 
      在这一节课中，我们将会看一下你可以用 CSS 对背景和边框进行哪些创新。通过添加渐变、背景图片和圆角，背景和边框可以解决许多 CSS 中的样式问题。
      
  
      处理不同的文本方向
      
- 
      最近几年来，CSS进行了演化，以更好地支持不同方向的内容，既包括自左至右，又包括自上至下（如日语）的内容——这些不同的排布方向被称作书写模式。随着你在这部分学习中不断前进并开始设计网页布局，理解书写模式将会非常有帮助，因此我们会在本文中进行介绍。
      
+ 
      最近几年来，CSS 进行了演化，以更好地支持不同方向的内容，既包括自左至右，又包括自上至下（如日语）的内容——这些不同的排布方向被称作书写模式。随着你在这部分学习中不断前进并开始设计网页布局，理解书写模式将会非常有帮助，因此我们会在本文中进行介绍。
      
  
      溢出的内容
      
- 
      这一节我们会关注CSS中的另一个重要的概念——溢出。溢出发生在一个盒子中包含了过多内容以致超出适当的范围时。在这篇指南中，你将学到什么是溢出以及如何处理它。
      
+ 
      这一节我们会关注 CSS 中的另一个重要的概念——溢出。溢出发生在一个盒子中包含了过多内容以致超出适当的范围时。在这篇指南中，你将学到什么是溢出以及如何处理它。
      
  
      值和单位
      
- 
      CSS中每一个属性都有一个取值或者一系列合理的取值。这一节，我们将了解一些最常用的取值和单位。
      
- 
      在CSS中调整大小
      
- 
      通过目前为止的一系列课程，你已经了解了许多使用CSS调整网页项目大小的方法。了解你所设计的不同特性将呈现的大小很重要，我们将在这节课中总结使用CSS调整大小的不同方法，并定义几个有关尺寸的术语，这将对你有所帮助。
      
+ 
      CSS 中每一个属性都有一个取值或者一系列合理的取值。这一节，我们将了解一些最常用的取值和单位。
      
+ 
      在 CSS 中调整大小
      
+ 
      通过目前为止的一系列课程，你已经了解了许多使用 CSS 调整网页项目大小的方法。了解你所设计的不同特性将呈现的大小很重要，我们将在这节课中总结使用 CSS 调整大小的不同方法，并定义几个有关尺寸的术语，这将对你有所帮助。
      
  
      图片、媒体和表单元素
      
- 
      在这一节，我们会了解CSS是如何处理一些特殊元素的。与常规的盒子相比，图片、其他媒体和表格元素对你使用CSS设置样式的能力提出了不同的要求。理解什么能够实现和什么不能够实现将会免去你一些沮丧，这节课会突出一些你需要了解的主要问题。
      
+ 
      在这一节，我们会了解 CSS 是如何处理一些特殊元素的。与常规的盒子相比，图片、其他媒体和表格元素对你使用 CSS 设置样式的能力提出了不同的要求。理解什么能够实现和什么不能够实现将会免去你一些沮丧，这节课会突出一些你需要了解的主要问题。
      
  
      样式化表格
      
- 
      设计HTML表格的样式并不是多么美妙的工作，但有时却是我们都需要去做的。这篇文章通过突出一些特定的表格样式技巧，为设计好看的HTML表格提供了一份指南。
      
- 
      调试CSS
      
- 
      有时在编写CSS的过程中，你会遇到这样一个问题：你的CSS并没有实现你想要的效果。这篇文章将为你提供指导，教你如何调试CSS问题，以及如何使用所有现代浏览器带有的开发者工具找到问题所在。
      
- 
      组织CSS
      
- 
      当你开始处理更大的样式表和项目时，你将会发现维护一个庞大的样式表非常具有挑战性。在这篇文章中，我们将会简要了解使得CSS易于维护的最佳做法，以及其他人所使用的一些有助于增进可维护性的解决方案。
      
+ 
      设计 HTML 表格的样式并不是多么美妙的工作，但有时却是我们都需要去做的。这篇文章通过突出一些特定的表格样式技巧，为设计好看的 HTML 表格提供了一份指南。
      
+ 
      调试 CSS
      
+ 
      有时在编写 CSS 的过程中，你会遇到这样一个问题：你的 CSS 并没有实现你想要的效果。这篇文章将为你提供指导，教你如何调试 CSS 问题，以及如何使用所有现代浏览器带有的开发者工具找到问题所在。
      
+ 
      组织 CSS
      
+ 
      当你开始处理更大的样式表和项目时，你将会发现维护一个庞大的样式表非常具有挑战性。在这篇文章中，我们将会简要了解使得 CSS 易于维护的最佳做法，以及其他人所使用的一些有助于增进可维护性的解决方案。
      
 
      
 
 
      评估
      
 
-
      想要测试一下你的CSS技能吗？下面这些评估将测试你对以上那些指南中的CSS技能的掌握。
      
+
      想要测试一下你的 CSS 技能吗？下面这些评估将测试你对以上那些指南中的 CSS 技能的掌握。
      
 
-
      CSS基本了解
      
+
      CSS 基本了解
      
 
 
      这项评估测试你对基本语法、选择器、特异性、盒子模型的掌握。
      
 
diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.html b/files/zh-cn/learn/css/building_blocks/organizing/index.html
index eff1819d499e2c..e658f7a7abcf13 100644
--- a/files/zh-cn/learn/css/building_blocks/organizing/index.html
+++ b/files/zh-cn/learn/css/building_blocks/organizing/index.html
@@ -1,44 +1,44 @@
 ---
-title: 组织CSS
+title: 组织 CSS
 slug: Learn/CSS/Building_blocks/Organizing
 translation_of: Learn/CSS/Building_blocks/Organizing
 ---
 
      {{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
      
 
-
      在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的CSS文件很有挑战性。在本文中，我们将会简要看一下在编写你的CSS时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。
      
+
      在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的 CSS 文件很有挑战性。在本文中，我们将会简要看一下在编写你的 CSS 时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。
      
 
 
-   
+   
-   
+   
      
  
   
      
    预备知识：电脑的基本操作，安装了必要的软件，处理文件的基本知识, HTML基础（学习HTML介绍），了解CSS的工作方式（学习CSS入门。）电脑的基本操作，安装了必要的软件，处理文件的基本知识，HTML 基础（学习HTML 介绍），了解 CSS 的工作方式（学习CSS 入门。）
   
      
   
      
    目标：学习组织样式表的一些技巧和最佳实践，了解一些命名常规和在组织CSS以及团队协作时广泛使用的工具。学习组织样式表的一些技巧和最佳实践，了解一些命名常规和在组织 CSS 以及团队协作时广泛使用的工具。
   
      
        
 
      
 
-
      保持你的CSS整洁的技巧
      
+
      保持你的 CSS 整洁的技巧
      
 
 
      这里有一些关于保持你的样式表整整齐齐的方式的普适性建议。
      
 
 
      你的项目有代码风格规范吗？
      
 
-
      如果你在和一个小组共同协作完成一个已有的项目，需要检查的第一件事是这一项目是否已经有了CSS的代码风格规范。小组的代码风格规范应当总是优先于的个人喜好。做事情很多时候没有对错之分，但是统一是很重要的。
      
+
      如果你在和一个小组共同协作完成一个已有的项目，需要检查的第一件事是这一项目是否已经有了 CSS 的代码风格规范。小组的代码风格规范应当总是优先于的个人喜好。做事情很多时候没有对错之分，但是统一是很重要的。
      
 
-
      例如你可以看下MDN的CSS代码规范的示例。.
      
+
      例如你可以看下MDN 的 CSS 代码规范的示例。.
      
 
 
      保持统一
      
 
-
      如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用Tab还是空格来缩进代码？如果是空格，用多少个？）
      
+
      如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用 Tab 还是空格来缩进代码？如果是空格，用多少个？）
      
 
-
      一直遵守一系列规则，你会在编写CSS的时候省去不少精神上的预负担，因为一些决定已经定型了。
      
+
      一直遵守一系列规则，你会在编写 CSS 的时候省去不少精神上的预负担，因为一些决定已经定型了。
      
 
-
      将CSS格式化成可读的形式
      
+
      将 CSS 格式化成可读的形式
      
 
-
      你可以看到很多CSS格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：
      
+
      你可以看到很多 CSS 格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：
      
 
 
      .box { background-color: #567895; }
 h2 { background-color: black; color: white; }
      
@@ -54,16 +54,16 @@ 
      将CSS格式化成可读的形式
      
 
-
      CSS不会管你使用哪种方式来进行格式化，我们自己的看法是，将每个属性值对放在新的一行会更好读。
      
+
      CSS 不会管你使用哪种方式来进行格式化，我们自己的看法是，将每个属性值对放在新的一行会更好读。
      
 
-
      为你的CSS加注释
      
+
      为你的 CSS 加注释
      
 
-
      在你的CSS里加入注释，不仅可以帮任何未来的开发者处理你的CSS文件，也可以在你离开项目一段时间后，帮你在回来时重新上手。
      
+
      在你的 CSS 里加入注释，不仅可以帮任何未来的开发者处理你的 CSS 文件，也可以在你离开项目一段时间后，帮你在回来时重新上手。
      
 
-
      /* 这是一条CSS注释，
+
      /* 这是一条 CSS 注释，
 它可以分成好几行。*/
      
 
-
      在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段CSS的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是||。
      
+
      在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段 CSS 的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是||。
      
 
 
      /* || General styles */
 
@@ -79,9 +79,9 @@ 
      为你的CSS加注释
      
 
 
      
 
-
      你不必在你的CSS中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。
      
+
      你不必在你的 CSS 中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。
      
 
-
      为了对旧浏览器保持兼容，你用某种特殊方法使用了一种CSS属性，示例：
      
+
      为了对旧浏览器保持兼容，你用某种特殊方法使用了一种 CSS 属性，示例：
      
 
 
      .box {
   background-color: red; /* fallback for older browsers that don't support gradients */
@@ -89,7 +89,7 @@ 
      为你的CSS加注释
      
 }
 
      
 
-
      或许你是照着一个教程来做事的，CSS有些不够直观。此时，你应该在注释里面加入教程的URL。你应该在你一年或者更长时间以后重新审视你的项目，但只是模模糊糊地想起来之前有个优秀的教程，不知道它在哪里的时候，感谢之前加入注释的自己。
      
+
      或许你是照着一个教程来做事的，CSS 有些不够直观。此时，你应该在注释里面加入教程的 URL。你应该在你一年或者更长时间以后重新审视你的项目，但只是模模糊糊地想起来之前有个优秀的教程，不知道它在哪里的时候，感谢之前加入注释的自己。
      
 
 
      在你的样式表里面加入逻辑段落
      
 
@@ -140,7 +140,7 @@ 
      在你的样式表里面加
 .logo { ... }
 
      
 
-
      最后我们可以在CSS里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。
      
+
      最后我们可以在 CSS 里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。
      
 
 
      /* || STORE PAGES */
 
@@ -153,7 +153,7 @@ 
      在你的样式表里面加
 
 
      避免太特定的选择器
      
 
-
      如果你创建了很特定的选择器，你经常会发现，你需要在你的CSS中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有main类的<article>里面的带有box类的<p>上应用了规则。
      
+
      如果你创建了很特定的选择器，你经常会发现，你需要在你的 CSS 中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有main类的<article>里面的带有box类的<p>上应用了规则。
      
 
 
      article.main p.box {
   border: 1px solid #ccc;
@@ -171,25 +171,25 @@ 
      将大样式表分成几个
 
 
      尤其在你对站点的不同部分设置了很不同的样式的时候，你会想要有个包含了所有普适规则的样式表，还有包含了某些段落所需要的特定规则的更小的样式表。你可以将一个页面连接到多个样式表，层叠的一般规则会在这里生效，即连接的靠前的样式表里面的规则会比后面的有更高优先级。
      
 
-
      例如我们会将我们站点的一部分作为一个在线商店，许多CSS只会用于样式化商店需要的产品列表和表单。将这些东西放在另外一张样式表里面，只在商店页面进行连接，这会是合理的做法。
      
+
      例如我们会将我们站点的一部分作为一个在线商店，许多 CSS 只会用于样式化商店需要的产品列表和表单。将这些东西放在另外一张样式表里面，只在商店页面进行连接，这会是合理的做法。
      
 
-
      这可以让你更容易保持CSS的组织性，也意味着如果有多人在写CSS，你会更少遇到有两个人需要同时编写相同的样式表的情况，防止在源代码的控制上产生冲突。
      
+
      这可以让你更容易保持 CSS 的组织性，也意味着如果有多人在写 CSS，你会更少遇到有两个人需要同时编写相同的样式表的情况，防止在源代码的控制上产生冲突。
      
 
 
      其他能帮上忙的工具
      
 
-
      CSS本身没有什么内置的组织方式，所以你需要自己完成建立编写CSS时维持统一性和规则的工作。Web社区也已经开发了多种工具和方法，帮助你管理大些的CSS项目。由于它们对你的研究会有帮助，而且在你和其他人协作的时候，你也很可能会遇到这些东西，我们加入了一个对其中一些工具和方式的简短的指导。
      
+
      CSS 本身没有什么内置的组织方式，所以你需要自己完成建立编写 CSS 时维持统一性和规则的工作。Web 社区也已经开发了多种工具和方法，帮助你管理大些的 CSS 项目。由于它们对你的研究会有帮助，而且在你和其他人协作的时候，你也很可能会遇到这些东西，我们加入了一个对其中一些工具和方式的简短的指导。
      
 
-
      CSS方法论
      
+
      CSS 方法论
      
 
-
      不必需要自己制定编写CSS的规则，你可以选择接纳一个已经已经由社群设计、经由诸多项目检验的方法，并从中获益。这些方法论都是有着结构化的编写和组织CSS途径的CSS代码指南。典型地，与你为你的项目编写和优化每个选择器为自己定义的规则组相比，它们会倾向于产生更多的多余代码。
      
+
      不必需要自己制定编写 CSS 的规则，你可以选择接纳一个已经已经由社群设计、经由诸多项目检验的方法，并从中获益。这些方法论都是有着结构化的编写和组织 CSS 途径的 CSS 代码指南。典型地，与你为你的项目编写和优化每个选择器为自己定义的规则组相比，它们会倾向于产生更多的多余代码。
      
 
 
      但是，在接纳了一个方法以后，你的代码会更有条理，而且因为这些体系许多都是被很广泛使用的，其他的开发者更有可能理解你在使用的方式，会以相同的方式编写他们自己的代码，而不需要从头接纳你自己的个人方法论。
      
 
 
      OOCSS
      
 
-
      你会遇到的大多数方式都有一部分归功于面向对象的CSS（OOCSS）的概念，这是一种因Nicole Sullivan的努力而流行的方式。OOCSS的基本理念是将你的CSS分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS的标准示例是在The Media Object中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。
      
+
      你会遇到的大多数方式都有一部分归功于面向对象的 CSS（OOCSS）的概念，这是一种因Nicole Sullivan 的努力而流行的方式。OOCSS 的基本理念是将你的 CSS 分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS 的标准示例是在The Media Object中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。
      
 
-
      如果你没有使用一种OOCSS的方法，你或许会创建一个用在这种排布所应用的不同地方的自定义CSS，例如创建一个叫做comment的类，用于组件部分的一组规则，然后是叫做list-item的类，除了一些细小的区别外，它几乎和comment类完全相同。这两个组件之间的不同是列表项有一个底边，在评论里的图像有边框而列表项里面的图像没有。
      
+
      如果你没有使用一种 OOCSS 的方法，你或许会创建一个用在这种排布所应用的不同地方的自定义 CSS，例如创建一个叫做comment的类，用于组件部分的一组规则，然后是叫做list-item的类，除了一些细小的区别外，它几乎和comment类完全相同。这两个组件之间的不同是列表项有一个底边，在评论里的图像有边框而列表项里面的图像没有。
      
 
 
      .comment {
   display: grid;
@@ -214,7 +214,7 @@ 
      OOCSS
      
   font-size: .8rem;
 }
      
 
-
      在OOCSS中，你可以建立一个叫作media的排布，里面包含所有的两种排布所共有的CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。
      
+
      在 OOCSS 中，你可以建立一个叫作media的排布，里面包含所有的两种排布所共有的 CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。
      
 
 
      .media {
   display: grid;
@@ -233,7 +233,7 @@ 
      OOCSS
      
   border-bottom: 1px solid grey;
 } 
      
 
-
      在你的HTML里面，评论需要同时应用media和comment类：
      
+
      在你的 HTML 里面，评论需要同时应用media和comment类：
      
 
 
      <div class="media comment">
   <img />
@@ -250,11 +250,11 @@ 
      OOCSS
      
   </li>
 </ul>
      
 
-
      Nicole Sullivan在描述这种方式和推广上所做的工作导致，即使是那些不严格遵守OOCSS方式的人，今天也可以大致以这种方式复用CSS，它已经普遍地进入到我们的理解当中，成为了与事物交互的好办法。
      
+
      Nicole Sullivan 在描述这种方式和推广上所做的工作导致，即使是那些不严格遵守 OOCSS 方式的人，今天也可以大致以这种方式复用 CSS，它已经普遍地进入到我们的理解当中，成为了与事物交互的好办法。
      
 
 
      BEM
      
 
-
      BEM即为块级元素修饰字符（Block Element Modifier）。在BEM中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用BEM的代码，因为代码中在CSS的类里使用了多余的一个下划线和连字符。例如看看这个来自关于BEM命名常规的页面里面的HTML所应用的类：
      
+
      BEM 即为块级元素修饰字符（Block Element Modifier）。在 BEM 中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用 BEM 的代码，因为代码中在 CSS 的类里使用了多余的一个下划线和连字符。例如看看这个来自关于BEM 命名常规的页面里面的 HTML 所应用的类：
      
 
 
      <form class="form form--theme-xmas form--simple">
   <input class="form__input" type="text" />
@@ -263,29 +263,29 @@ 
      BEM
      
     type="submit" />
 </form>
      
 
-
      增加的类和应用到OOCSS例子里面的相似，但是它们遵守了BEM严格的命名常规。
      
+
      增加的类和应用到 OOCSS 例子里面的相似，但是它们遵守了 BEM 严格的命名常规。
      
 
-
      BEM在大些的Web项目中被广泛使用，许多人用这种方式写他们的CSS。你可能会在没有提及为何CSS如此布局的时候，遇到BEM语法的例子，甚至是在教程中
      
+
      BEM 在大些的 Web 项目中被广泛使用，许多人用这种方式写他们的 CSS。你可能会在没有提及为何 CSS 如此布局的时候，遇到 BEM 语法的例子，甚至是在教程中
      
 
-
      阅读BEM 101 中关于CSS Tricks的段落以了解更多和这个系统相关的信息。
      
+
      阅读BEM 101 中关于 CSS Tricks 的段落以了解更多和这个系统相关的信息。
      
 
 
      其他常见体系
      
 
-
      应用中，有很多这样的体系。其他流行的方式包括Jonathan Snook创造的Scalable and Modular Architecture for CSS (SMACSS)、Harry Roberts的ITCSS以及原本由Yahoo!创造的Atomic CSS (ACSS)。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。
      
+
      应用中，有很多这样的体系。其他流行的方式包括 Jonathan Snook 创造的Scalable and Modular Architecture for CSS (SMACSS)、Harry Roberts 的ITCSS以及原本由 Yahoo! 创造的Atomic CSS (ACSS)。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。
      
 
 
      使用这样的体系的缺点是，它们会看起来过于复杂，尤其是对于小项目。
      
 
-
      CSS的构建体系
      
+
      CSS 的构建体系
      
 
-
      另一种组织CSS的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写CSS。有很多工具，我们将它们分成预处理工具和后处理工具。预处理工具以你的原文件为基础运行，将它们转化为样式表；后处理工具使用你已完成的样式表，然后对它做点手脚——也许是优化它以使它加载得更快。
      
+
      另一种组织 CSS 的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写 CSS。有很多工具，我们将它们分成预处理工具和后处理工具。预处理工具以你的原文件为基础运行，将它们转化为样式表；后处理工具使用你已完成的样式表，然后对它做点手脚——也许是优化它以使它加载得更快。
      
 
 
      使用这些工具的任何一部分都需要你的开发环境能运行进行处理工作的脚本。许多代码编辑器能为你做这项工作，或者你也可以安装一个命令行工具来辅助工作。
      
 
-
      最为流行的预处理工具是Sass，这里不是Sass的教程，所以我只会简要地解释一些Sass能做的事情，在组织的时候真的会帮到你，即使你没有用到Sass的任何其他的独特功能。
      
+
      最为流行的预处理工具是Sass，这里不是 Sass 的教程，所以我只会简要地解释一些 Sass 能做的事情，在组织的时候真的会帮到你，即使你没有用到 Sass 的任何其他的独特功能。
      
 
 
      定义变量
      
 
-
      CSS现在有原生的自定义属性，所以这个功能越来越没那么重要了，但是你使用Sass的可能原因之一为，能够作为设置定义用于一个项目的所有颜色和字体，之后这些变量在项目中可用。这意味着如果你意识到你用了错误的蓝色阴影，你只需要在一个地方修改。
      
+
      CSS 现在有原生的自定义属性，所以这个功能越来越没那么重要了，但是你使用 Sass 的可能原因之一为，能够作为设置定义用于一个项目的所有颜色和字体，之后这些变量在项目中可用。这意味着如果你意识到你用了错误的蓝色阴影，你只需要在一个地方修改。
      
 
 
      如果我们创建了在下面的第一行里面叫做$base-color的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。
      
 
@@ -295,7 +295,7 @@ 
      定义变量
      
   border: 1px solid $base-color;
 }
      
 
-
      编译完CSS后，你会在最终的样式表里面得到下面的CSS：
      
+
      编译完 CSS 后，你会在最终的样式表里面得到下面的 CSS：
      
 
 
      .alert {
   border: 1px solid #c6538c;
@@ -303,23 +303,23 @@ 
      定义变量
      
 
 
      编译组件样式表
      
 
-
      我在上面提到了，一种组织CSS的方式是将样式表分成小的样式表。在使用Sass时，你可以在另一个层次上理解，然后得到许多小样式表——甚至到了每个组件都有一个独立样式表的地步。使用Sass中的include功能，这些都可以被编译为一个、或者少数几个真正链接到你的网站的样式表。
      
+
      我在上面提到了，一种组织 CSS 的方式是将样式表分成小的样式表。在使用 Sass 时，你可以在另一个层次上理解，然后得到许多小样式表——甚至到了每个组件都有一个独立样式表的地步。使用 Sass 中的 include 功能，这些都可以被编译为一个、或者少数几个真正链接到你的网站的样式表。
      
 
 
      在这篇博文里面，你可以看下一个开发者是如何处理这个问题的。
      
 
 
      
-
      备注：一个简单的尝试Sass的方式是使用CodePen，你可以为一个Pen在设置中启用用于你的CSS的Sass，CodePen将会为你运行Sass语法分析功能，这样你就能看到应用了普通CSS的生成网页。有时你会发现CSS教程在它们的CodePen演示里面使用了Sass而不是普通CSS，所以了解一点点关于Sass的事情是有用的。
      
+
      备注：一个简单的尝试 Sass 的方式是使用CodePen，你可以为一个 Pen 在设置中启用用于你的 CSS 的 Sass，CodePen 将会为你运行 Sass 语法分析功能，这样你就能看到应用了普通 CSS 的生成网页。有时你会发现 CSS 教程在它们的 CodePen 演示里面使用了 Sass 而不是普通 CSS，所以了解一点点关于 Sass 的事情是有用的。
      
 
      
 
 
      后处理以进行优化
      
 
-
      如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化CSS。后处理解决方案中，通过这种方式实现的一个例子是cssnano。
      
+
      如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化 CSS。后处理解决方案中，通过这种方式实现的一个例子是cssnano。
      
 
 
      结语
      
 
-
      这是我们学习CSS的指导的最后一部分，正如你所见，你可以通过许多方式从这里继续对CSS的探索。
      
+
      这是我们学习 CSS 的指导的最后一部分，正如你所见，你可以通过许多方式从这里继续对 CSS 的探索。
      
 
-
      欲了解更多关于CSS布局的事情，查看学习CSS布局这节课.
      
+
      欲了解更多关于 CSS 布局的事情，查看学习 CSS 布局这节课。
      
 
 
      你应该也有了探索MDN CSS学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的CSS Cookbook来了解可用的排布，在诸如Guide to CSS Grid Layout的一些更加专门的指导里阅读更多。.
      
 
@@ -329,9 +329,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html
index 0e4985ea036cdb..1c4271bd9d3af8 100644
--- a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html
+++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.html
@@ -5,13 +5,13 @@
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
      
 
-
      本节课，我们来了解一下CSS中另外一个重要的概念——溢出。溢出是在盒子无法容纳下太多的内容的时候发生的。在这篇教程里面，你将会学习到什么是溢出，以及如何控制它。
      
+
      本节课，我们来了解一下 CSS 中另外一个重要的概念——溢出。溢出是在盒子无法容纳下太多的内容的时候发生的。在这篇教程里面，你将会学习到什么是溢出，以及如何控制它。
      
 
 
-   
+   
@@ -22,11 +22,11 @@
 
 
      什么是溢出？
      
 
-
      我们知道，CSS中万物皆盒，因此我们可以通过给{{cssxref("width")}}和{{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写CSS的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到CSS布局的时候。
      
+
      我们知道，CSS 中万物皆盒，因此我们可以通过给{{cssxref("width")}}和{{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写 CSS 的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到 CSS 布局的时候。
      
 
-
      CSS尽力减少“数据损失”
      
+
      CSS 尽力减少“数据损失”
      
 
-
      我们从两个展示了在碰到溢出的时候，CSS默认会如何处理的例子开始吧。
      
+
      我们从两个展示了在碰到溢出的时候，CSS 默认会如何处理的例子开始吧。
      第一个例子是，一个盒子，在块方向上已经受到height的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。
      
 
@@ -36,15 +36,15 @@ 
      CSS尽力减少“数据损失”
      {{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}
      
 
-
      你也许会好奇，为什么CSS默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？
      
+
      你也许会好奇，为什么 CSS 默认会采取如此不整洁的方式，让内容这么凌乱地溢出出来呢？为何不把多余的内容隐藏起来，或者让盒子变大呢？
      
 
-
      只要有可能，CSS就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在CSS的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的CSS导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。
      
+
      只要有可能，CSS 就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在 CSS 的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以 CSS 反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的 CSS 导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。
      
 
-
      如果你已经用width或者height限制住了一个盒子，CSS假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。
      
+
      如果你已经用width或者height限制住了一个盒子，CSS 假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。
      在下面的几节课里，我们会看一下各种不同的控制尺寸的方式，以减少溢出的影响。但是，如果你需要固定的尺寸，你也可以控制溢出表现的形式。那么让我们接着读下去吧！
      
 
-
      overflow属性
      
+
      overflow 属性
      {{cssxref("overflow")}}属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。overflow的默认值为visible，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。
      
 
@@ -62,14 +62,14 @@ 
      overflow属性
      {{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}
      
 
-
      你也可以用{{cssxref("overflow-x")}}，以在x轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下{{cssxref("word-break")}}或者{{cssxref("overflow-wrap")}}属性。除此以外，一些在CSS里面调整大小这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。
      
+
      你也可以用{{cssxref("overflow-x")}}，以在 x 轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下{{cssxref("word-break")}}或者{{cssxref("overflow-wrap")}}属性。除此以外，一些在 CSS 里面调整大小这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。
      {{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}
      和scroll一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。
      
-
      注意： 你可以用overflow属性指定x轴和y轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对overflow-x生效而第二个对overflow-y生效。否则，overflow-x和overflow-y将会被设置成同样的值。例如，overflow: scroll hidden会把overflow-x设置成scroll，而overflow-y则为hidden。
      
+
      注意： 你可以用overflow属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对overflow-x生效而第二个对overflow-y生效。否则，overflow-x和overflow-y将会被设置成同样的值。例如，overflow: scroll hidden会把overflow-x设置成scroll，而overflow-y则为hidden。
      
 
      如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用overflow: auto。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。
      
@@ -80,17 +80,17 @@ 
      overflow属性
      溢出建立了块级排版上下文
      
 
-
      CSS中有所谓块级排版上下文（Block Formatting Context，BFC）的概念。现在你不用太过在意，但是你应该知道，在你使用诸如scroll或者auto的时候，你就建立了一个块级排版上下文。结果就是，你改变了overflow的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。
      
+
      CSS 中有所谓块级排版上下文（Block Formatting Context，BFC）的概念。现在你不用太过在意，但是你应该知道，在你使用诸如scroll或者auto的时候，你就建立了一个块级排版上下文。结果就是，你改变了overflow的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。
      网页设计时不需要的溢出
      现代网页布局的方式（正如CSS layout模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。
      
 
-
      在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的CSS可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。
      
+
      在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的 CSS 可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。
      小结
      
 
-
      这节短短的课已经介绍了溢出的概念，你现在明白，CSS会尽力不让溢出的内容不可见，因为这会造成数据损失。你已经发现，你可以控制住潜在的溢出，同样，你也应该测试你的作品，确保你不会一下子就弄出令人困扰的溢出。
      
+
      这节短短的课已经介绍了溢出的概念，你现在明白，CSS 会尽力不让溢出的内容不可见，因为这会造成数据损失。你已经发现，你可以控制住潜在的溢出，同样，你也应该测试你的作品，确保你不会一下子就弄出令人困扰的溢出。
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
      
 
@@ -98,9 +98,9 @@ 
      模块目录
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html
index 8339932c8840ec..bbf44badc1e71b 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/zh-cn/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -5,13 +5,13 @@
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
      
 
-
      从HTML的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。
      
+
      从 HTML 的学习中，你已经知道，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS 中，你能用属性选择器来选中带有特定属性的元素。本节课中，我们将会为你展示如何使用这些很有用的选择器。
      
  
   
      
    前提：基础的电脑知识，安装了基本的软件, 处理文件的基础知识, HTML基础（学习 Introduction to HTML），对CSS的工作原理有所了解（学习 CSS first steps.)基础的电脑知识，安装了基本的软件, 处理文件的基础知识，HTML 基础（学习 Introduction to HTML），对 CSS 的工作原理有所了解（学习 CSS first steps.)
   
      
   
      
    目标：
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
      
-   
+   
@@ -47,7 +47,7 @@ 
      存否和值选择器
      
@@ -63,7 +63,7 @@ 
      存否和值选择器
      下面的示例中，你可以看到这些选择器是怎样使用的。
        
- 
      • 使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
        • 
+ 
      • 使用li[class]，我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。
        • 
  
      • li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
        • 
  
      • li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。
        • 
 
      
@@ -113,14 +113,14 @@ 
      子字符串匹配选择器
      大小写敏感
      
 
-
      如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的。
      
+
      如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML 中是大小写敏感的。
      
 
-
      下面的示例中，第一个选择器将会匹配一个开头为a的值，这样它只匹配了第一项，因为另外两项开头是大写的A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。
      
+
      下面的示例中，第一个选择器将会匹配一个开头为a的值，这样它只匹配了第一项，因为另外两项开头是大写的 A。第二个选择器使用了大小写不敏感的标记，于是匹配了所有项。
      {{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
      
-
      备注：此外还有一个更加新的s值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为HTML时也没啥用。
      
+
      备注：此外还有一个更加新的s值，它会强制在上下文的匹配正常为大小写不敏感的时候，强行要求匹配时大小写敏感。不过，在浏览器中它不太受支持，而且在上下文为 HTML 时也没啥用。
      
 
      接下来……
      
@@ -133,9 +133,9 @@ 
      模块目录
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html
index 54c4e46f08cced..ac14afa352828e 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html
+++ b/files/zh-cn/learn/css/building_blocks/selectors/combinators/index.html
@@ -11,11 +11,11 @@
  
-   
+   
-   
+   
      
  
   
      
    学习前提：基础电脑知识，安装了基本的软件，处理文件的基本知识， HTML基础（学习HTML介绍），以及对CSS工作原理的了解（学习CSS初步）基础电脑知识，安装了基本的软件，处理文件的基本知识，HTML 基础（学习HTML 介绍），以及对 CSS 工作原理的了解（学习CSS 初步）
   
      
   
      
    目标：
    [attr~=value]
    p[class~="special"]
    
-    
      匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。
      
+    
      匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。
      
 
     
      注意，在一列中的好几个值，是用空格隔开的。
      
          		
 
 
 
 
 
 
 
 
 
 
 
 
 
      
   
      
    学习前提：基础电脑知识，安装了基本的软件，处理文件的基本知识， HTML基础（学习HTML介绍），以及对CSS工作原理的了解（学习CSS初步）基础电脑知识，安装了基本的软件，处理文件的基本知识，HTML 基础（学习HTML 介绍），以及对 CSS 工作原理的了解（学习CSS 初步）
   
      
   
      
    目标：了解CSS里面可用的不同关系选择器。了解 CSS 里面可用的不同关系选择器。
   
      
        
 
      
@@ -48,7 +48,7 @@ 
      邻接兄弟
      
 
 
      p + img
      
 
-
      常见的使用场景是， 改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨<h1>的段，然后样式化它。
      
+
      常见的使用场景是，改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨<h1>的段，然后样式化它。
      
 
 
      如果你往<h1>和<p>之间插入其他的某个元素，例如<h2>，你将会发现，段落不再与选择器匹配，因而不会应用元素邻接时的前景和背景色。
      
 
@@ -70,9 +70,9 @@ 
      使用关系选择器
      
 
 
      ul > li[class="a"]  {  }
      
 
-
      不过，建立一长列选中你的文档中很明确的部分的选择器的时候，小心一些。这些CSS规则难以复用，因为你让选择器在表示标记文本中的元素的相对位置上过于明确。
      
+
      不过，建立一长列选中你的文档中很明确的部分的选择器的时候，小心一些。这些 CSS 规则难以复用，因为你让选择器在表示标记文本中的元素的相对位置上过于明确。
      
 
-
      建立简单的一个类，然后把它应用到有需求的元素上，经常会是更好的做法。不过话说回来，如果你需要让你的文档变换一下样式，但是没法编辑HTML（也许是因为它由CMS生成）的话，你的关系选择器的知识会派上用场。
      
+
      建立简单的一个类，然后把它应用到有需求的元素上，经常会是更好的做法。不过话说回来，如果你需要让你的文档变换一下样式，但是没法编辑 HTML（也许是因为它由 CMS 生成）的话，你的关系选择器的知识会派上用场。
      
 
 
      小试牛刀！
      
 
@@ -80,7 +80,7 @@ 
      小试牛刀！
      
 
 
      继续学习
      
 
-
      这是我们选择器这节课的最后一节了。下面我们将会继续前进，学习CSS的另一个重要部分——CSS盒模型。
      
+
      这是我们选择器这节课的最后一节了。下面我们将会继续前进，学习 CSS 的另一个重要部分——CSS 盒模型。
      
 
 
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
      
 
@@ -88,9 +88,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/index.html
index 7c851678c60db0..6cadcedc001825 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/index.html
+++ b/files/zh-cn/learn/css/building_blocks/selectors/index.html
@@ -1,43 +1,43 @@
 ---
-title: CSS选择器
+title: CSS 选择器
 slug: Learn/CSS/Building_blocks/Selectors
 tags:
   - CSS
-  - CSS选择器
+  - CSS 选择器
   - 初学者
   - 类
 translation_of: Learn/CSS/Building_blocks/Selectors
 ---
 
       {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
      
 
-
      {{Glossary("CSS")}}中，选择器用来指定网页上我们想要样式化的{{glossary("HTML")}}元素。有CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。
      
+
      {{Glossary("CSS")}}中，选择器用来指定网页上我们想要样式化的{{glossary("HTML")}}元素。有 CSS 选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文和本文的子篇中，我们将会详细地讲授选择器的不同使用方式，并了解它们的工作原理。
      
 
 
-   
+   
-   
+   
      
  
   
      
    学习前提：计算机的基本知识， 安装了基础软件，处理文件的基本知识，HTML基础（学习HTML介绍）以及对CSS工作方式的了解（学习CSS初步）计算机的基本知识， 安装了基础软件，处理文件的基本知识，HTML 基础（学习HTML 介绍）以及对 CSS 工作方式的了解（学习CSS 初步）
   
      
   
      
    目标：详细学习CSS选择器的工作方式。详细学习 CSS 选择器的工作方式。
   
      
        
 
      
 
 
      选择器是什么？
      
 
-
      你也许已经见过选择器了。CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
      
+
      你也许已经见过选择器了。CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
      
 
 
      Some code with the h1 highlighted.
      
 
-
      前面的文章中，你也许已经遇到过几种不同的选择器，了解到选择器可以以不同的方式选择元素，比如选择诸如h1的元素，或者是根据class (类) 选择例如.special。
      
+
      前面的文章中，你也许已经遇到过几种不同的选择器，了解到选择器可以以不同的方式选择元素，比如选择诸如h1的元素，或者是根据 class (类) 选择例如.special。
      
 
-
      CSS中，选择器由CSS选择器规范加以定义。就像是CSS的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在CSS 3中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。
      
+
      CSS 中，选择器由 CSS 选择器规范加以定义。就像是 CSS 的其他部分那样，它们需要浏览器的支持才能工作。你会遇到的大多数选择器都是在CSS 3中定义的，这是一个成熟的规范，因此你会发现浏览器对这些选择器有良好的支持。
      
 
 
      选择器列表
      
 
-
      如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。
      
+
      如果你有多个使用相同样式的 CSS 选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的 CSS，那么我可以把它们写成两个分开的规则。
      
 
 
      h1 {
   color: blue;
@@ -60,13 +60,13 @@ 
      选择器列表
      
   color: blue;
 } 
      
 
-
      在下面的实时示例中，试着把两个有ID声明的选择器组合起来。外观在组合起来以后应该还是一样的。
      
+
      在下面的实时示例中，试着把两个有 ID 声明的选择器组合起来。外观在组合起来以后应该还是一样的。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 
      
 
 
      当你使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。
      
 
-
      在下面的示例中，无效的class选择器会被忽略，而h1选择器仍会被样式化。
      
+
      在下面的示例中，无效的 class 选择器会被忽略，而h1选择器仍会被样式化。
      
 
 
      h1 {
   color: blue;
@@ -76,7 +76,7 @@ 
      选择器列表
      
   color: blue;
 } 
      
 
-
      但是在被组合起来以后，整个规则都会失效，无论是h1还是这个class都不会被样式化。
      
+
      但是在被组合起来以后，整个规则都会失效，无论是h1还是这个 class 都不会被样式化。
      
 
 
      h1, ..special {
   color: blue;
@@ -86,17 +86,17 @@ 
      选择器的种类
      
 
 
      有几组不同的选择器，知道了需要哪种选择器，你会更容易正确使用它们。在本文的子篇中，我们将会来更详细地看下不同种类的选择器。
      
 
-
      类型、类和ID选择器
      
+
      类型、类和 ID 选择器
      
 
-
      这个选择器组，第一个是指向了所有HTML元素<h1>。
      
+
      这个选择器组，第一个是指向了所有 HTML 元素<h1>。
      
 
 
      h1 { }
      
 
-
      它也包含了一个class的选择器：
      
+
      它也包含了一个 class 的选择器：
      
 
 
      .box { }
      
 
-
      亦或，一个id选择器：
      
+
      亦或，一个 id 选择器：
      
 
 
      #unique { }
      
 
@@ -128,20 +128,20 @@ 
      运算符
      
 
 
      接下来要做的事情
      
 
-
      你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是MDN上——的各种选择器的直接链接；你也可以继续下去，开始你的了解类型、类和ID选择器的旅程。
      
+
      你可以看下下面的选择器参考表，可以获得到这个学习章节——或者总体来说是 MDN 上——的各种选择器的直接链接；你也可以继续下去，开始你的了解类型、类和 ID 选择器的旅程。
      
 
 
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
      
 
 
      选择器参考表
      
 
-
      下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的MDN页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验CSS的时候。
      
+
      下面的表格让你可以浏览你可以用的选择器，还有本指南中教你如何使用每种选择器的页面的链接。我还加上了一个能查看浏览器对每个选择器的支持信息的 MDN 页面链接。你可以把这个作为回头的参考，在你以后需要查询文献中提到的选择器的时候，或者是在你广义上实验 CSS 的时候。
      
 
 
-   
+   
@@ -161,9 +161,9 @@ 
      选择器参考表
      
-   
+   
-   
+   
@@ -207,9 +207,9 @@ 
      模块目录
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index d8573af9f36fb4..65047595e408c4 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/zh-cn/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
@@ -5,13 +5,13 @@
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
      
 
-
      下一组我们将了解的选择器被称为伪类和伪元素。这一类选择器的数量众多，通常用于很明确的目的。一旦你了解了如何使用它们，你便可以通过查阅列表来寻找合适的那一项以完成你想要的选择。与之前一样，每个选择器相关的MDN页面都将帮助你了解各浏览器的支持情况。
      
+
      下一组我们将了解的选择器被称为伪类和伪元素。这一类选择器的数量众多，通常用于很明确的目的。一旦你了解了如何使用它们，你便可以通过查阅列表来寻找合适的那一项以完成你想要的选择。与之前一样，每个选择器相关的 MDN 页面都将帮助你了解各浏览器的支持情况。
      
  
   
      
    选择器
    示例学习CSS的教程学习 CSS 的教程
   
      
        
  
    
      类选择器
   
      
   
      ID选择器ID 选择器
    #unique { }ID选择器ID 选择器
   
      
   
      
    标签属性选择器
 
 
 
 
      
-   
+   
@@ -30,15 +30,15 @@ 
      什么是伪类？
      简单伪类示例
      
 
-
      让我们看下一个简单的示例。如果我们想要让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加CSS，正如下面的示例展示的这样：
      
+
      让我们看下一个简单的示例。如果我们想要让一篇文章中的第一段变大加粗，可为此段加上一个类，然后为那个类添加 CSS，正如下面的示例展示的这样：
      {{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}
      
 
-
      不过，这在维护的时候可能会很恼人——要是文档的头部又加上一段的话呢？我们会需要把这个类挪到新加的这段上。假如我们不加类，我们可以使用{{cssxref(":first-child")}}伪类选择器——这将一直选中文章中的第一个子元素，我们将不再需要编辑HTML（编辑HTML并不总是可行，也许是因为它是由一个CMS生成的）。
      
+
      不过，这在维护的时候可能会很恼人——要是文档的头部又加上一段的话呢？我们会需要把这个类挪到新加的这段上。假如我们不加类，我们可以使用{{cssxref(":first-child")}}伪类选择器——这将一直选中文章中的第一个子元素，我们将不再需要编辑 HTML（编辑 HTML 并不总是可行，也许是因为它是由一个 CMS 生成的）。
      {{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}
      
 
-
      所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的HTML加入类一样。看下MDN上的另外几个示例：
      
+
      所有的伪类以同样的方式实现。它们选中你的文档中处于某种状态的那部分，表现得就像是你已经向你的 HTML 加入类一样。看下 MDN 上的另外几个示例：
        
  
      • :last-child
        • 
@@ -59,7 +59,7 @@ 
        用户行为伪类
        
 
 
        伪元素是啥？
        
 
-
        伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
        
+
        伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
        
 
 
        ::pseudo-element-name
        
 
@@ -67,7 +67,7 @@ 
        伪元素是啥？
        
 
        备注：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。
        
 
 
-
        例如，如果你想选中一段的第一行，你可以把它用一个<span>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变HTML的方式来可预测地这么做是不可能的。
        
+
        例如，如果你想选中一段的第一行，你可以把它用一个<span>元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度，这样做会失败。由于我们一般不会知道一行能放下多少单词/字符——因为屏幕宽度或者字体大小改变的时候这也会变——通过改变 HTML 的方式来可预测地这么做是不可能的。
        
 
 
        ::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。
        
 
@@ -79,22 +79,22 @@ 
        伪元素是啥？
        
 
 
        把伪类和伪元素组合起来
        
 
-
        如果你想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起。试着编辑前面的实时示例，让它使用下面的CSS。这里的意思是，我们想选择一个<article>元素里面的第一个<p>元素的第一行。
        
+
        如果你想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起。试着编辑前面的实时示例，让它使用下面的 CSS。这里的意思是，我们想选择一个<article>元素里面的第一个<p>元素的第一行。
        
 
 
        article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
 }
        
 
-
        生成带有::before和::after的内容
        
+
        生成带有::before 和::after 的内容
        
 
-
        有一组特别的伪元素，它们和content属性一同使用，使用CSS将内容插入到你的文档中中。
        
+
        有一组特别的伪元素，它们和content属性一同使用，使用 CSS 将内容插入到你的文档中中。
        
 
 
        你能用这些插入一个文本字符串，和在下面的实时示例里那样。试着改变{{cssxref("content")}}属性的文本值，看看输出是怎么改变的。你也能改变::before伪元素为::after，看到这段文本插入到了元素的末尾而不是开头。
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}
        
 
-
        从CSS插入文本字符串，我们并不会在Web浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。
        
+
        从 CSS 插入文本字符串，我们并不会在 Web 浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。
        
 
 
        这些伪元素的更推荐的用法是插入一个图标，例如下面的示例加入的一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。
        
 
@@ -102,15 +102,15 @@ 
        生成带有::before和::after的
 
 
        这些伪元素经常用于插入空字符串，其后可以像页面上的其他元素被样式化。
        
 
-
        下个示例，我们已经用 ::before伪元素加入了个空字符串。我们把它设为了display: block，以让它可以用width和height进行样式化。然后我们可以用CSS像任何元素那样样式化。你可以摆弄CSS，改变它的外观和行为。
        
+
        下个示例，我们已经用 ::before伪元素加入了个空字符串。我们把它设为了display: block，以让它可以用 width 和 height 进行样式化。然后我们可以用 CSS 像任何元素那样样式化。你可以摆弄 CSS，改变它的外观和行为。
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}
        
 
-
        ::before和::after伪元素与content属性的共同使用，在CSS中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。CSS Arrow Please网站就是一个著名的示例，它帮你用CSS生成一个箭头。在你创建你的箭头的时候看下CSS，你将会看到实际使用的{{cssxref("::before")}}和{{cssxref("::after")}}伪元素。无论什么时候你看到了这些选择器，都要看下{{cssxref("content")}}属性，以了解文档中添加了什么。
        
+
        ::before和::after伪元素与content属性的共同使用，在 CSS 中被叫做“生成内容”，而且你会见到这种技术被用于完成各种任务。CSS Arrow Please网站就是一个著名的示例，它帮你用 CSS 生成一个箭头。在你创建你的箭头的时候看下 CSS，你将会看到实际使用的{{cssxref("::before")}}和{{cssxref("::after")}}伪元素。无论什么时候你看到了这些选择器，都要看下{{cssxref("content")}}属性，以了解文档中添加了什么。
        
 
 
        参考节
        
 
-
        有很多伪类和伪元素，所以有一个用于参考的列表会有用。下面是列出它们的表格，链接到了MDN上它们的参考页。把这作为参考，看看你能选中什么。
        
+
        有很多伪类和伪元素，所以有一个用于参考的列表会有用。下面是列出它们的表格，链接到了 MDN 上它们的参考页。把这作为参考，看看你能选中什么。
        
 
 
        伪类
        
 
@@ -144,11 +144,11 @@ 
        伪类
        
   
      
-   
+   
-   
+   
@@ -196,7 +196,7 @@ 
      伪类
      
-   
+   
@@ -240,19 +240,19 @@ 
      伪类
      
-   
+   
-   
+   
-   
+   
-   
+   
@@ -264,7 +264,7 @@ 
      伪类
      
-   
+   
@@ -276,7 +276,7 @@ 
      伪类
      
-   
+   
@@ -296,7 +296,7 @@ 
      伪类
      
-   
+   
@@ -316,7 +316,7 @@ 
      伪类
      
-   
+   
@@ -372,9 +372,9 @@ 
      模块目录
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html
index 076790e603297f..a668fc11de9f02 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html
+++ b/files/zh-cn/learn/css/building_blocks/selectors/selectors_tasks/index.html
@@ -5,7 +5,7 @@
 ---
 
      {{LearnSidebar}}
      
 
-
      这个任务的目的是帮助你理解CSS里的选择器。
      
+
      这个任务的目的是帮助你理解 CSS 里的选择器。
      
 
      Note:你可以 在下面那些交换编辑器中尝试解决问题，然而  把代码下载然后使用一个在线工具比如 CodePen, jsFiddle, or Glitch 去解决这些问题可能对你更有作用。
      
@@ -15,12 +15,12 @@
 
 
      选择器一
      
 
-
      在没有改变HTML的情况下，使用CSS去完成下面的要求：:
      
+
      在没有改变 HTML 的情况下，使用 CSS 去完成下面的要求：:
      
 
 
        
  
      • 使一级标题的字体颜色为蓝色
        • 
  
      • 使二级标题有一个蓝色背景且白色文本。
        • 
- 
      • 使跨距中换行的文本的字体大小为200%。
        • 
+ 
      • 使跨距中换行的文本的字体大小为 200%。
        • 
 
      
 
 
      Text with the CSS applied for the solution to task 1.
      
@@ -35,12 +35,12 @@ 
      选择器一
      
 
 
      选择器二
      
 
-
      在没有改变HTML的情况下，对本例中内容的外观进行以下更改：
      
+
      在没有改变 HTML 的情况下，对本例中内容的外观进行以下更改：
      
 
 
        
- 
      • 让id为 special 的元素有一个黄色背景。
        • 
+ 
      • 让 id 为 special 的元素有一个黄色背景。
        • 
  
      • 让使用类 alert 的元素有一个 1px 的灰色边框。
        • 
- 
      • 如果一个元素使用了 alert 类还有 stop类， 让它的背景变为红色。
        • 
+ 
      • 如果一个元素使用了 alert 类还有 stop类，让它的背景变为红色。
        • 
  
      • 如果一个元素使用 alert 类还有 go类，让它的背景变为绿色。
        • 
 
      
 
@@ -56,12 +56,12 @@ 
      选择器二
      
 
 
      选择器三
      
 
-
      在本例中，尝试在不添加HTML的情况下进行以下更改。
      
+
      在本例中，尝试在不添加 HTML 的情况下进行以下更改。
      
 
 
        
- 
      • 链接文本的样式：使链接为橘色，被访问后变为绿色，当被hover时，移除链接文本的下划线。
        • 
+ 
      • 链接文本的样式：使链接为橘色，被访问后变为绿色，当被 hover 时，移除链接文本的下划线。
        • 
  
      • 让容器里的第一个元素的字体大小为:150%，并且让这个元素的第一行是红色的。
        • 
- 
      • 让表格中每隔一行条带化，分别给它们一个颜色为#333的背景和一个白色前景。
        • 
+ 
      • 让表格中每隔一行条带化，分别给它们一个颜色为#333 的背景和一个白色前景。
        • 
 
      
 
 
      Text with the CSS applied for the solution to task 3.
      
@@ -76,11 +76,11 @@ 
      选择器三
      
 
 
      选择器四
      
 
-
      在这个任务中尝试下面这个任务:
      
+
      在这个任务中尝试下面这个任务：
      
 
 
        
  
      • 让任何直接跟随二级标题的段落颜色为红色。
        • 
- 
      • 移除使用了list类的无效列表的儿子元素前面的原点并给他们添加一个1px的灰色下边框。
        • 
+ 
      • 移除使用了 list 类的无效列表的儿子元素前面的原点并给他们添加一个 1px 的灰色下边框。
        • 
 
      
 
 
      Text with the CSS applied for the solution to task 4.
      
@@ -95,7 +95,7 @@ 
      选择器四
      
 
 
      选择器五
      
 
-
      在最后一个任务中，使用属性选择器添加CSS以执行以下操作：
      
+
      在最后一个任务中，使用属性选择器添加 CSS 以执行以下操作：
      
 
 
        
  
      • Target the <a> element with a title attribute and make the border pink (border-color: pink).
        • 
diff --git a/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index bfc06c6b59afb1..fc1c950659fbeb 100644
--- a/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ b/files/zh-cn/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -1,5 +1,5 @@
 ---
-title: 类型、类和ID选择器
+title: 类型、类和 ID 选择器
 slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
 translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
 ---
@@ -11,20 +11,20 @@
  
      
-   
+   
-   
+   
      
  
   
      
    学习前提：基础电脑知识，安装了基本的软件，处理文件的基本知识， HTML基础（学习HTML介绍），以及对CSS工作原理的了解（学习CSS初步）基础电脑知识，安装了基本的软件，处理文件的基本知识，HTML 基础（学习HTML 介绍），以及对 CSS 工作原理的了解（学习CSS 初步）
   
      
   
      
    目标：
 
 
 
 
 
 
 
 
      
   
      
    {{ Cssxref(":default") }}匹配一组相似的元素中默认的一个或者更多的UI元素。匹配一组相似的元素中默认的一个或者更多的 UI 元素。
   
      
   
      
    {{ Cssxref(":dir") }}基于其方向性（HTMLdir属性或者CSSdirection属性的值）匹配一个元素。基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。
   
      
   
      
    {{ Cssxref(":disabled") }}
   
      
   
      
    {{ Cssxref(":indeterminate") }}匹配未定态值的UI元素，通常为复选框。匹配未定态值的 UI 元素，通常为复选框。
   
      
   
      
    {{ Cssxref(":in-range") }}
   
      
   
      
    {{ Cssxref(":nth-child") }}匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
   
      
   
      
    {{ Cssxref(":nth-of-type") }}匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
   
      
   
      
    {{ Cssxref(":nth-last-child") }}匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
   
      
   
      
    {{ Cssxref(":nth-last-of-type") }}匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
   
      
   
      
    {{ Cssxref(":only-child") }}
   
      
   
      
    {{ Cssxref(":optional") }}匹配不是必填的form元素。匹配不是必填的 form 元素。
   
      
   
      
    {{ Cssxref(":out-of-range") }}
   
      
   
      
    {{ Cssxref(":placeholder-shown") }}匹配显示占位文字的input元素。匹配显示占位文字的 input 元素。
   
      
   
      
    {{ Cssxref(":playing") }}
   
      
   
      
    {{ Cssxref(":required") }}匹配必填的form元素。匹配必填的 form 元素。
   
      
   
      
    {{ Cssxref(":right") }}
   
      
   
      
    {{ Cssxref(":target") }}匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素）。匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
   
      
   
      
    {{ Cssxref(":visited") }}
 
 
 
 
      
   
      
    学习前提：基本电脑知识，安装了基础的软件，处理文件的基础知识，HTML基础（学习HTML介绍），以及对CSS工作原理的理解（学习CSS初步）基本电脑知识，安装了基础的软件，处理文件的基础知识，HTML 基础（学习HTML 介绍），以及对 CSS 工作原理的理解（学习CSS 初步）
   
      
   
      
    目标：学习不同的CSS选择器，通过它们将CSS应用到文档中。学习不同的 CSS 选择器，通过它们将 CSS 应用到文档中。
   
      
        
 
      
 
 
      类型选择器
      
 
-
      类型选择器有时也叫做“标签名选择器”或者是”元素选择器“，因为它在文档中选择了一个HTML标签/元素的缘故。在下面的示例中，我们已经用了span、em和strong选择器，<span>、<em>和<strong>元素的所有实例这样就都被样式化了。
      
+
      类型选择器有时也叫做“标签名选择器”或者是”元素选择器“，因为它在文档中选择了一个 HTML 标签/元素的缘故。在下面的示例中，我们已经用了 span、em 和 strong 选择器，<span>、<em>和<strong>元素的所有实例这样就都被样式化了。
      
 
-
      试着加上一条CSS规则，选择<h1>元素，把它的颜色变为蓝色。
      
+
      试着加上一条 CSS 规则，选择<h1>元素，把它的颜色变为蓝色。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}
      
 
@@ -64,7 +64,7 @@ 
      指向特定元素的类
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}
      
 
-
      这种方式使CSS没那么可复用，因为类现在只会应用到那个特定元素，在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。
      
+
      这种方式使 CSS 没那么可复用，因为类现在只会应用到那个特定元素，在认为规则也该应用到其他元素的时候，你会需要另外加上一个选择器。
      
 
 
      多个类被应用的时候指向一个元素
      
 
@@ -76,14 +76,14 @@ 
      多个类被应用的时
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}
      
 
-
      ID选择器
      
+
      ID 选择器
      
 
-
      ID选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个ID只会用到一次。它能选中设定了id的元素，你可以在ID前面加上类型选择器，只指向元素和ID都匹配的类。在下面的示例里，你可以看看这两种用法。
      
+
      ID 选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，你可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。在下面的示例里，你可以看看这两种用法。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
      
 
 
      
-
      备注：正如我们在和特定性相关的课里面学到的那样，ID所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用ID，会更好。不过要是ID是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。
      
+
      备注：正如我们在和特定性相关的课里面学到的那样，ID 所指特定，会优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用 ID，会更好。不过要是 ID 是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。
      
 
      
 
 
      下一篇
      
@@ -96,9 +96,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html
index a6c4c9dac1d209..73cc5cfe1f4dc3 100644
--- a/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html
+++ b/files/zh-cn/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -1,34 +1,34 @@
 ---
-title: 在CSS中调整大小
+title: 在 CSS 中调整大小
 slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
      
 
-
      在前面的课程中你已经看到了几种使用CSS为页面中元素设定尺寸的方法。 在我们设计网页的时候，需要理解这些不同方法之间的差异。在本课程中，我们将总结设定元素尺寸的方法，并定义几个术语，这些内容将会在未来对你有所帮助。
      
+
      在前面的课程中你已经看到了几种使用 CSS 为页面中元素设定尺寸的方法。 在我们设计网页的时候，需要理解这些不同方法之间的差异。在本课程中，我们将总结设定元素尺寸的方法，并定义几个术语，这些内容将会在未来对你有所帮助。
      
 
 
-   
+   
-   
+   
      
  
   
      
    前提：基本的电脑知识，安装了必要的软件，处理文件的基础知识 , HTML基础（学习Introduction to HTML），理解CSS如何工作（学习CSS first steps）。基本的电脑知识，安装了必要的软件，处理文件的基础知识 , HTML 基础（学习Introduction to HTML），理解 CSS 如何工作（学习CSS first steps）。
   
      
   
      
    目标：理解在CSS中约束物体大小的不同方式。理解在 CSS 中约束物体大小的不同方式。
   
      
        
 
      
 
 
      原始尺寸，或固有尺寸
      
 
-
      在受CSS设置影响之前，HTML元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。
      
+
      在受 CSS 设置影响之前，HTML 元素有其原始的尺寸。一个直观的例子就是图像。一副图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。
      
 
-
      如果你把图片放置在网页中的时候没有在<img> 标签或CSS中设置其尺寸，那么将使用其固有尺寸显示。我们给下面的示例图像绘制了一个边框，以便你看出图像文件的长宽。
      
+
      如果你把图片放置在网页中的时候没有在<img> 标签或 CSS 中设置其尺寸，那么将使用其固有尺寸显示。我们给下面的示例图像绘制了一个边框，以便你看出图像文件的长宽。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}
      
 
-
      一个空的{{htmlelement("div")}}是没有尺寸的。如果你在你的HTML文件中添加一个空{{htmlelement("div")}} 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为0，因为内部没有内容。
      
+
      一个空的{{htmlelement("div")}}是没有尺寸的。如果你在你的 HTML 文件中添加一个空{{htmlelement("div")}} 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果— 它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为 0，因为内部没有内容。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}
      
 
@@ -36,7 +36,7 @@ 
      原始尺寸，或固有尺寸
      
 
 
      设置具体的尺寸
      
 
-
      我们当然可以给设计中的元素指定具体大小。 当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸。以上面例子中的 <div> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值, 然后不论我们放什么内容进去它都是该尺寸。 正如我们在上一课有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。
      
+
      我们当然可以给设计中的元素指定具体大小。当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸。以上面例子中的 <div> 举例 — 我们可以给它一个具体的 {{cssxref("width")}} 和 {{cssxref("height")}} 值，然后不论我们放什么内容进去它都是该尺寸。 正如我们在上一课有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}
      
 
@@ -44,27 +44,27 @@ 
      设置具体的尺寸
      
 
 
      使用百分数
      
 
-
      许多时候，百分数是长度单位，正如我们在Value and units这节课中讨论的那样，它们常常可与长度互换。当使用百分数时，你需要清楚，它是什么东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。
      
+
      许多时候，百分数是长度单位，正如我们在Value and units 这节课中讨论的那样，它们常常可与长度互换。当使用百分数时，你需要清楚，它是什么东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}
      
 
-
      这是因为百分数是以包含盒子的块为根据解析的。如果我们的<div>没有被指定百分数的值，那么它会占据100%的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。
      
+
      这是因为百分数是以包含盒子的块为根据解析的。如果我们的<div>没有被指定百分数的值，那么它会占据 100% 的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。
      
 
 
      把百分数作为内外边距
      
 
-
      如果你把margins和padding设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子10%的{{cssxref("margin")}}以及10%的{{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。
      
+
      如果你把margins和padding设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子 10% 的{{cssxref("margin")}}以及 10% 的{{cssxref("padding")}}。盒子底部和顶部的内外边距，和左右外边距有同样的大小。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}
      
 
 
      或许，你期望元素的上下外边距是其高度的百分比，元素的左右外边距是其宽度的百分比。但情况并非如此！
      
 
-
      使用百分比作为元素外边距（ margin ）或填充（ padding ）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的10%。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。
      
+
      使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的 10%。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。
      
 
-
      min-和max-尺寸
      
+
      min-和 max-尺寸
      
 
-
      除了让万物都有一个确定的大小以外，我们可以让CSS给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。
      
+
      除了让万物都有一个确定的大小以外，我们可以让 CSS 给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它至少有个确定的高度，你应该给它设置一个{{cssxref("min-height")}}属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。
      
 
-
      在以下的示例中，你可以看到两个盒子，两个都有150像素的确定高度，左边的盒子有150像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比150像素高。
      
+
      在以下的示例中，你可以看到两个盒子，两个都有 150 像素的确定高度，左边的盒子有 150 像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比 150 像素高。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}
      
 
@@ -74,7 +74,7 @@ 
      min-和max-尺寸
      
 
 
      作为示例，如果你设定一个图像的属性为width: 100%，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。
      
 
-
      如果你使用了max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的100%。
      
+
      如果你使用了max-width: 100%，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的 100%。
      
 
 
      在下面的示例里，我们使用了两次相同的图片。第一次使用，属性值已设为width: 100%，位于比图片大的容器里，因此图片拉伸到了与容器相同的宽度；第二次的属性值则设为max-width: 100%，因此它并没有拉伸到充满容器；第三个盒子再一次包含了相同的图片，同时设定了max-width: 100%属性，这时你能看到它是怎样缩小来和盒子大小相适应的。
      
 
@@ -88,19 +88,19 @@ 
      min-和max-尺寸
      
 
 
      视口单位
      
 
-
      视口，即你在浏览器中看到的部分页面，也是有尺寸的。在CSS中，我们有与视口尺寸相关的度量单位，即意为视口宽度的vw单位，以及意为视口高度的 vh单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。
      
+
      视口，即你在浏览器中看到的部分页面，也是有尺寸的。在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的vw单位，以及意为视口高度的 vh单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。
      
 
-
      1vh等于视口高度的1%，1vw则为视口宽度的1%.你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为20vh和20vw的盒子。这个盒子里面有一个字母A，其{{cssxref("font-size")}}属性被设成了10vh。
      
+
      1vh等于视口高度的 1%，1vw则为视口宽度的 1%.你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为 20vh 和 20vw 的盒子。这个盒子里面有一个字母A，其{{cssxref("font-size")}}属性被设成了 10vh。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}
      
 
 
      如果你改变了vh和vw的对应值，盒子和字体的大小也会改变；视口大小的变化也会让它们的大小变化，因为它们是依照视口来定大小的。想看到随着你改变视口大小的时候示例的变化的话，你需要在一个新浏览器视窗里面载入此示例，因为你可以控制该视窗的大小，同时上面示例所在的嵌入的<iframe>的大小即是对上面示例而言的视口。打开此示例，调整浏览器视窗的大小，观察在盒子和文本的大小上所发生的事情。
      
 
-
      在你的设计中，根据视口改变物件的大小是很有用的。例如，如果你想要在你其他内容之前，有一个充满整个视口的视觉宣传段落，让你的页面的那个部分有100vh高的话，会把剩下的内容推到视口的下面，只有向下滚动文档的时候它们才会出现。
      
+
      在你的设计中，根据视口改变物件的大小是很有用的。例如，如果你想要在你其他内容之前，有一个充满整个视口的视觉宣传段落，让你的页面的那个部分有 100vh 高的话，会把剩下的内容推到视口的下面，只有向下滚动文档的时候它们才会出现。
      
 
 
      小结
      
 
-
      本节课，你已经得到了一个对于你可能在约束网站上的内容大小的时候，会遇到的一些关键问题的详细介绍。当你继续学习CSS布局的时候，约束大小会成为掌握不同布局途径的非常重要的基础，所以在继续之前有必要在这里理解这些概念。
      
+
      本节课，你已经得到了一个对于你可能在约束网站上的内容大小的时候，会遇到的一些关键问题的详细介绍。当你继续学习CSS 布局的时候，约束大小会成为掌握不同布局途径的非常重要的基础，所以在继续之前有必要在这里理解这些概念。
      
 
 
      {{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
      
 
@@ -108,9 +108,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html
index 237ca9ffc5b8fa..25c64991e12362 100644
--- a/files/zh-cn/learn/css/building_blocks/styling_tables/index.html
+++ b/files/zh-cn/learn/css/building_blocks/styling_tables/index.html
@@ -7,24 +7,24 @@
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
      
 
-
      设计一个 HTML表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使HTML表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。
      
+
      设计一个 HTML 表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使 HTML 表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。
      
 
 
-   
+   
-   
+   
      
  
   
      
    预备知识：HTML 基础(学习 Introduction to HTML), HTML表格(见HTML表格模块(TBD))，了解CSS工作原理(study Introduction to CSS.)HTML 基础 (学习 Introduction to HTML), HTML 表格 (见 HTML 表格模块 (TBD))，了解 CSS 工作原理 (study Introduction to CSS.)
   
      
   
      
    目标：学习如何有效地对HTML表格进行样式化。学习如何有效地对 HTML 表格进行样式化。
   
      
        
 
      
 
-
      一个典型的HTML表格
      
+
      一个典型的 HTML 表格
      
 
-
      让我们从一个典型的HTML表格开始。恩，我说典型——大多数HTML表格都是关于鞋子，天气，或者员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记看起来是这样的
      
+
      让我们从一个典型的 HTML 表格开始。恩，我说典型——大多数 HTML 表格都是关于鞋子，天气，或者员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记看起来是这样的
      
 
 
      <table>
   <caption>A summary of the UK's most famous punk bands</caption>
@@ -71,16 +71,16 @@ 
      一个典型的HTML表格
      
 
 
      
 
-
      它看起来很拥挤，很难阅读，也很无聊。我们需要使用一些CSS来解决这个问题。
      
+
      它看起来很拥挤，很难阅读，也很无聊。我们需要使用一些 CSS 来解决这个问题。
      
 
 
      自主学习：样式化我们的表格
      
 
 
      在这个自主学习部分中，我们将一起来样式化我们的表格。
      
 
 
        
- 
      1. 首先，复制实例标记到本地，下载这两个图像(noise和 leopardskin)，然后将三个结果文件放在本地计算机的某个工作目录中。
        2. 
+ 
      2. 首先，复制实例标记到本地，下载这两个图像 (noise和 leopardskin)，然后将三个结果文件放在本地计算机的某个工作目录中。
        3. 
  
      3. 接下来，创建一个名为style.css的新文件并将其保存在与其他文件相同的目录中。
        4. 
- 
      4. 将CSS链接到HTML中，将下面的HTML代码放到HTML的{{htmlelement("head")}}中：
        5. 
+ 
      5. 将 CSS 链接到 HTML 中，将下面的 HTML 代码放到 HTML 的{{htmlelement("head")}}中：
        6. 
 
      
 
 
      <link href="style.css" rel="stylesheet" type="text/css">
      
@@ -121,10 +121,10 @@ 
      间距和布局
      
 
      需要注意的最重要的部分如下：
      
 
 
        
- 
      • 在你的表上，给{{cssxref("table-layout")}}属性设置一个为fixed的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 table-layout: fixed，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了thead th:nth-child(n) 选择了四个不同的标题({{cssxref(":nth-child")}})选择器（“选择第n个子元素，它是一个顺序排列的{{htmlelement("th")}}元素，且其父元素是{{htmlelement("thead")}}元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier在Fixed Table Layouts中更详细地讨论了这一技术。
        
+ 
      • 在你的表上，给{{cssxref("table-layout")}}属性设置一个为fixed的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 table-layout: fixed，您可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了thead th:nth-child(n) 选择了四个不同的标题 ({{cssxref(":nth-child")}}) 选择器（“选择第 n 个子元素，它是一个顺序排列的{{htmlelement("th")}}元素，且其父元素是{{htmlelement("thead")}}元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier 在Fixed Table Layouts中更详细地讨论了这一技术。
        
   
        
-  我们将它与一个100%的{{cssxref("width")}}组合在一起，这意味着该表将填充它放入的任何容器，并且能很好的响应（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。
        • 
- 
      • 一个{{cssxref("border-collapse")}}属性的collapse值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当您在表元素上设置边框时，它们之间将会有间隔，如下图所示：这看起来不太好(虽然可能是你想要的样子，谁知道呢?)。使用 border-collapse: collapse; ，让边框合为一条，现在看起来好多了：
        • 
+  我们将它与一个 100% 的{{cssxref("width")}}组合在一起，这意味着该表将填充它放入的任何容器，并且能很好的响应（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。
+ 
      • 一个{{cssxref("border-collapse")}}属性的collapse值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当您在表元素上设置边框时，它们之间将会有间隔，如下图所示：这看起来不太好 (虽然可能是你想要的样子，谁知道呢？)。使用 border-collapse: collapse; ，让边框合为一条，现在看起来好多了：
        • 
  
      • 我们在整个表设置了一个{{cssxref("border")}}，这是必要的，因为我们将在表页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。
        • 
  
      • 我们在{{htmlelement("th")}}和{{htmlelement("td")}}元素上设置了一些{{cssxref("padding")}}——这些元素使数据项有了一些空间，使表看起来更加清晰。
        • 
 
      
@@ -137,14 +137,14 @@ 
      一些简单的排版：
      
 
 
      现在我们把类型整理一下。
      
 
-
      首先，我们在Google Fonts上找到了一种适合于朋克乐队的字体的字体。如果你愿意，你可以去那里找一个不同的。现在，您只需替换我们提供的{{htmlelement("link")}}元素和定制的{{cssxref("font-family")}}声明，并使用Google字体提供给您的内容。
      
+
      首先，我们在Google Fonts上找到了一种适合于朋克乐队的字体的字体。如果你愿意，你可以去那里找一个不同的。现在，您只需替换我们提供的{{htmlelement("link")}}元素和定制的{{cssxref("font-family")}}声明，并使用 Google 字体提供给您的内容。
      
 
-
      首先，将下面的{{htmlelement("link")}}元素添加到您的HTML头部，就在您现有的 <link> 元素之上：
      
+
      首先，将下面的{{htmlelement("link")}}元素添加到您的 HTML 头部，就在您现有的 <link> 元素之上：
      
 
 
      <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
 
      
 
-
      现在将下面的CSS添加到您的style.css文件，在之前内容后面添加：
      
+
      现在将下面的 CSS 添加到您的style.css文件，在之前内容后面添加：
      
 
 
      /* typography */
 
@@ -189,7 +189,7 @@ 
      图形和颜色
      
 
 
      现在轮到图形和颜色了！因为表格上充满“朋克“和“个性”，我们需要给它再搭配一些鲜艳的造型。别担心，你不必让你的表格”燥起来“，你可以选择一些更巧妙、更有品位的东西。
      
 
-
      首先将下面的CSS添加到style.css文件中，在底部添加:
      
+
      首先将下面的 CSS 添加到style.css文件中，在底部添加：
      
 
 
      thead, tfoot {
   background: url(leopardskin.jpg);
@@ -205,13 +205,13 @@ 
      图形和颜色
      
 
 
      同样，对于表格这里没有什么特别的，但有几件事值得注意。
      
 
-
      我们已经将一个{{cssxref("background-image")}}添加到{{htmlelement("thead")}}和{{htmlelement("tfoot")}}，并将页眉和页脚的所有文本颜色{{cssxref("color")}}更改为白色(并给它一个{{cssxref("text-shadow")}})，这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。
      
+
      我们已经将一个{{cssxref("background-image")}}添加到{{htmlelement("thead")}}和{{htmlelement("tfoot")}}，并将页眉和页脚的所有文本颜色{{cssxref("color")}}更改为白色 (并给它一个{{cssxref("text-shadow")}})，这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。
      
 
 
      我们还为{{htmlelement("th")}}和 {{htmlelement("td")}}添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的，这样您就可以将样式层叠在一起。是的，我们可以通过设置多组背景图像属性值来在{{htmlelement("thead")}}和 {{htmlelement("tfoot")}}元素上同时使用背景图像和线性渐变，但是我们决定分开使用，因为考虑到不支持多个背景图像或线性渐变的老浏览器。
      
 
 
      斑马条纹图案
      
 
-
      我们想用一个单独的部分来展示如何实现斑马条纹（zebra stripes）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的CSS添加到您的 style.css 文件底部：
      
+
      我们想用一个单独的部分来展示如何实现斑马条纹（zebra stripes）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的 CSS 添加到您的 style.css 文件底部：
      
 
 
      tbody tr:nth-child(odd) {
   background-color: #ff33cc;
@@ -230,7 +230,7 @@ 
      斑马条纹图案
      
 }
      
 
 
        
- 
      • 您在前面看到了{{cssxref(":nth-child")}}选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式2n-1会选择所有奇数的子元素(1、3、5等)，而公式2n会选择所有偶数的子元素(2、4、6等等)。我们在代码中使用了odd和even的关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的(醒目的)颜色。
        • 
+ 
      • 您在前面看到了{{cssxref(":nth-child")}}选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式2n-1会选择所有奇数的子元素 (1、3、5 等)，而公式2n会选择所有偶数的子元素 (2、4、6 等等)。我们在代码中使用了odd和even的关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的 (醒目的) 颜色。
        • 
  
      • 我们还为所有的行添加了一个重复的噪点背景色块（一个半透明的.png，有一点视觉上的扭曲）来提供一些纹理。
        • 
  
      • 最后，我们给整个表格提供了一个纯的背景颜色，这样浏览器不支持:nth-child选择器仍然有它们的正文行的背景。
        • 
 
      
@@ -261,7 +261,7 @@ 
      样式化标题
      
 
 
      自主学习：样式化你自己的表格
      
 
-
      现在，我们希望您可以使用我们的示例表格HTML(或者使用您自己的一些！)，并将其样式设计成比我们的表更好的设计和不那么花哨的东西。
      
+
      现在，我们希望您可以使用我们的示例表格 HTML(或者使用您自己的一些！)，并将其样式设计成比我们的表更好的设计和不那么花哨的东西。
      
 
 
      表格样式小贴士
      
 
@@ -271,7 +271,7 @@ 
      表格样式小贴士
      
  
    • 使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。
      • 
  
    • 使用 {{cssxref("table-layout")}}: fixed 创建更可控的表布局，可以通过在标题{{cssxref("width")}}中设置{{cssxref("width")}}来轻松设置列的宽度。
      • 
  
    • 使用 {{cssxref("border-collapse")}}: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。
      • 
- 
    • 使用{{htmlelement("thead")}}, {{htmlelement("tbody")}}和{{htmlelement("tfoot")}} 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。
      • 
+ 
    • 使用{{htmlelement("thead")}}, {{htmlelement("tbody")}}和{{htmlelement("tfoot")}} 将表格分割成逻辑块，并提供额外的应用 CSS 的地方，因此如果需要的话，可以更容易地将样式层叠在一起。
      • 
  
    • 使用斑马线来让其他行更容易阅读。
      • 
  
    • 使用 {{cssxref("text-align")}}直线对齐您的{{htmlelement("th")}}和{{htmlelement("td")}}文本，使内容更整洁、更易于跟随。
      • 
 
    
@@ -282,7 +282,7 @@ 
    小试牛刀！
    
 
 
    总结
    
 
-
    现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。不要担心——下一章会介绍如何调试CSS，如何解决诸如布局不能像所应该的那样进行呈现的问题，或者元素无法像你预料的那样生效的问题。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。
    
+
    现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。不要担心——下一章会介绍如何调试 CSS，如何解决诸如布局不能像所应该的那样进行呈现的问题，或者元素无法像你预料的那样生效的问题。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。
    
 
 
    {{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
    
 
@@ -290,9 +290,9 @@ 
    模块目录
    
 
 
      
  
    1. 层叠与继承
      2. 
- 
    2. CSS选择器
+ 
    3. CSS 选择器
   
    
diff --git a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html
index ce6cb3ff0c3b01..5a16b2d8420cec 100644
--- a/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html
+++ b/files/zh-cn/learn/css/building_blocks/tables_tasks/index.html
@@ -21,7 +21,7 @@
 
 
    任务
    
 
-
    在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章Web排版：设计可读而不是可看的表格概述的表格设计良好实践。
    
+
    在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章Web 排版：设计可读而不是可看的表格概述的表格设计良好实践。
    
 
 
    我们要完成的表格如下图所示。完成这个任务有许多方法，但是我建议你使用和向导中所用的相似的模式来完成以下的事情。
    
 
diff --git a/files/zh-cn/learn/css/building_blocks/the_box_model/index.html b/files/zh-cn/learn/css/building_blocks/the_box_model/index.html
index f6bb8a9ba5e033..d2aa4d0816f620 100644
--- a/files/zh-cn/learn/css/building_blocks/the_box_model/index.html
+++ b/files/zh-cn/learn/css/building_blocks/the_box_model/index.html
@@ -7,16 +7,16 @@
 
 
 
-
    在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。
    
+
    在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
    
 
-
    本文围绕 “盒模型” 为主题展开。旨在于完成学习后，您能够在“理解盒装模型原理”的基础上，完成更加复杂的布局任务。
    
+
    本文围绕“盒模型”为主题展开。旨在于完成学习后，您能够在“理解盒装模型原理”的基础上，完成更加复杂的布局任务。
    
 
 
@@ -28,20 +28,20 @@
 
 
    块级盒子（Block box） 和 内联盒子（Inline box）
    
 
-
    在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为:
    
+
    在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：
    
 
-
    一个被定义成块级的（block）盒子会表现出以下行为:
    
+
    一个被定义成块级的（block）盒子会表现出以下行为：
      
  
    • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
      • 
  
    • 每个盒子都会换行
      • 
  
    • {{cssxref("width")}} 和 {{cssxref("height")}} 属性可以发挥作用
      • 
- 
    • 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
      • 
+ 
    • 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
      • 
 
    
 
-
    除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。
    
+
    除非特殊指定，诸如标题 (<h1>等) 和段落 (<p>) 默认情况下都是块级的盒子。
    
 
-
    如果一个盒子对外显示为 inline，那么他的行为如下:
    
+
    如果一个盒子对外显示为 inline，那么他的行为如下：
      
  
    • 盒子不会产生换行。
      • 
@@ -56,33 +56,33 @@ 
      块级盒
 
 
      补充: 内部和外部显示类型
      
 
-
      在这里最好也解释下内部 和 外部 显示类型。如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。
      
+
      在这里最好也解释下内部 和 外部 显示类型。如上所述， css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。
      
 
-
      同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样(如上所述).
      
+
      同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样 (如上所述).
      
 
-
      但是，我们可以通过使用类似  flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为flex元素，会根据 弹性盒子（Flexbox ）规则进行布局，稍后您将了解这些规则。
      
+
      但是，我们可以通过使用类似  flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为 flex 元素，会根据 弹性盒子（Flexbox ）规则进行布局，稍后您将了解这些规则。
      
 
 
      
 
      注: 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 Block and Inline Layout.
      
 
      
 
-
      当你进一步了解css布局的更多细节的时候，你会了解到 flex， 和其他内部显示类型会用到的值，例如 grid。
      
+
      当你进一步了解 css 布局的更多细节的时候，你会了解到 flex， 和其他内部显示类型会用到的值，例如 grid。
      
 
-
      块级和内联布局是web上默认的行为 —— 正如上面所述， 它有时候被称为 正常文档流， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。
      
+
      块级和内联布局是 web 上默认的行为 —— 正如上面所述， 它有时候被称为 正常文档流， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。
      
 
 
      不同显示类型的例子
      
 
-
      让我们继续看看别的例子。下面三个html元素，都有一个外部显示类型 block。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。
      
+
      让我们继续看看别的例子。下面三个 html 元素，都有一个外部显示类型 block。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。
      
 
-
      第二个是一个列表，布局属性是 display: flex。 将在容器中建立一个flex布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。
      
+
      第二个是一个列表，布局属性是 display: flex。 将在容器中建立一个 flex 布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。
      
 
-
      下面有个块级段落，里面有两个 <span> 元素。正常情况下是 inline，但是其中一个加了block类，设置属性 display: block。
      
+
      下面有个块级段落，里面有两个 <span> 元素。正常情况下是 inline，但是其中一个加了 block 类，设置属性 display: block。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 
      
 
 
      我们可以看到 inline 元素在下面例子中的表现。 <span> 在第一段默认是内联元素所以不换行。
      
 
-
      还有一个 <ul> 设置为 display: inline-flex，使得在一些flex元素外创建一个内联框。
      
+
      还有一个 <ul> 设置为 display: inline-flex，使得在一些 flex 元素外创建一个内联框。
      
 
 
      最后设置两个段落为 display: inline。  inline flex 容器和段落在一行上而不是像块级元素一样换行。
      
 
@@ -94,13 +94,13 @@ 
      不同显示类型的例子
      
 
 
      剩下的内容，我们会专注于外部显示类型。
      
 
-
      什么是CSS 盒模型?
      
+
      什么是 CSS 盒模型？
      
 
 
      完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。
      
 
 
      盒模型的各个部分
      
 
-
       CSS中组成一个块级盒子需要:
      
+
       CSS 中组成一个块级盒子需要：
      
 
 
        
  
      • Content box: 这个区域是用来显示内容，大小可以通过设置 {{cssxref("width")}} 和 {{cssxref("height")}}.
        • 
@@ -133,12 +133,12 @@ 
        标准盒模型
        
 
        Showing the size of the box when the standard box model is being used.
        
 
 
        
-
        注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。
        
+
        注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。
        
 
        
 
 
        替代（IE）盒模型
        
 
-
        你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
        
+
        你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的 ! 因为这个原因，css 还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
        
 
 
        Showing the size of the box when the alternate box model is being used.
        
 
@@ -158,14 +158,14 @@ 
        替代（IE）盒模型
        
 }
 
 
        
-
        注： 一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用box-sizing 进行切换 ）
        
+
        注： 一个有趣的历史记录 ——Internet Explorer 默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用box-sizing 进行切换）
        
 
        
 
 
        玩转盒模型
        
 
 
        下面的例子中，你可以看到两个盒子。都有类 .box，给了相同的 width, height, margin, border, and padding。唯一区别是第二个设置了替代模型。
        
 
-
        你能改变第二个盒子的大小 (通过添加 CSS 到 .alternate 类中) 让它和第一个盒子宽高一样吗?
        
+
        你能改变第二个盒子的大小 (通过添加 CSS 到 .alternate 类中) 让它和第一个盒子宽高一样吗？
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 
        
 
@@ -175,7 +175,7 @@ 
        玩转盒模型
        
 
 
        使用调试工具来查看盒模型
        
 
-
        您的 浏览器开发者工具 可以使您更容易地理解box模型。如果您在Firefox的DevTools中查看一个元素，您可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断您的盒子大小是否符合预期 !
        
+
        您的 浏览器开发者工具 可以使您更容易地理解 box 模型。如果您在 Firefox 的 DevTools 中查看一个元素，您可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断您的盒子大小是否符合预期 !
        
 
 
        Inspecting the box model of an element using Firefox DevTools
        
 
@@ -187,7 +187,7 @@ 
        外边距，内边距，边框
        
 
 
        外边距
        
 
-
        外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
        
+
        外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
        
 
 
        我们可以使用{{cssxref("margin")}}属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：
        
 
@@ -206,9 +206,9 @@ 
        外边距折叠
        
 
 
        理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
        
 
-
        在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom为50px。第二段的margin-top 为30px。因为外边距折叠的概念，所以框之间的实际外边距是50px，而不是两个外边距的总和。
        
+
        在下面的例子中，我们有两个段落。顶部段落的页 margin-bottom为 50px。第二段的margin-top 为 30px。因为外边距折叠的概念，所以框之间的实际外边距是 50px，而不是两个外边距的总和。
        
 
-
        您可以通过将第2段的 margin-top 设置为0来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 margin-bottom设置的50像素。
        
+
        您可以通过将第 2 段的 margin-top 设置为 0 来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 margin-bottom设置的 50 像素。
        
 
 
        {{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 800)}} 
        
 
@@ -256,13 +256,13 @@ 
        边框
        
  
      • {{cssxref("border-left-color")}}
        • 
 
      
 
-
      设置边框的颜色、样式或宽度，可以使用最细粒度的普通属性或者简写属性。在下面的示例中，我们使用了各种普通属性或者简写属性来创建边框。尝试一下不同的属性，以检查您是否理解它们是如何工作的。MDN中的边框属性页面为您提供可用的不同边框样式的信息。
      
+
      设置边框的颜色、样式或宽度，可以使用最细粒度的普通属性或者简写属性。在下面的示例中，我们使用了各种普通属性或者简写属性来创建边框。尝试一下不同的属性，以检查您是否理解它们是如何工作的。MDN 中的边框属性页面为您提供可用的不同边框样式的信息。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 
      
 
 
      内边距
      
 
-
      内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是0或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
      
+
      内边距位于边框和内容区域之间。与外边距不同，您不能有负数量的内边距，所以值必须是 0 或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。
      
 
 

      
  我们可以使用{{cssxref("padding")}}简写属性控制元素所有边，或者每边单独使用等价的普通属性：
      
@@ -290,9 +290,9 @@ 
      盒子模型和内联盒子
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 
      
 
-
      使用display: inline-block
      
+
      使用 display: inline-block
      
 
-
      display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
      
+
      display 有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用：您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
      
 
 
      一个元素使用 display: inline-block，实现我们需要的块级的部分效果：
      
 
@@ -309,7 +309,7 @@ 
      使用display: inline-block
      
 
 
      当您想要通过添加内边距使链接具有更大的命中区域时，这是很有用的。<a>是像<span>一样的内联元素；你可以使用display: inline-block来设置内边距，让用户更容易点击链接。
      
 
-
      这种情况在导航栏中很常见。下面的导航使用flexbox显示在一行中，我们为<a>元素添加了内边距，因为我们希望能够在<a>在鼠标移动到上面时改变背景色。内边距似乎覆盖了<ul>元素上的边框。这是因为<a>是一个内联元素。
      
+
      这种情况在导航栏中很常见。下面的导航使用 flexbox 显示在一行中，我们为<a>元素添加了内边距，因为我们希望能够在<a>在鼠标移动到上面时改变背景色。内边距似乎覆盖了<ul>元素上的边框。这是因为<a>是一个内联元素。
      
 
 
      使用.links-list a选择器将display: inline-block添加到样式规则中，您将看到它是如何通过内边距推开其他元素来修复这个问题的。
      
 
@@ -327,9 +327,9 @@ 
      模块目录
      
 
 
        
  
      1. 层叠与继承
        2. 
- 
      2. CSS选择器
+ 
      3. CSS 选择器
   
      
diff --git a/files/zh-cn/learn/css/building_blocks/values_and_units/index.html b/files/zh-cn/learn/css/building_blocks/values_and_units/index.html
index 05aa76be03b41c..f70f7d08e0a124 100644
--- a/files/zh-cn/learn/css/building_blocks/values_and_units/index.html
+++ b/files/zh-cn/learn/css/building_blocks/values_and_units/index.html
@@ -1,35 +1,35 @@
 ---
-title: CSS的值与单位
+title: CSS 的值与单位
 slug: Learn/CSS/Building_blocks/Values_and_units
 translation_of: Learn/CSS/Building_blocks/Values_and_units
 ---
 
      {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
      
 
-
      CSS中使用的每个属性都允许拥有一个或一组值，查看MDN上的任何属性页将帮助您理解对任何特定属性有效的值。在本节课中，我们将学习一些最常用的值和单位。
      
+
      CSS 中使用的每个属性都允许拥有一个或一组值，查看 MDN 上的任何属性页将帮助您理解对任何特定属性有效的值。在本节课中，我们将学习一些最常用的值和单位。
      
 
 
    
  
   
    
    预备知识（Prerequisites）:
    
-    
    基本的计算机知识，安装基本的软件，文件处理基本知识, HTML基础知识  (如果不了解HTML，请移步 学习HTML入门)，以及CSS如何工作的基本常识 (如果不了解CSS，请移步 学习CSS第一步.)
    
+    
    基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识  (如果不了解 HTML，请移步 学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果不了解 CSS，请移步 学习 CSS 第一步.)
    
        		
   
    
   
    
 
 
 
 
    
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    预备知识:基本的计算机知识，安装基本的软件，文件处理基本知识, HTML基础知识  (学习HTML入门)，以及CSS如何工作的基本常识 (如果完全不了解CSS，请移步 学习CSS第一步.)预备知识：基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识  (学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果完全不了解 CSS，请移步 学习 CSS 第一步.)
   
    
   
    目标:了解CSS属性中使用的不同类型的值和单位。目标：了解 CSS 属性中使用的不同类型的值和单位。
   
    
      
 
    
 
-
    什么是CSS的值?
    
+
    什么是 CSS 的值？
    
 
-
    在CSS规范和MDN的属性页上，您将能够发现值的存在，因为它们将被尖括号包围，如<color>或<length>。当您看到值<color>对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <color>参考页面所列。
    
+
    在 CSS 规范和 MDN 的属性页上，您将能够发现值的存在，因为它们将被尖括号包围，如<color>或<length>。当您看到值<color>对特定属性有效时，这意味着您可以使用任何有效的颜色作为该属性的值，如 <color>参考页面所列。
    
 
 
    
-
    注意：您还将看到被称为数据类型的CSS值。这些术语基本上是可以互换的——当你在CSS中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。
    
+
    注意：您还将看到被称为数据类型的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。
    
 
    
 
 
    
-
    注意： 是的，CSS值倾向于使用尖括号表示，以区别于CSS属性(例如{{cssxref("color")}}属性和 <color> 数据类型)。您可能还会混淆CSS数据类型和HTML元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。
    
+
    注意：是的，CSS 值倾向于使用尖括号表示，以区别于 CSS 属性 (例如{{cssxref("color")}}属性和 <color> 数据类型)。您可能还会混淆 CSS 数据类型和 HTML 元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。
    
 
    
 
 
    在下面的例子中，我们使用关键字设置标题的颜色，使用rgb()函数设置背景：
    
@@ -40,13 +40,13 @@ 
    什么是CSS的值?
    
 }     
 
    
 
-
    CSS中的值是一种定义允许子值集合的方法。这意味着如果您看到<color>是有效的，那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、rgb()函数等等。假设浏览器支持这些可用的<color>值，则可以使用它们任意一个。MDN上针对每个值的页面将提供有关浏览器支持的信息。例如，如果您查看 <color>的页面，您将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。
    
+
    CSS 中的值是一种定义允许子值集合的方法。这意味着如果您看到<color>是有效的，那么您就不需要考虑可以使用哪些不同类型的颜色值—关键字、十六进制值、rgb()函数等等。假设浏览器支持这些可用的<color>值，则可以使用它们任意一个。MDN 上针对每个值的页面将提供有关浏览器支持的信息。例如，如果您查看 <color>的页面，您将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。
    
 
 
    让我们来看看您可能经常遇到的一些值和单位类型，并提供一些示例，以便您尝试使用各种值的可能性。
    
 
 
    数字，长度和百分比
    
 
-
    您可能会发现自己在CSS中使用了各种数值数据类型。 以下全部归类为数值：
    
+
    您可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：
    
 
 
@@ -58,26 +58,26 @@ 
    数字，长度和百分比
    
-   
+   
-   
+   
-   
+   
-   
+   
    
  
  
   
    
    <integer><integer>是一个整数，比如1024或-55。<integer>是一个整数，比如 1024 或 -55。
   
    
   
    
    <number><number>表示一个小数——它可能有小数点后面的部分，也可能没有，例如0.255、128或-1.2。<number>表示一个小数——它可能有小数点后面的部分，也可能没有，例如 0.255、128 或 -1.2。
   
    
   
    
    <dimension><dimension>是一个<number>，它有一个附加的单位，例如45deg、5s或10px。<dimension>是一个伞形类别，包括<length>、<angle>、<time>和<resolution>类型。<dimension>是一个<number>，它有一个附加的单位，例如 45deg、5s 或 10px。<dimension>是一个伞形类别，包括<length>、<angle>、<time>和<resolution>类型。
   
    
   
    
    <percentage><percentage>表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。<percentage>表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。
   
    
      
 
    
 
 
    长度
    
 
-
    最常见的数字类型是<length>，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。
    
+
    最常见的数字类型是<length>，例如 10px(像素) 或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。
    
 
 
    绝对长度单位
    
 
@@ -130,11 +130,11 @@ 
    绝对长度单位
    
  
 
 
-
    这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用cm。惟一一个您经常使用的值，估计就是px(像素)。
    
+
    这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个您经常使用的值，估计就是 px(像素)。
    
 
 
    相对长度单位
    
 
-
    相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了web开发中一些最有用的单位。
    
+
    相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。
    
 
 
@@ -162,23 +162,23 @@ 
    相对长度单位
    
-   
+   
-   
+   
-   
+   
-   
+   
-   
+   
    
  
   
   
    
    lh元素的line-height元素的 line-height
   
    
   
    
    vw视窗宽度的1%视窗宽度的 1%
   
    
   
    
    vh视窗高度的1%视窗高度的 1%
   
    
   
    
    vmin视窗较小尺寸的1%视窗较小尺寸的 1%
   
    
   
    
    vmax视图大尺寸的1%视图大尺寸的 1%
   
    
  
 
    
@@ -187,9 +187,9 @@ 
    探索一个例子
    
 
 
    在下面的示例中，您可以看到一些相对长度单位和绝对长度单位的行为。第一个框以像素为单位设置{{cssxref("width")}}。作为一个绝对单位，这个宽度将保持不变，无论其他如何变化。
    
 
-
    第二个框的宽度设置为vw(视口宽度)单位。这个值相对于视口宽度，所以10vw是视口宽度的10%。如果您更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用<iframe>嵌入到页面中，所以这将不起作用。要查看实际情况，您必须在打开示例的浏览器选项卡后尝试该示例 试一试。
    
+
    第二个框的宽度设置为vw(视口宽度) 单位。这个值相对于视口宽度，所以 10vw是视口宽度的 10%。如果您更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用<iframe>嵌入到页面中，所以这将不起作用。要查看实际情况，您必须在打开示例的浏览器选项卡后尝试该示例 试一试。
    
 
-
    第三个盒子使用em单位。这些是相对于字体大小的。我在包含{{htmlelement("div")}}的元素上设置了一个1em的字体大小，它有一个.wrapper类。将这个值更改为1.5em，您将看到所有元素的字体大小都增加了，但是只有最后一项会变宽，因为宽度与字体大小有关。
    
+
    第三个盒子使用 em 单位。这些是相对于字体大小的。我在包含{{htmlelement("div")}}的元素上设置了一个 1em 的字体大小，它有一个.wrapper类。将这个值更改为 1.5em，您将看到所有元素的字体大小都增加了，但是只有最后一项会变宽，因为宽度与字体大小有关。
    
 
 
    按照上面的说明操作之后，尝试以其他方式处理这些值，看看您将收获什么。
    
 
@@ -197,17 +197,17 @@ 
    探索一个例子
    
 
 
    ems and rems
    
 
-
    em和rem是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当您开始学习更复杂的主题时，比如样式化文本或CSS布局。下面的示例提供了一个演示。
    
+
    em和rem是您在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当您开始学习更复杂的主题时，比如样式化文本或 CSS 布局。下面的示例提供了一个演示。
    
 
-
    HTML是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的HTML。唯一的区别是第一个类具有ems，第二个类具有rems。
    
+
    HTML 是一组嵌套的列表—我们总共有三个列表，并且两个示例都有相同的 HTML。唯一的区别是第一个类具有 ems，第二个类具有 rems。
    
 
-
    首先，我们将16px设置为<html>元素的字体大小。
    
+
    首先，我们将 16px 设置为<html>元素的字体大小。
    
 
-
    概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有ems类的{{htmlelement("ul")}}内的{{htmlelement("li")}}元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为1.3em—是其父嵌套字体大小的1.3倍。
    
+
    概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有 ems 类的{{htmlelement("ul")}}内的{{htmlelement("li")}}元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 1.3em—是其父嵌套字体大小的 1.3 倍。
    
 
-
    概括地说，rem单位的意思是“根元素的字体大小”。(“根em”的rem标准。){{htmlelement("ul")}}内的{{htmlelement("li")}}元素和一个rems类从根元素(<html>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。
    
+
    概括地说，rem 单位的意思是“根元素的字体大小”。(“根 em”的 rem 标准。){{htmlelement("ul")}}内的{{htmlelement("li")}}元素和一个 rems 类从根元素 (<html>)中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。
    
 
-
    但是，如果您在CSS中更改<html>字体大小，您将看到所有其他相关内容都发生了更改，包括rem和em大小的文本。
    
+
    但是，如果您在 CSS 中更改<html>字体大小，您将看到所有其他相关内容都发生了更改，包括 rem 和 em 大小的文本。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 
    
 
@@ -215,37 +215,37 @@ 
    百分比
    
 
 
    在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
    
 
-
    在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。这两款相机分别为200px和40%宽。
    
+
    在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。这两款相机分别为 200px 和 40% 宽。
    
 
-
    不同之处在于，第二组两个框位于一个400像素宽的包装器中。第二个200px宽的盒子和第一个一样宽，但是第二个40%的盒子现在是400px的40%——比第一个窄多了!
    
+
    不同之处在于，第二组两个框位于一个 400 像素宽的包装器中。第二个 200px 宽的盒子和第一个一样宽，但是第二个 40% 的盒子现在是 400px 的 40%——比第一个窄多了！
    
 
 
    尝试更改包装器的宽度或百分比值，看看这是如何工作的。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 
    
 
-
    下一个示例以百分比设置字体大小。每个<li>都有80%的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。
    
+
    下一个示例以百分比设置字体大小。每个<li>都有 80% 的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 
    
 
-
    注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在MDN属性引用页面上看到它能接受哪些值。如果允许的值包括<length-percent>，则可以使用长度或百分比。如果允许的值只包含<length>，则不可能使用百分比。
    
+
    注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。您可以在 MDN 属性引用页面上看到它能接受哪些值。如果允许的值包括<length-percent>，则可以使用长度或百分比。如果允许的值只包含<length>，则不可能使用百分比。
    
 
 
    数字
    
 
-
    有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度(它的透明程度)。此属性接受0(完全透明)和1(完全不透明)之间的数字。
    
+
    有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（opacity ），它控制元素的不透明度 (它的透明程度)。此属性接受 0(完全透明) 和 1(完全不透明) 之间的数字。
    
 
-
    在下面的示例中，尝试将不透明度值更改为0到1之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的。
    
+
    在下面的示例中，尝试将不透明度值更改为 0 到 1 之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 
    
 
 
    
-
    注意: 当您在CSS中使用数字作为值时，它不应该用引号括起来。
    
+
    注意: 当您在 CSS 中使用数字作为值时，它不应该用引号括起来。
    
 
    
 
 
    颜色
    
 
-
    在CSS中指定颜色的方法有很多，其中一些是最近才实现的。在CSS中，相同的颜色值可以在任何地方使用，无论您指定的是文本颜色、背景颜色还是其他颜色。
    
+
    在 CSS 中指定颜色的方法有很多，其中一些是最近才实现的。在 CSS 中，相同的颜色值可以在任何地方使用，无论您指定的是文本颜色、背景颜色还是其他颜色。
    
 
-
    现代计算机的标准颜色系统是24位的，它允许通过不同的红、绿、蓝通道的组合显示大约1670万种不同的颜色，每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。让我们来看看在CSS中指定颜色的一些方法。
    
+
    现代计算机的标准颜色系统是 24 位的，它允许通过不同的红、绿、蓝通道的组合显示大约 1670 万种不同的颜色，每个通道有 256 个不同的值 (256 x 256 x 256 = 16,777,216)。让我们来看看在 CSS 中指定颜色的一些方法。
    
 
 
    
 
    注意： 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。
    
@@ -253,13 +253,13 @@ 
    颜色
    
 
 
    颜色关键词
    
 
-
    在这学习示例或MDN上的其他示例中，您经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！您可以在页面上看到 <color>值的完整列表。
    
+
    在这学习示例或 MDN 上的其他示例中，您经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！您可以在页面上看到 <color>值的完整列表。
    
 
 
    在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的。
    
 
-
    十六进制RGB值
    
+
    十六进制 RGB 值
    
 
-
    您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号(#)和六个十六进制数字组成，每个十六进制数字都可以取0到f(代表15)之间的16个值中的一个——所以是0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定256个可用值中的任意一个(16 x 16 = 256)。
    
+
    您可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号 (#) 和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f(代表 15) 之间的 16 个值中的一个——所以是 0123456789abcdef。每对值表示一个通道—红色、绿色和蓝色—并允许我们为每个通道指定 256 个可用值中的任意一个 (16 x 16 = 256)。
    
 
 
    这些值有点复杂，不太容易理解，但是它们比关键字更通用——您可以使用十六进制值来表示您想在配色方案中使用的任何颜色。
    
 
@@ -267,69 +267,69 @@ 
    十六进制RGB值
    
 
 
    同样，大胆尝试更改值，看看颜色如何变化吧！
    
 
-
    RGB 和 RGBA的值
    
+
    RGB 和 RGBA 的值
    
 
-
    我们将在这里讨论的第三种方案是RGB。RGB值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于0到255之间的十进制数字表示的——这有点容易理解。
    
+
    我们将在这里讨论的第三种方案是 RGB。RGB 值是一个函数—RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的——这有点容易理解。
    
 
-
    让我们重写上一个例子，使用RGB颜色：
    
+
    让我们重写上一个例子，使用 RGB 颜色：
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 
    
 
-
    您还可以使用RGBA颜色——它们的工作方式与RGB颜色完全相同，因此您可以使用任何RGB值，但是有第四个值表示颜色的alpha通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。
    
+
    您还可以使用 RGBA 颜色——它们的工作方式与 RGB 颜色完全相同，因此您可以使用任何 RGB 值，但是有第四个值表示颜色的 alpha 通道，它控制不透明度。如果将这个值设置为0，它将使颜色完全透明，而设置为1将使颜色完全不透明。介于两者之间的值提供了不同级别的透明度。
    
 
 
    
-
    注意: 在颜色上设置alpha通道与使用我们前面看到的{{cssxref("opacity")}}属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用RGBA颜色只让你指定的颜色不透明。
    
+
    注意: 在颜色上设置 alpha 通道与使用我们前面看到的{{cssxref("opacity")}}属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGBA 颜色只让你指定的颜色不透明。
    
 
    
 
-
    在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当alpha通道值较小时， 背景如何显示的。
    
+
    在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}
    
 
-
    在本例中，尝试更改alpha通道值，看看它如何影响颜色输出。 
    
+
    在本例中，尝试更改 alpha 通道值，看看它如何影响颜色输出。 
    
 
 
    
-
    注意：在某种程度上，现代浏览器得到了更新，从而让rgba() 和rgb() （以及 hsl()和 hsla();见下文）成为彼此的纯别名并开始表现完全相同，因此rgba()  和rgb() 接受带有和不带有alpha通道值的颜色。 尝试将上面示例的rgba() 函数更改为rgb() ，看看颜色是否仍然有效！ 使用哪种样式由您决定，但是将非透明和透明的颜色定义分开使用不同的功能可以（非常）更好地支持浏览器，并且可以直观地指示代码中定义透明颜色的位置。
    
+
    注意：在某种程度上，现代浏览器得到了更新，从而让rgba() 和rgb() （以及 hsl()和 hsla();见下文）成为彼此的纯别名并开始表现完全相同，因此rgba()  和rgb() 接受带有和不带有 alpha 通道值的颜色。尝试将上面示例的rgba() 函数更改为rgb() ，看看颜色是否仍然有效！使用哪种样式由您决定，但是将非透明和透明的颜色定义分开使用不同的功能可以（非常）更好地支持浏览器，并且可以直观地指示代码中定义透明颜色的位置。
    
 
    
 
 
    HSL 和 HSLA 的值
    
 
-
    与RGB相比，HSL颜色模型的支持稍差一些(在旧版本的IE中不支持)，它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分1670万种颜色：
    
+
    与 RGB 相比，HSL 颜色模型的支持稍差一些 (在旧版本的 IE 中不支持)，它是在设计师们感兴趣之后实现的。hsl() 函数接受色调、饱和度和亮度值作为参数，而不是红色、绿色和蓝色值，这些值的不同方式组合，可以区分 1670 万种颜色：
    
 
 
      
- 
    • 色调： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。
      • 
- 
    • 饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
      • 
- 
    • 亮度：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)
      • 
+ 
    • 色调：颜色的底色。这个值在 0 和 360 之间，表示色轮周围的角度。
      • 
+ 
    • 饱和度：颜色有多饱和？它的值为 0 - 100%，其中 0 为无颜色 (它将显示为灰色阴影)，100% 为全色饱和度
      • 
+ 
    • 亮度：颜色有多亮？它从 0 - 100% 中获取一个值，其中 0 表示没有光 (它将完全显示为黑色)，100% 表示完全亮 (它将完全显示为白色)
      • 
 
    
 
-
    我们可以更新RGB的例子来使用HSL颜色，就像这样:
    
+
    我们可以更新 RGB 的例子来使用 HSL 颜色，就像这样：
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 
    
 
-
    就像RGB有RGBA一样，HSL也有HSLA等效物，它使您能够指定alpha通道值。我已经在下面通过将RGBA示例更改为使用HSLA颜色来演示了这一点。
    
+
    就像 RGB 有 RGBA 一样，HSL 也有 HSLA 等效物，它使您能够指定 alpha 通道值。我已经在下面通过将 RGBA 示例更改为使用 HSLA 颜色来演示了这一点。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 
    
 
-
    您可以在项目中使用这些颜色值中的任何一个。对于大多数项目，您可能会选择一个调色板，然后在整个项目中使用这些颜色——以及您所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个!
    
+
    您可以在项目中使用这些颜色值中的任何一个。对于大多数项目，您可能会选择一个调色板，然后在整个项目中使用这些颜色——以及您所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个！
    
 
 
    图片
    
 
 
    <image> 数据类型用于图像为有效值的任何地方。它可以是一个通过 url()函数指向的实际图像文件，也可以是一个渐变。
    
 
-
    在下面的例子中，我们演示了一个图像和一个渐变作为CSS background-image属性的值。
    
+
    在下面的例子中，我们演示了一个图像和一个渐变作为 CSS background-image属性的值。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 
    
 
 
    
-
    注意：<image>还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。如果您想了解<image>数据类型，请查看MDN页面。
    
+
    注意：<image>还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。如果您想了解<image>数据类型，请查看 MDN 页面。
    
 
    
 
 
    位置
    
 
-
    <position> 数据类型表示一组2D坐标，用于定位一个元素，如背景图像(通过 background-position)。它可以使用关键字(如 top, left, bottom, right, 以及center )将元素与2D框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。
    
+
    <position> 数据类型表示一组 2D 坐标，用于定位一个元素，如背景图像 (通过 background-position)。它可以使用关键字 (如 top, left, bottom, right, 以及center ) 将元素与 2D 框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。
    
 
 
    一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 center。
    
 
-
    在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了40px。
    
+
    在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了 40px。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 
    
 
@@ -337,27 +337,27 @@ 
    位置
    
 
 
    字符串和标识符
    
 
-
    在上面的示例中，我们看到关键字被用作值的地方(例如<color>关键字，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为标识符，一个CSS可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
    
+
    在上面的示例中，我们看到关键字被用作值的地方 (例如<color>关键字，如 red, black, rebeccapurple, and goldenrod)。这些关键字被更准确地描述为标识符，一个 CSS 可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。
    
 
-
    在某些地方可以使用CSS中的字符串，例如 在指定生成的内容时。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。
    
+
    在某些地方可以使用 CSS 中的字符串，例如 在指定生成的内容时。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 
    
 
 
    函数
    
 
-
    我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与JavaScript、Python或c++等语言相关联，但它们也以属性值的形式存在于CSS中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。
    
+
    我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与 JavaScript、Python 或 c++等语言相关联，但它们也以属性值的形式存在于 CSS 中。我们已经在颜色部分看到了函数的作用——rgb()、hsl()等。用于从文件返回图像的值——url()——也是一个函数。
    
 
-
    行为更类似于传统编程语言的值是calc()函数。这个函数使您能够在CSS中进行简单的计算。如果您希望计算出在为项目编写CSS时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。
    
+
    行为更类似于传统编程语言的值是calc()函数。这个函数使您能够在 CSS 中进行简单的计算。如果您希望计算出在为项目编写 CSS 时无法定义的值，并且需要浏览器在运行时为您计算出这些值，那么它特别有用。
    
 
-
    例如，下面我们使用calc()使框宽为20% + 100px。20%是根据父容器.wrapper的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的20%是多少，所以我们使用calc()来告诉浏览器为我们做这个计算。
    
+
    例如，下面我们使用calc()使框宽为 20% + 100px。20% 是根据父容器.wrapper 的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的 20% 是多少，所以我们使用calc()来告诉浏览器为我们做这个计算。
    
 
 
    {{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}
    
 
 
    总结
    
 
-
    本文简要介绍了您可能会遇到的最常见的值和单位类型。你可以看看所有不同类型的 CSS的值和单位 参考页面；当你学习这些课程时，你将会遇到很多这样的情况。
    
+
    本文简要介绍了您可能会遇到的最常见的值和单位类型。你可以看看所有不同类型的 CSS 的值和单位 参考页面；当你学习这些课程时，你将会遇到很多这样的情况。
    
 
-
    需要记住的关键一点是，每个属性都有一个已定义的允许值列表，每个值都有一个定义来解释子值是什么。然后您可以在MDN上查看详细信息。
    
+
    需要记住的关键一点是，每个属性都有一个已定义的允许值列表，每个值都有一个定义来解释子值是什么。然后您可以在 MDN 上查看详细信息。
    
 
 
    例如，理解 <image>还允许您创建一个颜色渐变有意义的，但也许这个章节并不会提供太多明显的相关知识！
    
 
@@ -367,9 +367,9 @@ 
    模块目录
    
 
 
      
  
    1. 层叠与继承
      2. 
- 
    2. CSS选择器
+ 
    3. CSS 选择器
   
    
diff --git a/files/zh-cn/learn/css/css_layout/flexbox/index.html b/files/zh-cn/learn/css/css_layout/flexbox/index.html
index 273c8acb249485..2311ff497cfb29 100644
--- a/files/zh-cn/learn/css/css_layout/flexbox/index.html
+++ b/files/zh-cn/learn/css/css_layout/flexbox/index.html
@@ -17,22 +17,22 @@
 
 
    {{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
    
 
-
    弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。 本文将解释所有的基本原理。
    
+
    弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。本文将解释所有的基本原理。
    
 
 
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    前提:HTML 基础 (study Introduction to HTML)，和了解CSS如何工作的(study Introduction to CSS.)前提：HTML 基础 (study Introduction to HTML)，和了解 CSS 如何工作的 (study Introduction to CSS.)
   
    
   
    目标:学会如何使用弹性盒子布局系统来创建Web布局。目标：学会如何使用弹性盒子布局系统来创建 Web 布局。
   
    
      
 
    
 
-
    为什么是 弹性盒子?
    
+
    为什么是 弹性盒子？
    
 
 
    长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。
    
 
@@ -48,7 +48,7 @@ 
    为什么是 弹性盒子?
    
 
 
    一个简单的例子
    
 
-
    在本文中，我们将通过一系列练习来帮助你了解 弹性盒子的工作原理。开始前，您应该拷贝 mozilla github 仓库的 弹性盒子0.html  到本地  。在现代浏览器里打开它（比如 Firefox、Chrome），然后打开你的编辑器看一眼它的代码。你可以看它的线上实例。
    
+
    在本文中，我们将通过一系列练习来帮助你了解 弹性盒子的工作原理。开始前，您应该拷贝 mozilla github 仓库的 弹性盒子 0.html  到本地  。在现代浏览器里打开它（比如 Firefox、Chrome），然后打开你的编辑器看一眼它的代码。你可以看它的线上实例。
    
 
 
    你可以看到这个页面有一个含有顶级标题的 {{htmlelement("header")}} 元素，和一个包含三个 {{htmlelement("article")}} 的 {{htmlelement("section")}} 元素。我们将使用这些来创建一个非常的标准三列布局，如下所示：
    
 
@@ -67,7 +67,7 @@ 
    指定元素的布局为 flexible

    
  
    
 
-
    所以，就这样一个简单的声明就给了我们所需要的一切—非常不可思议，对吧？ 我们的多列布局具有大小相等的列，并且列的高度都是一样。 这是因为这样的 flex 项（flex容器的子项）的默认值是可以解决这些的常见问题的。 后面还有更多内容。
    
+
    所以，就这样一个简单的声明就给了我们所需要的一切—非常不可思议，对吧？我们的多列布局具有大小相等的列，并且列的高度都是一样。这是因为这样的 flex 项（flex 容器的子项）的默认值是可以解决这些的常见问题的。后面还有更多内容。
    
 
 
    
 
    注意：假如你想设置行内元素为 flexible box，也可以置 {{cssxref("display")}} 属性的值为 inline-flex。
    
@@ -86,9 +86,9 @@ 
    flex 模型说明
    
  
  • 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是 {{htmlelement("article")}} 元素。
    • 
 
 
-
    了解这些术语以便你阅读后续章节。 如果您对使用的任何术语感到困惑，您可以随时返回这里。
    
+
    了解这些术语以便你阅读后续章节。如果您对使用的任何术语感到困惑，您可以随时返回这里。
    
 
-
    列还是行?
    
+
    列还是行？
    
 
 
    弹性盒子提供了 {{cssxref("flex-direction")}} 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。
    
 
@@ -108,7 +108,7 @@ 
    换行
    
 
 
    
 
-
    在这里我们看到，子代确实超出了它们的容器。 解决此问题的一种方法是将以下声明添加到 section css 规则中：
    
+
    在这里我们看到，子代确实超出了它们的容器。解决此问题的一种方法是将以下声明添加到 section css 规则中：
    
 
 
    flex-wrap: wrap
    
 
@@ -118,7 +118,7 @@ 
    换行
    
 
 
    现在尝试一下吧；你会看到布局比原来好多了：
    
 
-
    现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是200px；我们将在后面更详细地讨论这个属性。你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。
    
+
    现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。在 article 元素上设置的 flex: 200px 规则，意味着每个元素的宽度至少是 200px；我们将在后面更详细地讨论这个属性。你可能还注意到，最后一行上的最后几个项每个都变得更宽，以便把整个行填满。
    
 
 
    但是这里我们可以做得更多。首先，改变 {{cssxref("flex-direction")}} 属性值为 row-reverse — 你会看到仍然有多行布局，但是每一行元素排列的方向和原来是相反的了。
    
 
@@ -135,7 +135,7 @@ 
    flex-flow 缩写
    
 
 
    flex 项的动态尺寸
    
 
-
    现在让我们回到第一个例子，看看是如何控制 flex 项占用空间的比例的。打开你本地的 弹性盒子0.html，或者拷贝 弹性盒子1.html 作为新的开始（查看线上）。
    
+
    现在让我们回到第一个例子，看看是如何控制 flex 项占用空间的比例的。打开你本地的 弹性盒子 0.html，或者拷贝 弹性盒子 1.html 作为新的开始（查看线上）。
    
 
 
    第一步，将以下规则添加到 CSS 的底部：
    
 
@@ -151,9 +151,9 @@ 
    flex 项的动态尺寸
    
   flex: 2;
 }
    -

    现在当你刷新，你会看到第三个 {{htmlelement("article")}} 元素占用了两倍的可用宽度和剩下的一样 — 现在总共有四个比例单位可用。 前两个 flex 项各有一个，因此它们占用每个可用空间的1/4。 第三个有两个单位，所以它占用2/4或这说是1/2的可用空间。

    +

    现在当你刷新，你会看到第三个 {{htmlelement("article")}} 元素占用了两倍的可用宽度和剩下的一样 — 现在总共有四个比例单位可用。前两个 flex 项各有一个，因此它们占用每个可用空间的 1/4。第三个有两个单位，所以它占用 2/4 或这说是 1/2 的可用空间。

    -

    您还可以指定 flex 的最小值。 尝试修改现有的 article 规则：

    +

    您还可以指定 flex 的最小值。尝试修改现有的 article 规则：

    article {
   flex: 1 200px;
@@ -163,7 +163,7 @@ 
    flex 项的动态尺寸
    
   flex: 2 200px;
 }
    -

    这表示“每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享“。 尝试刷新，你会看到分配空间的差别。

    +

    这表示“每个 flex 项将首先给出 200px 的可用空间，然后，剩余的可用空间将根据分配的比例共享“。尝试刷新，你会看到分配空间的差别。

    @@ -175,7 +175,7 @@

    flex: 缩写与全写

    • 第一个就是上面所讨论过的无单位比例。可以单独指定全写 {{cssxref("flex-grow")}} 属性的值。
      • -
    • 第二个无单位比例 — {{cssxref("flex-shrink")}} — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。
      • +
    • 第二个无单位比例 — {{cssxref("flex-shrink")}} — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。这是一个相当高级的弹性盒子功能，我们不会在本文中进一步说明。
    • 第三个是上面讨论的最小值。可以单独指定全写 {{cssxref("flex-basis")}} 属性的值。
    @@ -183,7 +183,7 @@

    flex: 缩写与全写

    水平和垂直对齐

    -

    还可以使用 弹性盒子的功能让 flex 项沿主轴或交叉轴对齐。让我们一起看一下新例子 — flex-align0.html（在线浏览）— 我们将会有一个整洁，灵活的按钮/工具栏。 此时，你看到了一个水平菜单栏，其中一些按钮卡在左上角，就像下面这样：

    +

    还可以使用 弹性盒子的功能让 flex 项沿主轴或交叉轴对齐。让我们一起看一下新例子 — flex-align0.html（在线浏览）— 我们将会有一个整洁，灵活的按钮/工具栏。此时，你看到了一个水平菜单栏，其中一些按钮卡在左上角，就像下面这样：

    @@ -242,7 +242,7 @@

    flex 项排序

    • 所有 flex 项默认的 {{cssxref("order")}} 值是 0。
    • order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
      • -
    • 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
      • +
    • 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是 2，1，1 和 0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
    • 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
    @@ -254,7 +254,7 @@

    flex 项排序

    flex 嵌套

    -

    弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目，那么他同样成为一个 flex 容器，它的孩子(直接子节点)也表现为 flexible box 。看一下 complex-弹性盒子.html（在线浏览）。

    +

    弹性盒子也能创建一些颇为复杂的布局。设置一个元素为 flex 项目，那么他同样成为一个 flex 容器，它的孩子 (直接子节点) 也表现为 flexible box。看一下 complex-弹性盒子.html（在线浏览）。

    @@ -276,7 +276,7 @@

    flex 嵌套

    display: flex; } -

    下面我们给 {{htmlelement("article")}} 元素设置 flex 值。特别注意这里的第二条CSS规则—我们设置第三个 {{htmlelement("article")}} 元素的子节点的布局同样为 flex ，但是属性值为列布局。

    +

    下面我们给 {{htmlelement("article")}} 元素设置 flex 值。特别注意这里的第二条 CSS 规则—我们设置第三个 {{htmlelement("article")}} 元素的子节点的布局同样为 flex，但是属性值为列布局。

    article {
   flex: 1 200px;
@@ -289,7 +289,7 @@ 
    flex 嵌套
    
 }
    -

    接下来，我们选择了第一个 {{htmlelement("div")}}。首先使用 flex: 1 100px; 简单的给它一个最小的高度 100px，然后设置它的子节点（{{htmlelement("button")}} 元素）为 flex 项。在这里我们将它们放在一个包装行(wrap row)中，使它们居中对齐，就像我们在前面看到的单个按钮示例中做的那样。 

    +

    接下来，我们选择了第一个 {{htmlelement("div")}}。首先使用 flex: 1 100px; 简单的给它一个最小的高度 100px，然后设置它的子节点（{{htmlelement("button")}} 元素）为 flex 项。在这里我们将它们放在一个包装行 (wrap row) 中，使它们居中对齐，就像我们在前面看到的单个按钮示例中做的那样。 

    article:nth-of-type(3) div:first-child {
   flex: 1 100px;
@@ -299,7 +299,7 @@ 
    flex 嵌套
    
   justify-content: space-around;
 }
    -

    最后，我们给按钮设置大小，有意思的是我们给它一个值为1的 flex 属性。如果你调整浏览器窗口宽度，你会看到这是一个非常有趣的效果。按钮将尽可能占用最多的空间，尽可能多的堆在同一条线上，但是当它们不再适合在同一条线上，他们中的一些会到下一行去。

    +

    最后，我们给按钮设置大小，有意思的是我们给它一个值为 1 的 flex 属性。如果你调整浏览器窗口宽度，你会看到这是一个非常有趣的效果。按钮将尽可能占用最多的空间，尽可能多的堆在同一条线上，但是当它们不再适合在同一条线上，他们中的一些会到下一行去。

    button {
   flex: 1;
@@ -314,16 +314,16 @@ 
    跨浏览器兼容性
    
 
 
    虽然你只是在学习和实验，这不太要紧; 然而，如果您正在考虑在真实网站中使用弹性盒子，则需要进行测试，并确保在尽可能多的浏览器中您的用户体验仍然可以接受。
    
 
-
    弹性盒子相较其他一些 CSS 特性可能更为棘手。 例如，如果浏览器缺少 CSS 阴影，则该网站可能仍然可用。 但是假如不支持 弹性盒子功能就会完全打破布局，使其不可用。
    
+
    弹性盒子相较其他一些 CSS 特性可能更为棘手。例如，如果浏览器缺少 CSS 阴影，则该网站可能仍然可用。但是假如不支持 弹性盒子功能就会完全打破布局，使其不可用。
    
 
 
    我们将在未来的模块中讨论克服棘手的跨浏览器支持问题的策略。
    
 
 
    测试你的技能
    
 
-
    我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识? 在你继续学习前，你可以进行测试来验证你是否掌握了这些知识。
    
+
    我们在文章里面覆盖了很多内容，但你是否能记住最重要的知识？在你继续学习前，你可以进行测试来验证你是否掌握了这些知识。
    
 
 
    总结
    
 
-
    到这里，介绍弹性盒子的基础知识就结束了。 我们希望你体会到乐趣，并且玩的开心，能随着你的学习与你一起向前。 接下来，我们将看到CSS布局的另一个重要方面—网格系统。
    
+
    到这里，介绍弹性盒子的基础知识就结束了。我们希望你体会到乐趣，并且玩的开心，能随着你的学习与你一起向前。接下来，我们将看到 CSS 布局的另一个重要方面—网格系统。
    
 
 
    {{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
    
diff --git a/files/zh-cn/learn/css/css_layout/floats/index.html b/files/zh-cn/learn/css/css_layout/floats/index.html
index da5305a91cc75f..fd60f2bff5216b 100644
--- a/files/zh-cn/learn/css/css_layout/floats/index.html
+++ b/files/zh-cn/learn/css/css_layout/floats/index.html
@@ -21,12 +21,12 @@
 
-   
-   
+   
+   
-   
+   
    
  
   
    要求:HTML基础知识(学习入门 HTML)，和CSS的工作理念（学习 入门 CSS)。要求：HTML 基础知识 (学习入门 HTML)，和 CSS 的工作理念（学习 入门 CSS)。
   
    
   
    
    目标：学习如何创建浮动特性,比如首字下沉、浮动图像，和多个列在网页布局。学习如何创建浮动特性，比如首字下沉、浮动图像，和多个列在网页布局。
   
    
      
 
    
@@ -35,7 +35,7 @@ 
    浮动的背景知识
    
 
 
    最初，引入 {{cssxref("float")}} 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。
    
 
-
    但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。之前的 fancy paragraph example 的课程展示了如何使用浮动创建一个有趣的drop-cap（首字下沉）效果。
    
+
    但 Web 开发人员很快意识到，任何东西都可以浮动，而不仅仅是图像，所以浮动的使用范围扩大了。之前的 fancy paragraph example 的课程展示了如何使用浮动创建一个有趣的 drop-cap（首字下沉）效果。
    
 
 
    浮动曾被用来实现整个网站页面的布局，它使信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法。
    
 
@@ -45,7 +45,7 @@ 
    简单的例子
    
 
 
    让我们来探讨如何使用浮动。我们将从一个非常简单的例子开始，包括在图像周围浮动一个文本块。你可以跟随在你的电脑上创建新的 index.html 文件，以填充它 simple HTML template, 以下代码插入它在适当的地方。底部的部分你可以看到一个它应该是什么样子的例子。
    
 
-
    首先,我们写一些简单的HTML——添加以下到HTML的{{htmlelement("body")}}内,删除之前{{htmlelement("body")}}里面的东西：
    
+
    首先，我们写一些简单的 HTML——添加以下到 HTML 的{{htmlelement("body")}}内，删除之前{{htmlelement("body")}}里面的东西：
    
 
 
    <h1>Simple float example</h1>
 
@@ -55,7 +55,7 @@ 
    简单的例子
    
 
 <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    
 
-
    现在将以下CSS应用到您的HTML (使用一个{{htmlelement("style")}} 元素或一个{{htmlelement("link")}} 到一个单独的 .css 文件——你来选择)：
    
+
    现在将以下 CSS 应用到您的 HTML (使用一个{{htmlelement("style")}} 元素或一个{{htmlelement("link")}} 到一个单独的 .css 文件——你来选择)：
    
 
 
    body {
   width: 90%;
@@ -68,7 +68,7 @@ 
    简单的例子
    
   word-spacing: 0.1rem;
 }
    
 
-
    如果你现在保存并刷新，你会看到和你预期的效果差不多——图片坐落在文本的上方，目前看起来有点丑陋。我们本可以让图片在它的容器内居中，但取而代之，我们将使用float来让图片周围的文本浮起来。将以下规则添加到你之前的规则下面：
    
+
    如果你现在保存并刷新，你会看到和你预期的效果差不多——图片坐落在文本的上方，目前看起来有点丑陋。我们本可以让图片在它的容器内居中，但取而代之，我们将使用 float 来让图片周围的文本浮起来。将以下规则添加到你之前的规则下面：
    
 
 
    img {
   float: left;
@@ -109,7 +109,7 @@ 
    Playable code
    
 
 
    {{ EmbedLiveSample('Playable_code', '100%', 800) }}
    
 
-
    因此，让我们考虑一下浮动是如何工作的——浮动元素 (这个例子中的{{htmlelement("img")}} 元素)会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的{{htmlelement("body")}}元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。
    
+
    因此，让我们考虑一下浮动是如何工作的——浮动元素 (这个例子中的{{htmlelement("img")}} 元素) 会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的{{htmlelement("body")}}元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。
    
 
 
    注意浮动内容仍然遵循盒子模型诸如外边距和边界。我们设置一下图片右侧的外边距就能阻止右侧的文字紧贴着图片。
    
 
@@ -117,14 +117,14 @@ 
    Playable code
    
 
 
    再看我们的首字下沉例子
    
 
-
    如上所述，我们的 fancy paragraph example 从早先的课程精选了一个漂亮的首字下沉。在这个例子中,我们有一个简单的段落：
    
+
    如上所述，我们的 fancy paragraph example 从早先的课程精选了一个漂亮的首字下沉。在这个例子中，我们有一个简单的段落：
    
 
 
    <p>This is my very important paragraph.
  I am a distinguished gentleman of such renown that my paragraph
  needs to be styled in a manner befitting my majesty. Bow before
 my splendour, dear students, and go forth and learn CSS!</p>
    
 
-
    我们的CSS看起来像这样：
    
+
    我们的 CSS 看起来像这样：
    
 
 
    p {
   width: 400px;
@@ -158,9 +158,9 @@ 
    多列浮动布局
    
 
 
    两列布局
    
 
-
    让我们先从最简单的例子——两列布局。您可以通过创建一个新的 index.html 文件在您的计算机上，用simple HTML template填充它, 并在适当的地方插入下面的代码。在本节的底部，您可以看到一个活的例子，最终代码应该看起来像。
    
+
    让我们先从最简单的例子——两列布局。您可以通过创建一个新的 index.html 文件在您的计算机上，用simple HTML template填充它，并在适当的地方插入下面的代码。在本节的底部，您可以看到一个活的例子，最终代码应该看起来像。
    
 
-
    首先，我们需要一些内容放入我们的列。使用以下内容替换body中的任何内容：
    
+
    首先，我们需要一些内容放入我们的列。使用以下内容替换 body 中的任何内容：
    
 
 
    <h1>2 column layout example</h1>
 <div>
@@ -175,7 +175,7 @@ 
    两列布局
    
 
 
    每个列都需要一个外部元素来包含其内容，并让我们一次操作它的所有内容。在这个例子中，我们选择了{{htmlelement("div")}}，但你可以选择更多语义合适的东西{{htmlelement("article")}}、{{htmlelement("section")}}、和{{htmlelement("aside")}}，诸如此类。
    
 
-
    现在为CSS将以下内容应用到HTML以提供一些基本设置：
    
+
    现在为 CSS 将以下内容应用到 HTML 以提供一些基本设置：
    
 
 
    body {
   width: 90%;
@@ -183,7 +183,7 @@ 
    两列布局
    
   margin: 0 auto;
 }
    
 
-
    在宽度达到900px之前，整个视图的宽度将达到90%，在超过900px后，它将保持在这个宽度，并在视口中居中。默认情况下，子元素(这个{{htmlelement("h1")}} 和两个 {{htmlelement("div")}})将跨越整个body宽度的100%。如果我们希望将两个{{htmlelement("div")}}放在一起，那么我们需要将它们的宽度设置为父元素的宽度的100%，或者更小，这样它们就可以彼此匹配。将下面的内容添加到CSS的底部：
    
+
    在宽度达到 900px 之前，整个视图的宽度将达到 90%，在超过 900px 后，它将保持在这个宽度，并在视口中居中。默认情况下，子元素 (这个{{htmlelement("h1")}} 和两个 {{htmlelement("div")}}) 将跨越整个 body 宽度的 100%。如果我们希望将两个{{htmlelement("div")}}放在一起，那么我们需要将它们的宽度设置为父元素的宽度的 100%，或者更小，这样它们就可以彼此匹配。将下面的内容添加到 CSS 的底部：
    
 
 
    div:nth-of-type(1) {
   width: 48%;
@@ -193,7 +193,7 @@ 
    两列布局
    
   width: 48%;
 }
    
 
-
    在这里我们设置了他们的父亲的宽度的48％ —— 这总计96％，留下我们4％自由作为两列之间的沟槽，给内容一些空间呼吸。现在我们只需要浮动列，像这样：
    
+
    在这里我们设置了他们的父亲的宽度的 48％ —— 这总计 96％，留下我们 4％自由作为两列之间的沟槽，给内容一些空间呼吸。现在我们只需要浮动列，像这样：
    
 
 
    div:nth-of-type(1) {
   width: 48%;
@@ -251,20 +251,20 @@ 
    Playable code 2
    
 
 
    需要注意的一件事是，当它们变得非常窄时，列就会变得很糟糕。切换回窄屏幕的单列布局通常是有意义的（如手机)，使用媒体查询可以实现这一功能。再一次，你们将在未来的响应式网页设计模块中学习这些知识。
    
 
-
    另一种选择是将宽度设置为一个固定的单位如rem或像素——你可以看到一个例子two-column-layout-fixed.html (see source code)，或者通过删除max-width 声明来转换您自己的示例，并改变各个宽度为 900px, 430px和 430px。这就是固定宽度布局（fixed-width layout）——如果您现在调整浏览器大小，您将看到布局不再调整以适应视图宽度，在尺寸更小时您将需要滚动来查看它的全部。
    
+
    另一种选择是将宽度设置为一个固定的单位如 rem 或像素——你可以看到一个例子two-column-layout-fixed.html (see source code)，或者通过删除max-width 声明来转换您自己的示例，并改变各个宽度为 900px, 430px和 430px。这就是固定宽度布局（fixed-width layout）——如果您现在调整浏览器大小，您将看到布局不再调整以适应视图宽度，在尺寸更小时您将需要滚动来查看它的全部。
    
 
 
    现在我们将转去使用流体布局。
    
 
 
    三列布局
    
 
-
    你已经有了一个两列布局工作，添加一个第三列(或更多)并不是太难。你只需要添加另一个列在同一个父元素。开始通过添加以下 {{htmlelement("div")}}就在另外两个后面(或使用 0_two-column-layout.html 作为开始）：
    
+
    你已经有了一个两列布局工作，添加一个第三列 (或更多) 并不是太难。你只需要添加另一个列在同一个父元素。开始通过添加以下 {{htmlelement("div")}}就在另外两个后面 (或使用 0_two-column-layout.html 作为开始）：
    
 
 
    <div>
   <h2>Third column</h2>
   <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p>
 </div>
    
 
-
    现在更新你的CSS如下：
    
+
    现在更新你的 CSS 如下：
    
 
 
    body {
   width: 90%;
@@ -337,13 +337,13 @@ 
    Playable code 3
    
 
 
    {{ EmbedLiveSample('Playable_code_3', '100%', 800) }}
    
 
-
    这个例子我们已经很熟悉了；唯一真正的区别是我们有了这个额外的列——为了让它放到合适的位置我们已经把它放在左边了；我们还给了它一个4%的 {{cssxref("margin-left")}}，来在第一和第二列之间拉开一段距离。我们设置了列的宽度以便它们都能匹配——36% + 30% + 4% + 26% = 96%，在第二和第三列之间有4%的空间。（这个空间总是出现在向左浮动的第二列和向右浮动的第三列之间。）
    
+
    这个例子我们已经很熟悉了；唯一真正的区别是我们有了这个额外的列——为了让它放到合适的位置我们已经把它放在左边了；我们还给了它一个 4% 的 {{cssxref("margin-left")}}，来在第一和第二列之间拉开一段距离。我们设置了列的宽度以便它们都能匹配——36% + 30% + 4% + 26% = 96%，在第二和第三列之间有 4% 的空间。（这个空间总是出现在向左浮动的第二列和向右浮动的第三列之间。）
    
 
 
    这里需要注意的一点是，您必须仔细考虑将列放在什么位置，以及如何浮动它们，以获得所需的结果。你的内容应该是有意义的，当你阅读它的源代码和它的视觉布局的时候；但是，使用浮动可以使可视化布局与源顺序不同。来说明我们的意思，尝试改变第二列的 {{cssxref("float")}}值为 right （或者看一看three-column-layout-wrong-order.html (源码)）你会看到现在的视觉顺序是这样的：
    
 
 
    div1  div3  div2
    
 
-
    这是因为第二个<div>源代码顺序上比第三个<div>等级要高 (DOM上第二个<div>先出现并声明了float: right;) ，所以在浮动顺序上也会比第三个<div>等级要高。又因为两者同时像右浮动，第二个<div>就会更加地靠右。
    
+
    这是因为第二个<div>源代码顺序上比第三个<div>等级要高 (DOM 上第二个<div>先出现并声明了float: right;) ，所以在浮动顺序上也会比第三个<div>等级要高。又因为两者同时像右浮动，第二个<div>就会更加地靠右。
    
 
 
    然而视觉受损的人使用屏幕阅读器来听你的内容，仍然会听到这个顺序的内容：
    
 
@@ -357,7 +357,7 @@ 
    Playable code 3
    
 
 
    清除浮动
    
 
-
    现在你已经知道了关于 float 属性的一些有趣事实，不过你很快就能够碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。为了说明我们的意思，尝试在第三个{{htmlelement("div")}} 元素下面添加以下HTML（并检出2_float-disaster.html (source code)）：
    
+
    现在你已经知道了关于 float 属性的一些有趣事实，不过你很快就能够碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果没有处理这些元素，就会变得很糟糕。为了说明我们的意思，尝试在第三个{{htmlelement("div")}} 元素下面添加以下 HTML（并检出2_float-disaster.html (source code)）：
    
 
 
    <footer>
   <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p>
@@ -365,7 +365,7 @@ 
    清除浮动
    
 
 
    你会看到页脚在最长的列旁边环绕着，这看起来很糟糕——我们希望页脚保持在底部，在所有的列下面。幸运的是，有一种简单的方法可以解决这个问题—— {{cssxref("clear")}} 属性。当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非您稍后将一个新的{{cssxref("float")}}声明应用到此后的另一个元素。
    
 
-
    所以，要解决我们的问题，添加以下规则到您的CSS：
    
+
    所以，要解决我们的问题，添加以下规则到您的 CSS：
    
 
 
    footer {
   clear: both;
@@ -444,7 +444,7 @@ 
    Playable code 4
    
 
 
    浮动问题
    
 
-
    以上部分提供了使用浮动创建简单布局的基础，但是还有一些问题需要解决。 让我们谈谈这些问题。
    
+
    以上部分提供了使用浮动创建简单布局的基础，但是还有一些问题需要解决。让我们谈谈这些问题。
    
 
 
    整个宽度可能难以计算
    
 
@@ -458,15 +458,15 @@ 
    整个宽度可能难以计算
    
 
 
    此时，您将看到您的布局已损坏 —— 由于内边距和边界引入的额外宽度，一行容纳不下三列了，因此第三列下降到另外两列之下。
    
 
-
    有两个方法可以解决问题，最好的方法是给你的html加上下面的css。
    
+
    有两个方法可以解决问题，最好的方法是给你的 html 加上下面的 css。
    
 
 
    * {
   box-sizing: border-box;
 }
    
 
-
    {{cssxref("box-sizing")}} 通过更改盒模型来拯救我们，盒子的宽度取值为 content + padding + border，而不仅是之前的content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。
    
+
    {{cssxref("box-sizing")}} 通过更改盒模型来拯救我们，盒子的宽度取值为 content + padding + border，而不仅是之前的 content——所以当增加内边距或边界的宽度时，不会使盒子更宽——而是会使内容调整得更窄。
    
 
-
    我们有另一个问题——页脚正压在最长列上， 在这一点并不理想——我们来试着清除页脚浮动的同时给出一些顶部外边距（ margin-top ）来解决这个问题：
    
+
    我们有另一个问题——页脚正压在最长列上，在这一点并不理想——我们来试着清除页脚浮动的同时给出一些顶部外边距（ margin-top ）来解决这个问题：
    
 
 
    footer {
   clear: both;
@@ -476,16 +476,16 @@ 
    整个宽度可能难以计算
    
 
    然而，这不起作用 ——浮动的元素存在于正常的文档布局流之外，在某些方面的行为相当奇怪：
    
 
 
      
- 
    • 首先，他们在父元素中所占的面积的有效高度为0 ——尝试在浏览器中加载 1_three-column-layout.html 并用开发工具查看 {{htmlelement("body")}} 的高度，你将会看到我们的意思是什么——所报告的正文高度只有 {{htmlelement("h1")}} 的高度 。这个可以通过很多方式解决，但是我们所依赖的是在父容器的底部清除浮动，如我们在我们的当前示例所做的那样。 如果检查当前示例中正文的高度，您应该看它的高度是行为本身。
      • 
+ 
    • 首先，他们在父元素中所占的面积的有效高度为 0 ——尝试在浏览器中加载 1_three-column-layout.html 并用开发工具查看 {{htmlelement("body")}} 的高度，你将会看到我们的意思是什么——所报告的正文高度只有 {{htmlelement("h1")}} 的高度。这个可以通过很多方式解决，但是我们所依赖的是在父容器的底部清除浮动，如我们在我们的当前示例所做的那样。如果检查当前示例中正文的高度，您应该看它的高度是行为本身。
      • 
  
    • 其次，非浮动元素的外边距不能用于它们和浮动元素之间来创建空间——这是我们在这里眼前的问题，我们将在下面实施修复。
      • 
- 
    • 还有一些关于浮动的奇怪的事情——Chris Coyier优秀的关于Floats文章概述了其他一些以及修复这些。
      • 
+ 
    • 还有一些关于浮动的奇怪的事情——Chris Coyier 优秀的关于 Floats文章概述了其他一些以及修复这些。
      • 
 
    
 
-
    所以，让我们解决这个！ 首先，在HTML的代码里添加新的{{htmlelement("div")}} 元素，位于在<footer>标签的上方：
    
+
    所以，让我们解决这个！首先，在 HTML 的代码里添加新的{{htmlelement("div")}} 元素，位于在<footer>标签的上方：
    
 
 
    <div class="clearfix"></div>
    
 
-
    如果您没有一个可用的元素来清除您的浮动(比如我们的页脚)，在您想要清除的浮动之后添加一个看不见的“clearfix div”是非常有用的，但是在这里页脚也要用到。接下来我们要做的是，移除页脚样式规则中的 clear: both; 声明，取而代之将其放在clearfix div中：
    
+
    如果您没有一个可用的元素来清除您的浮动 (比如我们的页脚)，在您想要清除的浮动之后添加一个看不见的“clearfix div”是非常有用的，但是在这里页脚也要用到。接下来我们要做的是，移除页脚样式规则中的 clear: both; 声明，取而代之将其放在 clearfix div 中：
    
 
 
    .clearfix {
   clear: both;
@@ -511,13 +511,13 @@ 
    整个宽度可能难以计算
    
 
    注： 查看在这个阶段最后一个解决的例子4_fixed-layout-border-box.html (source code)。
    
 
 
-
    这里要注意的另一小点是，box-sizing 出现可以追溯到Internet Explorer 8——如果您明确需要支持较老的浏览器，您可能需要手动调整列的宽度，以允许内边距和边界宽度。这不是一种非常精确的技术，特别是考虑到你不能用百分比来确定边界——你只需要在尽可能充满父宽度的同时留出足够的空间。你可以看到这样的实战修复fixed-layout-adjusted-percentages.html (见源代码)。
    
+
    这里要注意的另一小点是，box-sizing 出现可以追溯到 Internet Explorer 8——如果您明确需要支持较老的浏览器，您可能需要手动调整列的宽度，以允许内边距和边界宽度。这不是一种非常精确的技术，特别是考虑到你不能用百分比来确定边界——你只需要在尽可能充满父宽度的同时留出足够的空间。你可以看到这样的实战修复fixed-layout-adjusted-percentages.html (见源代码)。
    
 
 
    浮动项目的背景高度
    
 
 
    到目前为止，我们建好的示例是有效的，但另一个问题是列高度是不同的—— 如果列都是相同的高度，它看起来会更好。
    
 
-
    我们可以通过给所有的列固定{{cssxref("height")}} 来解决这个问题(see 5_fixed-height-columns.html (源代码)：
    
+
    我们可以通过给所有的列固定{{cssxref("height")}} 来解决这个问题 (see 5_fixed-height-columns.html (源代码)：
    
 
 
    .column {
   height: 550px;
@@ -525,19 +525,19 @@ 
    浮动项目的背景高度
    
 
 
    然而在许多情况下这并不理想——它使设计呆板。如果你能保证列中总是有相同数量的内容，这是可以的，但这并不总是如此——在很多类型的网站上，内容也会定期更改。
    
 
-
    这正是像flexbox这样的新布局技术所解决的问题。Flexbox可以自动地延长列，这样他们就会像最长的一列一样。
    
+
    这正是像 flexbox 这样的新布局技术所解决的问题。Flexbox 可以自动地延长列，这样他们就会像最长的一列一样。
    
 
 
    你也可以考虑：
    
 
 
      
  
    1. 将这些列的背景颜色设置为父元素的背景颜色，这样您就不会看到高度是不同的。这是目前最好的选择。
      2. 
  
    2. 将它们设置为固定的高度，并使内容滚动{{cssxref("overflow")}} (参见我们溢流部分的示例。)
      3. 
- 
    3. 使用一种叫做伪列（faux columns）的技术——这包括将背景(和边界)从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景一样。不幸的是，这将无法处理列边界。 详见对于伪列和伪列流体布局的教程。
      4. 
+ 
    4. 使用一种叫做伪列（faux columns）的技术——这包括将背景 (和边界) 从实际的列中提取出来，并在列的父元素上画一个伪造的背景，看起来像列的背景一样。不幸的是，这将无法处理列边界。 详见对于伪列和伪列流体布局的教程。
      5. 
 
    
 
 
    清除浮动会变复杂
    
 
-
    我们在文章中建立的简单例子很容易理解，但是当布局变得更加复杂清理（clearing）也会变得更加复杂。你需要确保所有的浮动都能尽快清除，以避免它们给下方的内容制造麻烦。如果您没有一个方便的容器来进行清理，那么在必要的时候使用clearfix块。
    
+
    我们在文章中建立的简单例子很容易理解，但是当布局变得更加复杂清理（clearing）也会变得更加复杂。你需要确保所有的浮动都能尽快清除，以避免它们给下方的内容制造麻烦。如果您没有一个方便的容器来进行清理，那么在必要的时候使用 clearfix 块。
    
 
 
    纸上得来终觉浅！
    
 
@@ -545,6 +545,6 @@ 
    纸上得来终觉浅！
    
 
 
    总结
    
 
-
    现在，您应该已经拥有了一些强大的工具来创建相当复杂的web布局。太好了!在下一篇文章中，我们将进一步研究定位。
    
+
    现在，您应该已经拥有了一些强大的工具来创建相当复杂的 web 布局。太好了！在下一篇文章中，我们将进一步研究定位。
    
 
 
    {{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
    
diff --git a/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html
index d90063c087b4d9..51be1e926c8dd4 100644
--- a/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html
+++ b/files/zh-cn/learn/css/css_layout/fundamental_layout_comprehension/index.html
@@ -5,18 +5,18 @@
 ---
 
    {{LearnSidebar}}
    
 
-
    如果您已经完成了这个模块的学习，那么您将已经学习了今天进行CSS布局以及使用旧的CSS所需的基本知识。
    
+
    如果您已经完成了这个模块的学习，那么您将已经学习了今天进行 CSS 布局以及使用旧的 CSS 所需的基本知识。
    
 
 
-   
+   
-   
+   
@@ -26,13 +26,13 @@
 
 
    项目简介
    
 
-
    我们已经为你提供了一些原始的html、基本的css文件和图像——现在你需要设计一个跟下面图片相似的布局页面。
    
+
    我们已经为你提供了一些原始的 html、基本的 css 文件和图像——现在你需要设计一个跟下面图片相似的布局页面。
    基本步骤
    
 
-
    你可以在这下载基本的html css和图片素材 here.
    
+
    你可以在这下载基本的 html css 和图片素材 here.
    
 
-
    将HTML文档和css保存到你自己计算机的目录中，并将图像添加到名为images的文件夹中，在浏览器中打开index.html文件应该会给您提供一个具有基本样式但没有布局的页面，该页面应该类似下面所示的图像。
    
+
    将 HTML 文档和 css 保存到你自己计算机的目录中，并将图像添加到名为 images 的文件夹中，在浏览器中打开 index.html 文件应该会给您提供一个具有基本样式但没有布局的页面，该页面应该类似下面所示的图像。
    此页面开始于浏览器在正常流中显示的布局的所有内容。
    
 
@@ -65,6 +65,6 @@ 
    评估
     
    
 
-
    如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 Learning Area Discourse thread 或 Mozilla IRC 的 #mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
    
+
    如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 Learning Area Discourse thread 或 Mozilla IRC 的 #mdn IRC 频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！
     
    
diff --git a/files/zh-cn/learn/css/css_layout/grid_skills/index.html b/files/zh-cn/learn/css/css_layout/grid_skills/index.html
index f00f8d4c6ca04c..1b31d3eee9818e 100644
--- a/files/zh-cn/learn/css/css_layout/grid_skills/index.html
+++ b/files/zh-cn/learn/css/css_layout/grid_skills/index.html
@@ -1,5 +1,5 @@
 ---
-title: '测试你的技能: 网格布局'
+title: '测试你的技能：网格布局'
 slug: Learn/CSS/CSS_layout/Grid_skills
 translation_of: Learn/CSS/CSS_layout/Grid_skills
 ---
@@ -7,65 +7,65 @@
 
 
 
-
    此任务的目的是让你使用CSS网格布局，并测试你是否了解网格和网格项的行为方式。 你将会完成三个包括不同的元素小任务。
    
+
    此任务的目的是让你使用 CSS 网格布局，并测试你是否了解网格和网格项的行为方式。你将会完成三个包括不同的元素小任务。
    
-
    提示: 您可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具(如CodePen、jsFiddle或Glitch)处理这些任务可能会更有帮助。
    
+
    提示: 您可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具 (如 CodePen、jsFiddle 或 Glitch) 处理这些任务可能会更有帮助。
    
  
    
  如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 评估或进一步帮助 部分。
    
 
    网格布局 一
    
 
-
    在此任务中，你需要创建一个网格，要求其中的四个子元素能自动排布。网格内要有三列并且将可用空间等分，列和行的间距均为20px。
    
+
    在此任务中，你需要创建一个网格，要求其中的四个子元素能自动排布。网格内要有三列并且将可用空间等分，列和行的间距均为 20px。
    在三列网格布局中有四个物体放入其中。
    
 
-
    尝试更新下面的实时代码以复现上面的示例:
    
+
    尝试更新下面的实时代码以复现上面的示例：
    {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}
    
-
    评估或进一步的工作目的, 可以下载此任务的源文件在你自己的编辑器或使用线编辑器。
    
+
    评估或进一步的工作目的，可以下载此任务的源文件在你自己的编辑器或使用线编辑器。
    
 
    网格布局 二
    
 
-
    在此例中, 我们已经定义好了一个grid, 请通过修改下面两个子元素的CSS规则, 导致它们跨过彼此的网格轨道; 第二个 item 应该在第一个 item 之上(如下图所示).
    
+
    在此例中，我们已经定义好了一个 grid, 请通过修改下面两个子元素的 CSS 规则，导致它们跨过彼此的网格轨道; 第二个 item 应该在第一个 item 之上 (如下图所示).
    盒子中的两个元素, 其中一个元素覆盖在另一个元素上.
    
 
-
    尝试更新下面的实时代码以复现上面的示例:
    
+
    尝试更新下面的实时代码以复现上面的示例：
    {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 800)}}
    
 
-
    附加问题:
    
+
    附加问题：
      
- 
    • 你可以把第一个元素覆盖到第二个元素, 而不通过改变html元素的顺序吗?
      • 
+ 
    • 你可以把第一个元素覆盖到第二个元素，而不通过改变 html 元素的顺序吗？
      • 
 
    
-
    评估或进一步的工作目的, 可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
    
+
    评估或进一步的工作目的，可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
    
 
    网格布局 三
    
 
-
    此grid中4个子元素, 初始状态是显示的是auto-placement. 请通过使用 grid-area 和 grid-template-areas 属性对照下图放置元素的布局.
    
+
    此 grid 中 4 个子元素，初始状态是显示的是 auto-placement. 请通过使用 grid-area 和 grid-template-areas 属性对照下图放置元素的布局。
    网格中显示的四个项目.
    
 
-
    尝试更新下面的实时代码以复现上面的示例:
    
+
    尝试更新下面的实时代码以复现上面的示例：
    {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}
    
-
    评估或进一步的工作目的, 可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
    
+
    评估或进一步的工作目的，可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
    
 
    
 
-
    此例中, 你需要同时使用Grid Layout 和 Flexbox 来完成下图所示的任务. 这个过程中你不需要通过改变HTML来完成.
    
+
    此例中，你需要同时使用 Grid Layout 和 Flexbox 来完成下图所示的任务。这个过程中你不需要通过改变 HTML 来完成。
    
 
 
    两行卡片，每个卡片有一个图像和一组标签.
    
 
@@ -74,19 +74,19 @@ 
    
 
    {{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}
    
 
 
    
-
    评估或进一步的工作目的, 可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
    
+
    评估或进一步的工作目的，可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
    
 
    
 
 
    评估 或者 帮助
    
 
-
    你可以在上述的交互编辑器上练习.
    
+
    你可以在上述的交互编辑器上练习。
    
 
-
    如果你的作业需要评估, 或者有困难想要帮助:
    
+
    如果你的作业需要评估，或者有困难想要帮助：
      
- 
    1. 把你的作业放在一个在线可分享的编辑器上, 比如 CodePen, jsFiddle, 或者 Glitch. 你可以自己重头开始写, 或者使用上面章节提供的源文件.
      2. 
+ 
    2. 把你的作业放在一个在线可分享的编辑器上，比如 CodePen, jsFiddle, 或者 Glitch. 你可以自己重头开始写，或者使用上面章节提供的源文件。
      3. 
  
    3. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include:
-  发布一个评估的帖子 或者 帮助在MDN Discourse forum Learning category你的发布应该涵盖以下几点:
+  发布一个评估的帖子 或者 帮助在MDN Discourse forum Learning category你的发布应该涵盖以下几点：
   
        
    
      • A descriptive title such as "Assessment wanted for Grid layout 1 skill test".
        • 
    
      • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
        • 
diff --git a/files/zh-cn/learn/css/css_layout/grids/index.html b/files/zh-cn/learn/css/css_layout/grids/index.html
index 5e338fdf6a39c4..690aa545930b13 100644
--- a/files/zh-cn/learn/css/css_layout/grids/index.html
+++ b/files/zh-cn/learn/css/css_layout/grids/index.html
@@ -3,7 +3,7 @@
 slug: Learn/CSS/CSS_layout/Grids
 tags:
   - CSS
-  - CSS网格
+  - CSS 网格
   - 初学者
   - 学习
   - 布局
@@ -20,16 +20,16 @@
 
 
        {{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
        
 
-
        CSS网格是一个用于web的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。
        
+
        CSS 网格是一个用于 web 的二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。关于使用网格进行页面排版，这篇文章包含了你需要的一切知识。
        
 
 
    
  
   
    任务需知:任务需知：
    
     
    在尝试此评估之前，您应该已经阅读了本模块中的所有文章。
    
        		
   
    
   
    任务目标:任务目标：
    
     
    测试您对本单元所涵盖的基本布局技能的理解与掌握应用。
    
        		
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
-   
-   
+   
+   
-   
+   
@@ -47,15 +47,15 @@ 
    什么是网格布局？
    
 
-
    [临时图； 将很快替换更好的图片。]
    
+
    [临时图；将很快替换更好的图片。]
    
-
    注意：任何有设计背景的人似乎都感到惊讶，CSS没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。
    
+
    注意：任何有设计背景的人似乎都感到惊讶，CSS 没有内置的网格系统，而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样，这将被改变，但是你可能需要知道在未来一段时间内创建网格的现有方法。
    
 
    
 
-
    在CSS中创建自己的网格
    
+
    在 CSS 中创建自己的网格
    
 
-
    决定好你的设计所需要的网格后，你可以创建一个CSS网格版面并放入各类元素。我们先来看看网格的基础功能，然后尝试做一个简单的网格系统。
    
+
    决定好你的设计所需要的网格后，你可以创建一个 CSS 网格版面并放入各类元素。我们先来看看网格的基础功能，然后尝试做一个简单的网格系统。
    下面这个视频提供了一个很好的解释：
    
 
@@ -65,7 +65,7 @@ 
    定义一个网格
    一如既往，你可以下载教程文件（你可以在线看到效果）。例子中有一个容器，容器中有一些子项。默认情况下，子项按照正常布局流自顶而下排布。在这篇文章中，我们会从这开始，对这些文件做一些改变，来了解网格是如何工作的。
    
 
-
    首先，将容器的{{cssxref("display")}}属性设置为grid来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的css规则加到你的文件中。
    
+
    首先，将容器的{{cssxref("display")}}属性设置为grid来定义一个网络。与弹性盒子一样，将父容器改为网格布局后，他的直接子项会变为网格项。把下面的 css 规则加到你的文件中。
    .container {
     display: grid;
@@ -120,11 +120,11 @@ 
    简单的网格示例 
    
 
 
    {{ EmbedLiveSample('Grid_1', '100%', 400) }}
    
 
-
    使用fr单位的灵活网格
    
+
    使用 fr 单位的灵活网格
    
 
 
    除了长度和百分比，我们也可以用fr这个单位来灵活地定义网格的行与列的大小。这个单位表示了可用空间的一个比例，可能有点抽像，看看下面的例子吧。
    
 
-
    使用下面的规则来创建3个1fr的列：
    
+
    使用下面的规则来创建 3 个1fr的列：
    
 
 
    .container {
     display: grid;
@@ -142,7 +142,7 @@ 
    使用fr单位的灵活网格
    
 
 
    
 
 
-
    使用grid-template-areas属性放置元素
    
+
    使用 grid-template-areas 属性放置元素
    
 
 
    另一种往网格放元素的方式是用{{cssxref("grid-template-areas")}}属性，并且你要命名一些元素并在属性中使用这些名字作为一个区域。
    
 
-
    将之前基于线的元素放置代码删除（或者重新下载一份新的文件），然后加入以下CSS规则：
    
+
    将之前基于线的元素放置代码删除（或者重新下载一份新的文件），然后加入以下 CSS 规则：
    
 
 
    .container {
   display: grid;
@@ -598,13 +598,13 @@ 
    基于线的元素放置
    
  
  • 使用.符号，让一个格子留空
    • 
 
 
-
    你可以在文件中尽情发挥你的想象来测试各种网格排版，比如把页脚放在内容之下，或者把侧边栏一直延伸到最底。这种直观的元素放置方式很棒，你在CSS中看到的就是实际会出现的排版效果。
    
+
    你可以在文件中尽情发挥你的想象来测试各种网格排版，比如把页脚放在内容之下，或者把侧边栏一直延伸到最底。这种直观的元素放置方式很棒，你在 CSS 中看到的就是实际会出现的排版效果。
    
 
-
    一个用CSS网格实现的网格排版框架
    
+
    一个用 CSS 网格实现的网格排版框架
    
 
-
    网格排版框架一般由12到16列的网格构成，你可以用CSS网格系统直接实现而不需要任何第三方的工具，毕竟这是标准定义好了的。
    
+
    网格排版框架一般由 12 到 16 列的网格构成，你可以用 CSS 网格系统直接实现而不需要任何第三方的工具，毕竟这是标准定义好了的。
    
 
-
    下载这个初始文件，文件中包含了一个定义了12列网格的容器。文件中的一些内容我们曾在前两个示例中使用过，我们暂时可以先用基于线的元素放置模式来将我们的内容放到这个12列的网格中。
    
+
    下载这个初始文件，文件中包含了一个定义了 12 列网格的容器。文件中的一些内容我们曾在前两个示例中使用过，我们暂时可以先用基于线的元素放置模式来将我们的内容放到这个 12 列的网格中。
    
 
 
    header {
   grid-column: 1 / 13;
@@ -628,7 +628,7 @@ 
    一个用CSS网格实现
 
 
    
 
 
-
    那些我们想要跨越多个列的布局容器需要被赋予特殊的类，来将它们的{{cssxref("width")}} 值调整到所需的列数（加上之间的沟槽）。我们需要创建一个额外的类，以允许容器跨越2到12列。每个宽度是将该列数的列宽加上沟槽宽度得到的结果，总是比列数少1。
    
+
    那些我们想要跨越多个列的布局容器需要被赋予特殊的类，来将它们的{{cssxref("width")}} 值调整到所需的列数（加上之间的沟槽）。我们需要创建一个额外的类，以允许容器跨越 2 到 12 列。每个宽度是将该列数的列宽加上沟槽宽度得到的结果，总是比列数少 1。
    
 
-
    在CSS的底部添加以下内容：
    
+
    在 CSS 的底部添加以下内容：
    
 
 
    /* Two column widths (120px) plus one gutter width (20px) */
 .col.span2 { width: 140px; }
@@ -837,7 +837,7 @@ 
    一个简单的定宽网格
    
 
    创建这些类后，我们现在可以在网格上布置不同的宽度列。尝试保存并在浏览器中加载页面以查看效果。
    
 
 
    
-
    注意：如果您无法使上述示例工作，请尝试将其与我们在GitHub上完成的版本进行比较（也可以看在线运行）。
    
+
    注意：如果您无法使上述示例工作，请尝试将其与我们在 GitHub 上完成的版本进行比较（也可以看在线运行）。
    
 
    
 
 
    尝试修改元素上的类，添加和删除一些容器，看看如何改变布局。例如，您可以使第二行如下所示：
    
@@ -857,23 +857,23 @@ 
    创建流体网格
    
 
 
    target / context = result
    
 
-
    对于列宽来说，上下文是一个960像素的包装器，目标的宽度是60像素，我们可以使用以下计算百分比。
    
+
    对于列宽来说，上下文是一个 960 像素的包装器，目标的宽度是 60 像素，我们可以使用以下计算百分比。
    
 
 
    60 / 960 = 0.0625
    
 
-
    然后我们移动小数点2个位置，给出6.25％的百分比。因此，在我们的CSS中，我们可以替换60像素列宽度为6.25％。
    
+
    然后我们移动小数点 2 个位置，给出 6.25％的百分比。因此，在我们的 CSS 中，我们可以替换 60 像素列宽度为 6.25％。
    
 
 
    我们需要对沟槽宽度做同样的事情：
    
 
 
    20 / 960 = 0.02083333333
    
 
-
    因此，我们需要更换20像素margin-left在我们的.col规则和20像素padding-right的.wrapper有2.08333333％。
    
+
    因此，我们需要更换 20 像素margin-left在我们的.col 规则和 20 像素padding-right的.wrapper 有 2.08333333％。
    
 
 
    更新网格
    
 
 
    要开始使用本部分，请制作您之前的示例页面的新副本，或者将我们的simple-grid-finished.html代码的本地副本用作起点。
    
 
-
    更新第二个CSS规则（使用.wrapper选择器）如下：
    
+
    更新第二个 CSS 规则（使用.wrapper 选择器）如下：
    
 
 
    body {
   width: 90%;
@@ -887,7 +887,7 @@ 
    更新网格
    
 
 
    不仅我们给了它一个百分比width，我们还添加了一个max-width属性，以阻止布局变得太宽。
    
 
-
    接下来，更新第四个CSS规则（使用.col选择器）如下：
    
+
    接下来，更新第四个 CSS 规则（使用.col 选择器）如下：
    
 
 
    .col {
   float: left;
@@ -898,7 +898,7 @@ 
    更新网格
    
 
 
    现在来看稍微更费力的部分 —  我们需要更新所有的 .col.span 规则，使用百分比而不是像素宽度。这需要一点时间与计算器; 为了省你一些努力，我们已经为你做了下面。
    
 
-
    使用以下内容更新CSS规则的底部块：
    
+
    使用以下内容更新 CSS 规则的底部块：
    
 
 
    /* Two column widths (12.5%) plus one gutter width (2.08333333%) */
 .col.span2 { width: 14.58333333%; }
@@ -918,14 +918,14 @@ 
    更新网格
    
 
    现在保存您的代码，在浏览器中加载它，并尝试更改视口宽度 - 您应该看到列宽调整很好地适合！
    
 
 
    
-
    注意：如果您无法使上述示例工作，请尝试将其与我们在GitHub上完成的版本进行比较（请参见它如何运行的）。
    
+
    注意：如果您无法使上述示例工作，请尝试将其与我们在 GitHub 上完成的版本进行比较（请参见它如何运行的）。
    
 
    
 
-
    使用calc() 函数更容易的计算
    
+
    使用 calc() 函数更容易的计算
    
 
-
    你可以使用calc()函数在你的CSS里面做数学 — 这允许你插入简单的数学方程到你的CSS值，计算一个值应该是什么。当需要执行复杂的数学运算时，它是特别有用的，甚至可以计算使用不同单位的计算，例如“我希望此元素的高度始终为父级高度的100％，减去50px”。从MediaRecorder API教程中查看此示例。
    
+
    你可以使用calc()函数在你的 CSS 里面做数学 — 这允许你插入简单的数学方程到你的 CSS 值，计算一个值应该是什么。当需要执行复杂的数学运算时，它是特别有用的，甚至可以计算使用不同单位的计算，例如“我希望此元素的高度始终为父级高度的 100％，减去 50px”。从 MediaRecorder API 教程中查看此示例。
    
 
-
    无论如何，回到我们的网格！跨越网格的多个列的任何列具有6.25％的总宽度乘以跨越的列数加上2.08333333％乘以槽的数量（其将总是列数减去1）。该calc()函数允许我们在宽度值内部执行此计算，因此对于跨4列的任何项目，我们可以执行此操作，例如：
    
+
    无论如何，回到我们的网格！跨越网格的多个列的任何列具有 6.25％的总宽度乘以跨越的列数加上 2.08333333％乘以槽的数量（其将总是列数减去 1）。该 calc() 函数允许我们在宽度值内部执行此计算，因此对于跨 4 列的任何项目，我们可以执行此操作，例如：
    
 
 
    .col.span4 {
   width: calc((6.25%*4) + (2.08333333%*3));
@@ -946,25 +946,25 @@ 
    使用calc() 函数更容易的计
 .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
    
 
 
    
-
    注意：您可以在fluid-grid-calc.html（也可以看到它的live）中看到我们的完成版本。
    
+
    注意：您可以在fluid-grid-calc.html（也可以看到它的 live）中看到我们的完成版本。
    
 
    
 
 
    
-
    注意：如果你不能让这个工作，它可能是因为你的浏览器不支持该calc()功能，虽然它是相当支持跨浏览器 - 远在IE9
    
+
    注意：如果你不能让这个工作，它可能是因为你的浏览器不支持该 calc() 功能，虽然它是相当支持跨浏览器 - 远在 IE9
    
 
    
 
 
    语义与“非语义”网格系统
    
 
-
    向您的标记添加类来定义布局意味着您的内容和标记与其视觉呈现相关联。有时你会听到这种使用描述为“非语义”的CSS类 - 描述内容的外观 - 而不是描述内容的类的语义使用。这正是我们的情况下span2，span3类，等等。
    
+
    向您的标记添加类来定义布局意味着您的内容和标记与其视觉呈现相关联。有时你会听到这种使用描述为“非语义”的 CSS 类 - 描述内容的外观 - 而不是描述内容的类的语义使用。这正是我们的情况下 span2，span3 类，等等。
    
 
-
    这些不是唯一的办法，你可以改为决定网格。然后将大小信息添加到现有语义类的规则中。例如，如果你有一个<div>类content，你想跨越8列，你可以复制从span8类的宽度，给你一个像这样的规则：
    
+
    这些不是唯一的办法，你可以改为决定网格。然后将大小信息添加到现有语义类的规则中。例如，如果你有一个<div>类 content，你想跨越 8 列，你可以复制从 span8 类的宽度，给你一个像这样的规则：
    
 
 
    .content {
   width: calc((6.25%*8) + (2.08333333%*7));
 }
    
 
 
    
-
    注意：如果你使用一个预处理器，如Sass，你可以创建一个简单的mixin来插入这个值。
    
+
    注意：如果你使用一个预处理器，如Sass，你可以创建一个简单的 mixin 来插入这个值。
    
 
    
 
 
    在网格中启用偏移容器
    
@@ -975,7 +975,7 @@ 
    在网格中启用偏移容器
    
 
 
    从您之前的代码开始，或使用我们的fluid-grid.html文件作为起点。
    
 
-
    让我们在CSS中创建一个类，它将容器元素偏移一列宽度。将以下内容添加到CSS的底部：
    
+
    让我们在 CSS 中创建一个类，它将容器元素偏移一列宽度。将以下内容添加到 CSS 的底部：
    
 
 
    .offset-by-one {
   margin-left: calc(6.25% + (2.08333333%*2));
@@ -987,7 +987,7 @@ 
    在网格中启用偏移容器
    
   margin-left: 10.41666666%;
 }
    
 
-
    现在可以将此类添加到任何容器，列如你要在其左侧留下一列宽的空白。在HTML中添加这个：
    
+
    现在可以将此类添加到任何容器，列如你要在其左侧留下一列宽的空白。在 HTML 中添加这个：
    
 
 
    <div class="col span6">14</div>
    
 
@@ -1004,7 +1004,7 @@ 
    在网格中启用偏移容器
    
 
    
 
 
    
-
    注意：作为一个额外的练习，你能实现一个offset-by-two类吗？
    
+
    注意：作为一个额外的练习，你能实现一个 offset-by-two 类吗？
    
 
    
 
 
    浮动网格限制
    
@@ -1015,11 +1015,11 @@ 
    浮动网格限制
    
 
 
    这个系统的最大限制是它基本上是一维的。我们处理的是列元素只能跨越多个列，而不能跨越行。这些旧的布局方法非常难以控制元素的高度，而没有明确设置高度，这是一个非常不灵活的方法 - 它只有当你能保证你的内容将是一定的高度才有效。
    
 
-
    Flexbox 网格?
    
+
    Flexbox 网格？
    
 
-
    如果你阅读我们以前关于flexbox的文章，可能会认为flexbox是创建网格系统的理想解决方案。目前有一些基于flexbox的网格系统可用，flexbox可以解决我们在创建上面的网格时已经发现的许多问题。
    
+
    如果你阅读我们以前关于flexbox 的文章，可能会认为 flexbox 是创建网格系统的理想解决方案。目前有一些基于 flexbox 的网格系统可用，flexbox 可以解决我们在创建上面的网格时已经发现的许多问题。
    
 
-
    然而，flexbox从来没有被设计为网格系统，并且在作为一体时提出了一系列新的挑战。作为一个简单的例子，我们可以把我们上面使用同样的例子标记和使用以下CSS样式的wrapper，row和col类：
    
+
    然而，flexbox 从来没有被设计为网格系统，并且在作为一体时提出了一系列新的挑战。作为一个简单的例子，我们可以把我们上面使用同样的例子标记和使用以下 CSS 样式的 wrapper，row 和 col 类：
    
 
 
    body {
   width: 90%;
@@ -1046,44 +1046,44 @@ 
    Flexbox 网格?
    
 
 
    你可以在你自己的例子中尝试这些替换，或者看看我们的flexbox-grid.html示例代码（看它如何运行）。
    
 
-
    这里我们把每一行变成一个flex容器。使用基于flexbox的网格，我们仍然需要行，以便允许我们添加小于100％的元素。我们设置该容器display: flex。
    
+
    这里我们把每一行变成一个 flex 容器。使用基于 flexbox 的网格，我们仍然需要行，以便允许我们添加小于 100％的元素。我们设置该容器 display: flex。
    
 
-
    在.col我们将flex属性的第一个值（flex-grow）设置为1，项目可以增长，第二个值（flex-shrink）为1，所以项目可以收缩，第三个值（flex-basis）auto。由于我们的元素有一个width集合，auto将使用该宽度作为flex-basis值。
    
+
    在.col 我们将flex属性的第一个值（flex-grow）设置为 1，项目可以增长，第二个值（flex-shrink）为 1，所以项目可以收缩，第三个值（flex-basis）auto。由于我们的元素有一个width集合，auto 将使用该宽度作为 flex-basis 值。
    
 
-
    在顶端，我们在网格上获得十二个整洁的盒子，并且它们随着我们改变视口宽度而同样地增长和收缩。然而，在下一行，我们只有四个项目，这些也从60px基础增长和收缩。只有四个他们可以增长比上面的行中的项目多，结果是他们都占据第二行相同的宽度。
    
+
    在顶端，我们在网格上获得十二个整洁的盒子，并且它们随着我们改变视口宽度而同样地增长和收缩。然而，在下一行，我们只有四个项目，这些也从 60px 基础增长和收缩。只有四个他们可以增长比上面的行中的项目多，结果是他们都占据第二行相同的宽度。
    
 
 
    
 
-
    为了解决这个问题，我们仍然需要包含我们的span类来提供一个宽度来替换flex-basis那个元素所使用的值。
    
+
    为了解决这个问题，我们仍然需要包含我们的 span 类来提供一个宽度来替换 flex-basis 那个元素所使用的值。
    
 
 
    他们也不尊重上面的网格，因为他们不知道如何使用它。
    
 
-
    Flexbox是一维设计。它处理单个维度，即行或列。不能为列和行创建严格的网格，这意味着如果我们要为网格使用flexbox，我们仍然需要为浮动布局计算百分比。
    
+
    Flexbox是一维设计。它处理单个维度，即行或列。不能为列和行创建严格的网格，这意味着如果我们要为网格使用 flexbox，我们仍然需要为浮动布局计算百分比。
    
 
-
    在您的项目中，您可能仍然选择使用flexbox'grid'，因为flexbox提供的额外对齐和空间分布能力超过浮动。但是，您应该知道，您仍在使用工具，而不是它的设计目的。所以你可能会觉得它让你跳过额外的箍，得到你想要的最终结果。
    
+
    在您的项目中，您可能仍然选择使用 flexbox'grid'，因为 flexbox 提供的额外对齐和空间分布能力超过浮动。但是，您应该知道，您仍在使用工具，而不是它的设计目的。所以你可能会觉得它让你跳过额外的箍，得到你想要的最终结果。
    
 
 
    第三方网格系统
    
 
-
    现在我们了解了我们的网格计算背后的数学，我们是一个很好的地方看看一些第三方网格系统的共同使用。如果你在网上搜索“CSS Grid框架”，你会发现一个巨大的选项列表可供选择。流行的框架如Bootstrap和Foundation包括一个网格系统。还有独立的网格系统，使用CSS或使用预处理器开发。
    
+
    现在我们了解了我们的网格计算背后的数学，我们是一个很好的地方看看一些第三方网格系统的共同使用。如果你在网上搜索“CSS Grid 框架”，你会发现一个巨大的选项列表可供选择。流行的框架如Bootstrap和Foundation包括一个网格系统。还有独立的网格系统，使用 CSS 或使用预处理器开发。
    
 
-
    让我们来看看这些独立系统之一，因为它演示了使用网格框架的常见技术。我们将使用的网格是Skeleton的一部分，一个简单的CSS框架。
    
+
    让我们来看看这些独立系统之一，因为它演示了使用网格框架的常见技术。我们将使用的网格是 Skeleton 的一部分，一个简单的 CSS 框架。
    
 
-
    开始访问Skeleton网站，并选择“下载”以下载ZIP文件，解压缩此文件并将skeleton.css和normalize.css文件复制到一个新目录中。
    
+
    开始访问Skeleton 网站，并选择“下载”以下载 ZIP 文件，解压缩此文件并将 skeleton.css 和 normalize.css 文件复制到一个新目录中。
    
 
-
    制作我们的html-skeleton.html文件副本，并将其保存在与骨架相同的目录中，并规范化CSS。
    
+
    制作我们的html-skeleton.html文件副本，并将其保存在与骨架相同的目录中，并规范化 CSS。
    
 
-
    在HTML页面中包含骨架并规范化CSS，方法是在其头部添加以下内容：
    
+
    在 HTML 页面中包含骨架并规范化 CSS，方法是在其头部添加以下内容：
    
 
 
    <link href="normalize.css" rel="stylesheet">
 <link href="skeleton.css" rel="stylesheet">
    
 
-
    Skeleton不仅仅包括一个网格系统 - 它还包含用于排版的CSS和其他可以用作起点的页面元素。我们现在将这些默认值，但是 - 这是我们真正感兴趣的网格在这里。
    
+
    Skeleton 不仅仅包括一个网格系统 - 它还包含用于排版的 CSS 和其他可以用作起点的页面元素。我们现在将这些默认值，但是 - 这是我们真正感兴趣的网格在这里。
    
 
 
    
-
    注意：Normalize是由Nicolas Gallagher编写的一个非常有用的小型CSS库，它自动执行一些有用的基本布局修复，并使默认元素样式在不同浏览器之间更一致。
    
+
    注意：Normalize 是由 Nicolas Gallagher 编写的一个非常有用的小型 CSS 库，它自动执行一些有用的基本布局修复，并使默认元素样式在不同浏览器之间更一致。
    
 
    
 
-
    我们将使用类似的HTML到我们前面的例子。在您的HTML内文中添加以下内容：
    
+
    我们将使用类似的 HTML 到我们前面的例子。在您的 HTML 内文中添加以下内容：
    
 
 
    <div class="container">
   <div class="row">
@@ -1108,9 +1108,9 @@ 
    第三方网格系统
    
   </div>
 </div>
    
 
-
    要开始使用Skeleton，我们需要给包装器<div>一个类container- 这已经包括在我们的HTML中。这将以960像素的最大宽度为中心。你可以看到盒子现在从不变得宽于960像素。
    
+
    要开始使用 Skeleton，我们需要给包装器<div>一个类 container- 这已经包括在我们的 HTML 中。这将以 960 像素的最大宽度为中心。你可以看到盒子现在从不变得宽于 960 像素。
    
 
-
    你可以看一下skeleton.css文件，看看我们应用这个类时使用的CSS。在<div>使用居中auto左，右页边距，以及20像素的填充应用于左侧和右侧。Skeleton也设置box-sizing属性border-box像我们以前做的，所以此元素的填充和边框将包括在总宽度。
    
+
    你可以看一下 skeleton.css 文件，看看我们应用这个类时使用的 CSS。在<div>使用居中 auto 左，右页边距，以及 20 像素的填充应用于左侧和右侧。Skeleton 也设置box-sizing属性 border-box 像我们以前做的，所以此元素的填充和边框将包括在总宽度。
    
 
 
    .container {
   position: relative;
@@ -1121,9 +1121,9 @@ 
    第三方网格系统
    
   box-sizing: border-box;
 }
    
 
-
    元素只能是网格的一部分（如果它们在一行内），因此与前面的示例一样，我们需要一个额外的<div>或其他元素，其中一个类row嵌套在content <div>实际的内容容器之间<div>。我们已经做到了这一点。
    
+
    元素只能是网格的一部分（如果它们在一行内），因此与前面的示例一样，我们需要一个额外的<div>或其他元素，其中一个类 row 嵌套在 content <div>实际的内容容器之间<div>。我们已经做到了这一点。
    
 
-
    现在让我们布置集装箱。骨架基于12列网格。顶行框都需要类，one column以使它们跨越一列。
    
+
    现在让我们布置集装箱。骨架基于 12 列网格。顶行框都需要类，one column 以使它们跨越一列。
    
 
 
    现在添加这些，如下面的代码段所示：
    
 
@@ -1145,29 +1145,29 @@ 
    第三方网格系统
    
   <div class="col two columns">16</div>
 </div>
    
 
-
    尝试保存HTML文件并将其加载到浏览器中以查看效果。
    
+
    尝试保存 HTML 文件并将其加载到浏览器中以查看效果。
    
 
 
    
 
    注意：如果您无法使此示例工作，请尝试将其与我们的html-skeleton-finished.html文件进行比较（见在线运行）。
    
 
    
 
-
    如果你看看skeleton.css文件，你可以看到这是如何工作的。例如，Skeleton对下面定义的样式元素添加了“三列”类。
    
+
    如果你看看 skeleton.css 文件，你可以看到这是如何工作的。例如，Skeleton 对下面定义的样式元素添加了“三列”类。
    
 
 
    .three.columns { width: 22%; }
    
 
-
    所有的Skeleton（或任何其他网格框架）正在设置预定义的类，您可以通过将它们添加到您的标记使用。这和你自己计算这些百分比的工作完全一样。
    
+
    所有的 Skeleton（或任何其他网格框架）正在设置预定义的类，您可以通过将它们添加到您的标记使用。这和你自己计算这些百分比的工作完全一样。
    
 
-
    正如你所看到的，当使用Skeleton时，我们需要写很少的CSS。它处理所有的浮动我们当我们添加类到我们的标记。正是这种将布局的责任转移到其他使网格系统的框架成为一个引人注目的选择的能力！
    
+
    正如你所看到的，当使用 Skeleton 时，我们需要写很少的 CSS。它处理所有的浮动我们当我们添加类到我们的标记。正是这种将布局的责任转移到其他使网格系统的框架成为一个引人注目的选择的能力！
    
 
-
    骨架是比你可能遇到的一些框架更简单的网格系统。大型框架（如Bootstrap和Foundation）中的网格为各种屏幕宽度提供了更多的功能和额外的断点。但是，它们都以类似的方式工作 - 通过向您的标记添加特定类，您可以使用预定义网格控制元素的布局。
    
+
    骨架是比你可能遇到的一些框架更简单的网格系统。大型框架（如 Bootstrap 和 Foundation）中的网格为各种屏幕宽度提供了更多的功能和额外的断点。但是，它们都以类似的方式工作 - 通过向您的标记添加特定类，您可以使用预定义网格控制元素的布局。
    
 
-
    本地CSS网格与网格布局
    
+
    本地 CSS 网格与网格布局
    
 
-
    我们在本文一开始所说的，CSS的之前没有过一个真正的体系，用于创建网格布局。但这已经改变了。大部分常用的浏览器的最新版本已经提供了对新CSS的网格布局模块的支持。
    
+
    我们在本文一开始所说的，CSS 的之前没有过一个真正的体系，用于创建网格布局。但这已经改变了。大部分常用的浏览器的最新版本已经提供了对新CSS 的网格布局模块的支持。
    
 
-
    我们看过上面的Skeleton Grid框架 - 像其他第三方网格，甚至是手工构建的网格，它需要你添加<div>s形成行，然后指定这些行中的项目将跨越的列数。
    
+
    我们看过上面的 Skeleton Grid 框架 - 像其他第三方网格，甚至是手工构建的网格，它需要你添加<div>s 形成行，然后指定这些行中的项目将跨越的列数。
    
 
-
    使用CSS网格布局，您可以完全在CSS中指定网格，而不需要将这些帮助类添加到标记。让我们看看我们的简单示例，看看我们将如何使用CSS Grid Layout创建相同的布局。
    
+
    使用 CSS 网格布局，您可以完全在 CSS 中指定网格，而不需要将这些帮助类添加到标记。让我们看看我们的简单示例，看看我们将如何使用 CSS Grid Layout 创建相同的布局。
    
 
 
    构建本地网格
    
 
@@ -1209,31 +1209,31 @@ 
    构建本地网格
    
   background: rgb(255,150,150);
 }
    
 
-
    这里我们设置.wrapper规则，因此它是90％的身体宽度，居中，并且 max-width 为 960px。
    
+
    这里我们设置.wrapper 规则，因此它是 90％的身体宽度，居中，并且 max-width 为 960px。
    
 
-
    现在为CSS网格属性。我们可以使用{{cssxref("display")}} 属性的 grid 值声明一个网格，使用 {{cssxref("grid-gap")}} 设置网格的间隔，然后使用{{cssxref("grid-template-columns")}} 属性、 repeat() 函数和 fr 单位——这个为网格布局定义的单位——创建一个12列等宽的网格。
    
+
    现在为 CSS 网格属性。我们可以使用{{cssxref("display")}} 属性的 grid 值声明一个网格，使用 {{cssxref("grid-gap")}} 设置网格的间隔，然后使用{{cssxref("grid-template-columns")}} 属性、 repeat() 函数和 fr 单位——这个为网格布局定义的单位——创建一个 12 列等宽的网格。
    
 
-
    该fr单元是一小部分单元-它描述在网格容器的可用空间的一小部分。如果所有列都是1fr，它们将占用相等的空间量。这消除了计算百分比以创建灵活网格的需要。
    
+
    该 fr 单元是一小部分单元 - 它描述在网格容器的可用空间的一小部分。如果所有列都是 1fr，它们将占用相等的空间量。这消除了计算百分比以创建灵活网格的需要。
    
 
 
    创建网格后，网格自动布局规则将立即在这个网格上布置我们的框，我们得到一个十二列灵活的网格布局。
    
 
 
    
 
-
    要对跨越网格上的多个列轨道的容器进行样式化，我们可以使用该grid-column属性。跨6列例如：
    
+
    要对跨越网格上的多个列轨道的容器进行样式化，我们可以使用该grid-column属性。跨 6 列例如：
    
 
 
    .span6 {
   grid-column: auto / span 6;
 }
    
 
-
    跨越3：
    
+
    跨越 3：
    
 
 
    .span3 {
   grid-column: auto / span 3;
 }
    
 
-
    正斜杠之前的值是开始列——在这种情况下，我们没有明确设置，允许浏览器放在下一个可用的列。然后我们可以设置它跨越6，3或我们想要的许多列。
    
+
    正斜杠之前的值是开始列——在这种情况下，我们没有明确设置，允许浏览器放在下一个可用的列。然后我们可以设置它跨越 6，3 或我们想要的许多列。
    
 
-
    在CSS的底部添加以下内容：
    
+
    在 CSS 的底部添加以下内容：
    
 
 
    .span2 { grid-column: auto / span 2;}
 .span3 { grid-column: auto / span 3;}
@@ -1249,16 +1249,16 @@ 
    构建本地网格
    
 
 
    OK！尝试保存和刷新，你会看到容器适当地跨多个列。
    
 
-
    CSS网格是二维的，因此随着布局的增长和缩小，元素保持水平和垂直排列。
    
+
    CSS 网格是二维的，因此随着布局的增长和缩小，元素保持水平和垂直排列。
    
 
-
    您可以通过将以下内容替换最后的4个字符串来进行测试<div>：
    
+
    您可以通过将以下内容替换最后的 4 个字符串来进行测试<div>：
    
 
 
    <div class="col">13some<br>content</div>
 <div class="col span6">14this<br>is<br>more<br>content</div>
 <div class="col span3">15this<br>is<br>less</div>
 <div class="col span2">16</div>
    
 
-
    这里我们有意添加了一些行break（<br>）标签，以强制某些列变得比其他列高。如果你尝试保存和刷新，你会看到列的高度调整为与最高的容器一样高，所以一切都保持整洁。
    
+
    这里我们有意添加了一些行 break（<br>）标签，以强制某些列变得比其他列高。如果你尝试保存和刷新，你会看到列的高度调整为与最高的容器一样高，所以一切都保持整洁。
    
 
 
    最终的布局如下：
    
 
@@ -1268,9 +1268,9 @@ 
    构建本地网格
    
 
    注意：如果您无法使此示例工作，您可以检查您的代码与我们的完成版本（也可以看在线运行）。
    
 
    
 
-
    一些不错的CSS网格特性
    
+
    一些不错的 CSS 网格特性
    
 
-
    对于CSS网格，我们不需要通过边距来抵消它们。尝试在您的CSS中进行这些更改：
    
+
    对于 CSS 网格，我们不需要通过边距来抵消它们。尝试在您的 CSS 中进行这些更改：
    
 
 
    .content {
   grid-column: 2 / 8;
@@ -1278,7 +1278,7 @@ 
    一些不错的CSS网格特性
    
 
 
    <div class="col span2 content">16</div>
    
 
-
    容器16，现在将下一个可用的行上跨越第2列到第8列。
    
+
    容器 16，现在将下一个可用的行上跨越第 2 列到第 8 列。
    
 
 
    我们可以像跨越列一样轻松地跨越多行：
    
 
@@ -1287,19 +1287,19 @@ 
    一些不错的CSS网格特性
    
   grid-row: 3 / 5;
 }
    
 
-
    现在将容器16，跨越行3至5以及列2至8。
    
+
    现在将容器 16，跨越行 3 至 5 以及列 2 至 8。
    
 
-
    不需要使用边距伪造沟槽或显式计算它们的宽度 — CSS网格具有这种功能内置的grid-gap 属性。
    
+
    不需要使用边距伪造沟槽或显式计算它们的宽度 — CSS 网格具有这种功能内置的grid-gap 属性。
    
 
-
    我们只是接触了CSS网格布局所有可能的皮毛，但在本文的行文中要理解的关键是，你不需要用网格创建一个网格系统——它已经是一个了。您可以编写CSS，将项目直接放入预定义的网格上。要了解更多，请看 CSS Grid Layout Module。
    
+
    我们只是接触了 CSS 网格布局所有可能的皮毛，但在本文的行文中要理解的关键是，你不需要用网格创建一个网格系统——它已经是一个了。您可以编写 CSS，将项目直接放入预定义的网格上。要了解更多，请看 CSS Grid Layout Module。
    
 
 
    主动学习：编写自己的简单网格
    
 
-
    在CSS布局aticle简介中，我们包括一个关于CSS表的部分，其中包括一个简单的形式示例（参见css-tables-example.html实例和源代码）。我们希望您复制此示例，并执行以下操作：
    
+
    在CSS 布局 aticle 简介中，我们包括一个关于CSS 表的部分，其中包括一个简单的形式示例（参见css-tables-example.html实例和源代码）。我们希望您复制此示例，并执行以下操作：
    
 
 
      
- 
    1. 删除 <div>元素 —  将会对你的内容处理行数和列。就不再需要此作为CSS网格。
      2. 
- 
    2. 使用CSS网格属性创建一个接近原始的表单布局，你必须设定容器元素的宽度，并思考怎么设置列的的间隙和行差距。
      3. 
+ 
    3. 删除 <div>元素 —  将会对你的内容处理行数和列。就不再需要此作为 CSS 网格。
      4. 
+ 
    4. 使用 CSS 网格属性创建一个接近原始的表单布局，你必须设定容器元素的宽度，并思考怎么设置列的的间隙和行差距。
      5. 
 
    
 
 
    
@@ -1308,7 +1308,7 @@ 
    主动学习：编写自己
 
 
    概要
    
 
-
    阅读这篇文章后，你应该已经了解了网格布局和网格框架如何在CSS中工作。你也已经窥探未来的CSS网格，现在应该明白，我们今天使用的网格框架本质上是一个临时的解决方案，直到我们有一个广泛支持的本地方式在CSS中实现这一点。
    
+
    阅读这篇文章后，你应该已经了解了网格布局和网格框架如何在 CSS 中工作。你也已经窥探未来的 CSS 网格，现在应该明白，我们今天使用的网格框架本质上是一个临时的解决方案，直到我们有一个广泛支持的本地方式在 CSS 中实现这一点。
    
 
 
    {{PreviousMenu("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
    
 
diff --git a/files/zh-cn/learn/css/css_layout/index.html b/files/zh-cn/learn/css/css_layout/index.html
index 0c1989bd7f0d04..f948e233a86193 100644
--- a/files/zh-cn/learn/css/css_layout/index.html
+++ b/files/zh-cn/learn/css/css_layout/index.html
@@ -21,15 +21,15 @@
 ---
 
    {{LearnSidebar}}
    
 
-
    此刻，我们已经看过CSS的基础知识，如何设置文本的样式，以及如何设置和操作内容所在的框。 现在是时候看看如何把你的盒子放在与视口相关的正确位置上。 我们已经涵盖了必要的先决条件，所以我们现在可以深入到CSS布局，查看不同的显示设置，涉及浮动和定位的传统布局方法，以及像flexbox这样的现代布局工具。
    
+
    此刻，我们已经看过 CSS 的基础知识，如何设置文本的样式，以及如何设置和操作内容所在的框。现在是时候看看如何把你的盒子放在与视口相关的正确位置上。我们已经涵盖了必要的先决条件，所以我们现在可以深入到 CSS 布局，查看不同的显示设置，涉及浮动和定位的传统布局方法，以及像 flexbox 这样的现代布局工具。
    
 
 
    前提条件：
    
 
-
    在开始前，你应该已经具备:
    
+
    在开始前，你应该已经具备：
    
 
 
      
- 
    1. 对HTML的基础了解，在Introduction to HTML部分讨论过的。
      2. 
- 
    2. 一定的CSS基础，在Introduction to CSS部分讨论过的。
      3. 
+ 
    3. 对 HTML 的基础了解，在Introduction to HTML部分讨论过的。
      4. 
+ 
    4. 一定的 CSS 基础，在Introduction to CSS部分讨论过的。
      5. 
  
    5. 了解如何样式化盒子模型.
      6. 
 
    
 
@@ -39,34 +39,34 @@ 
    前提条件：
    
 
 
    指南
    
 
-
    这些文章将提供在CSS中可用的基本布局工具和技术的指导。
    
+
    这些文章将提供在 CSS 中可用的基本布局工具和技术的指导。
    
 
 
    
  
    介绍 CSS 布局
    
- 
    本文将重述一些我们在之前的模块中已经涉及的CSS布局功能——例如不同的 {{cssxref("display")}} 值——并介绍我们将在本单元中涵盖的一些概念。
    
+ 
    本文将重述一些我们在之前的模块中已经涉及的 CSS 布局功能——例如不同的 {{cssxref("display")}} 值——并介绍我们将在本单元中涵盖的一些概念。
    
  
    正常布局流
    
  
    这篇文章介绍正常的流布局，或者说，在你没有改变默认布局规则情况下的页面元素布局方式。
    
  
    弹性盒
    
- 
    弹性盒 是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。 弹性盒子提供了工具，允许快速创建曾经被证明用CSS很难实现的一些复杂，灵活的布局和功能。 本文将解释所有的基本原理。
    
+ 
    弹性盒 是一种新技术，但在如今各个浏览器都广泛支持的情况下，它已经开始准备广泛应用了。弹性盒子提供了工具，允许快速创建曾经被证明用 CSS 很难实现的一些复杂，灵活的布局和功能。本文将解释所有的基本原理。
    
  
    网格
    
- 
    网格是一个成熟的设计工具，许多现代网站布局是基于规则网格。在本文中，我们将看看基于网格的设计，以及如何使用CSS来创建网格——两者都通过现在的工具，和刚刚开始在浏览器中可用的新技术。
    
+ 
    网格是一个成熟的设计工具，许多现代网站布局是基于规则网格。在本文中，我们将看看基于网格的设计，以及如何使用 CSS 来创建网格——两者都通过现在的工具，和刚刚开始在浏览器中可用的新技术。
    
  
    浮动
    
  
    最初对于文本块中的浮动图像，{{cssxref("float")}}属性已经成为在网页上创建多个列布局的最常用工具之一。本文解释所有。
    
  
    定位
    
  
    定位允许您从常规文档布局流程中取出元素，并使它们具有不同的行为，例如坐在另一个之上，或始终保持在浏览器视口内的同一位置。 本文解释不同的{{cssxref("position")}} 值，以及如何使用它们。
    
  
    多列布局
    
- 
    多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。 这篇文章介绍怎么使用这一特性。
    
+ 
    多列布局声明提供了一种多列组织内容的方式，正如你在一些报纸中看到的那样。这篇文章介绍怎么使用这一特性。
    
  
    响应式布局
    
- 
    随着越来越多的屏幕尺寸出现在支持Web的设备上，响应式Web设计（RWD）的概念出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。这一想法改变了我们为多设备Web设计的方式，在本文中，我们将帮助您了解掌握它所需的主要技术。
    
+ 
    随着越来越多的屏幕尺寸出现在支持 Web 的设备上，响应式 Web 设计（RWD）的概念出现了：一组允许网页改变其布局和外观以适应不同的屏幕宽度、分辨率等的实践。这一想法改变了我们为多设备 Web 设计的方式，在本文中，我们将帮助您了解掌握它所需的主要技术。
    
  
    媒体查询入门指南
    
- 
    媒体查询 提供了一种仅当浏览器和设备环境与您指定的规则匹配时才应用css的方法，例如“viewport（视区）宽度大于480像素”。媒体查询是响应式Web设计的一个关键部分，因为它们允许您根据视区的大小创建不同的布局，但也可以用于检测有关网站运行环境的其他内容，例如用户是否使用触摸屏而不是鼠标。在本节中，您将首先了解媒体查询中使用的语法，然后在一个演示如何使简单设计具有响应性的示例中继续使用它们。
    
+ 
    媒体查询 提供了一种仅当浏览器和设备环境与您指定的规则匹配时才应用 css 的方法，例如“viewport（视区）宽度大于 480 像素”。媒体查询是响应式 Web 设计的一个关键部分，因为它们允许您根据视区的大小创建不同的布局，但也可以用于检测有关网站运行环境的其他内容，例如用户是否使用触摸屏而不是鼠标。在本节中，您将首先了解媒体查询中使用的语法，然后在一个演示如何使简单设计具有响应性的示例中继续使用它们。
    
  
    传统布局方法
    
- 
    网格系统是css布局中使用的一个非常常见的特性，在css网格布局之前，它们往往使用浮动或其他布局特性来实现。您可以将布局想象为一组列（例如4、6或12），然后将网页内容放入这些列中。在本文中，我们将探讨这些旧方法是如何工作的，以便您了解在处理旧项目时如何使用它们。
    
+ 
    网格系统是 css 布局中使用的一个非常常见的特性，在 css 网格布局之前，它们往往使用浮动或其他布局特性来实现。您可以将布局想象为一组列（例如 4、6 或 12），然后将网页内容放入这些列中。在本文中，我们将探讨这些旧方法是如何工作的，以便您了解在处理旧项目时如何使用它们。
    
  
    支持旧浏览器
    
  
    
- 
    在本模块中，我们建议使用弹性盒和网格作为主要布局方法。但是，您的网站会遇到使用旧浏览器的访问者，或者不支持您使用的新布局方法的浏览器。在网络开发上一直有这种状况——那就是随着新特性的开发，不同的浏览器将优先支持不同的特性。本文解释了如何使用现代web技术而不将使用旧版本浏览器的用户拒之门外。
    
+ 
    在本模块中，我们建议使用弹性盒和网格作为主要布局方法。但是，您的网站会遇到使用旧浏览器的访问者，或者不支持您使用的新布局方法的浏览器。在网络开发上一直有这种状况——那就是随着新特性的开发，不同的浏览器将优先支持不同的特性。本文解释了如何使用现代 web 技术而不将使用旧版本浏览器的用户拒之门外。
    
  
    
- 
    测试: 基本布局掌握
    
+ 
    测试：基本布局掌握
    
  
    通过布置网页来测试你对不同布局方法的知识的掌握。
    
 
    
 
diff --git a/files/zh-cn/learn/css/css_layout/introduction/index.html b/files/zh-cn/learn/css/css_layout/introduction/index.html
index 4e865dcb0ef713..c1b343c62fdcd4 100644
--- a/files/zh-cn/learn/css/css_layout/introduction/index.html
+++ b/files/zh-cn/learn/css/css_layout/introduction/index.html
@@ -20,22 +20,22 @@
 
 
    {{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
    
 
-
    本文将回顾我们以前模块中已经介绍过的一些CSS布局特性——例如不同的{{cssxref("display")}}值——并介绍我们将在本模块中使用的一些概念。
    
+
    本文将回顾我们以前模块中已经介绍过的一些 CSS 布局特性——例如不同的{{cssxref("display")}}值——并介绍我们将在本模块中使用的一些概念。
    
 
 
    
  
   
    预备知识:HTML基础 (学习 HTML简介)，以及了解CSS如何工作的(学习 CSS简介 和 盒子样式。)预备知识：HTML 基础 (学习 HTML 简介)，以及了解 CSS 如何工作的 (学习 CSS 简介 和 盒子样式。)
   
    
   
    目标:目标：
    要了解网格布局系统背后的基本概念，以及如何在一个网页上实现一个网格布局。
   
    
      
 
 
 
 
 
 
 
 
 
 
    
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    前提条件:对HTML有一些基本的了解 (学习“HTML介绍”), 并且理解CSS的工作原理 (学习“CSS介绍”).前提条件：对 HTML 有一些基本的了解 (学习“HTML 介绍”), 并且理解 CSS 的工作原理 (学习“CSS 介绍”).
   
    
   
    目标:对CSS页面布局技术有一个总体的了解. 每种技术都能够在后面的教程中获取到更加详细的信息.目标：对 CSS 页面布局技术有一个总体的了解。每种技术都能够在后面的教程中获取到更加详细的信息。
   
    
      
 
    
 
-
    CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：
    
+
    CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节：
    
 
 
      
  
    • 正常布局流
      • 
@@ -50,9 +50,9 @@
 
 
      每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。
      
 
-
      正常布局流(Normal flow)
      
+
      正常布局流 (Normal flow)
      
 
-
      正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：
      
+
      正常布局流 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。让我们快速地看一个 HTML 的例子：
      
 
 
      <p>I love my cat.</p>
 
@@ -64,45 +64,45 @@ 
      正常布局流(Normal flow)
      
 
 <p>The end!</p>
      
 
-
      默认情况下，浏览器的显示如下:
      
+
      默认情况下，浏览器的显示如下：
      
 
 
      {{ EmbedLiveSample('Normal_flow', '100%', 200) }}
      
 
-
      注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。
      
+
      注意，HTML 元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。
      
 
 
      出现在另一个元素下面的元素被描述为块元素，与出现在另一个元素旁边的内联元素不同，内联元素就像段落中的单个单词一样。
      
 
 
      
-
      注意：块元素内容的布局方向被描述为块方向。块方向在英语等具有水平书写模式(writing mode)的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的内联方向是内联内容（如句子）的运行方向。
      
+
      注意：块元素内容的布局方向被描述为块方向。块方向在英语等具有水平书写模式(writing mode) 的语言中垂直运行。它可以在任何垂直书写模式的语言中水平运行。对应的内联方向是内联内容（如句子）的运行方向。
      
 
      
 
-
      当你使用css创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。
      
+
      当你使用 css 创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完全可以创建你所需要的布局。从一个结构良好的 Html 文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。
      
 
 
      下列布局技术会覆盖默认的布局行为：
      
 
 
        
- 
      •  {{cssxref("display")}} 属性 — 标准的value,比如block, inline 或者 inline-block 元素在正常布局流中的表现形式 (见 Types of CSS boxes). 接着是全新的布局方式，通过设置display的值, 比如 CSS Grid 和 Flexbox.
        • 
+ 
      •  {{cssxref("display")}} 属性 — 标准的 value，比如block, inline 或者 inline-block 元素在正常布局流中的表现形式 (见 Types of CSS boxes). 接着是全新的布局方式，通过设置display的值，比如 CSS Grid 和 Flexbox.
        • 
  
      • 浮动——应用 {{cssxref("float")}} 值，诸如 left 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。
        • 
  
      • {{cssxref("position")}} 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 static ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。
        • 
  
      • 表格布局— 表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用。
        • 
  
      • 多列布局— 这个 Multi-column layout 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。
        • 
 
      
 
-
      display属性
      
+
      display 属性
      
 
-
      在css中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为{{htmlelement("a")}}元素默认为display:inline。
      
+
      在 css 中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为{{htmlelement("a")}}元素默认为display:inline。
      
 
-
      您可以更改此默认显示行为。例如，{{htmlelement("li")}}元素默认为display:block，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为inline，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，您可以更改任何元素的display值，这意味着您可以根据它们的语义选择html元素，而不必关心它们的外观。他们的样子是你可以改变的。
      
+
      您可以更改此默认显示行为。例如，{{htmlelement("li")}}元素默认为display:block，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为inline，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，您可以更改任何元素的display值，这意味着您可以根据它们的语义选择 html 元素，而不必关心它们的外观。他们的样子是你可以改变的。
      
 
 
      除了可以通过将一些内容从block转换为inline（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以display值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是display:flex和display:grid。
      
 
-
      弹性盒子(Flexbox)
      
+
      弹性盒子 (Flexbox)
      
 
-
      Flexbox 是CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用flexbox，你只需要在想要进行flex布局的父元素上应用display: flex ，所有直接子元素都将会按照flex进行布局。我们来看一个例子。
      
+
      Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。我们来看一个例子。
      
 
-
      下面这些HTML标记描述了一个class为wrapper的容器元素，它的内部有三个<div>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。
      
+
      下面这些 HTML 标记描述了一个 class 为wrapper的容器元素，它的内部有三个<div>元素。它们在我们的英文文档当中，会默认地作为块元素从上到下进行显示。
      
 
-
      现在，当我们把display: flex添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了flex项(flex items)，按照flex容器（也就是它们的父元素）的一些flex相关的初值进行flex布局：它们整整齐齐排成一行，是因为父元素上flex-direction的初值是row。它们全都被拉伸至和最高的元素高度相同，是因为父元素上align-items属性的初值是stretch。这就意味着所有的子元素都会被拉伸到它们的flex容器的高度，在这个案例里就是所有flex项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。
      
+
      现在，当我们把display: flex添加到它的父元素时，这三个元素就自动按列进行排列。这是由于它们变成了flex 项 (flex items)，按照 flex 容器（也就是它们的父元素）的一些 flex 相关的初值进行 flex 布局：它们整整齐齐排成一行，是因为父元素上flex-direction的初值是row。它们全都被拉伸至和最高的元素高度相同，是因为父元素上align-items属性的初值是stretch。这就意味着所有的子元素都会被拉伸到它们的 flex 容器的高度，在这个案例里就是所有 flex 项中最高的一项。所有项目都从容器的开始位置进行排列，排列成一行后，在尾部留下一片空白。
      
 
 
      
 
    
@@ -247,9 +247,9 @@ 
    一个固定位置的列表
 
    注意：你可以点击蓝字预览完成后的效果，看看哪些部分是你在这篇文章里你要制作的。
    
 
 
-
    在开始的时候，你可以使用第一部分中完成的例子，或者从我们的Github仓库中拷贝 info-box.html 到本地。
    
+
    在开始的时候，你可以使用第一部分中完成的例子，或者从我们的 Github 仓库中拷贝 info-box.html 到本地。
    
 
-
    添加HTML 
    
+
    添加 HTML 
    
 
 
    首先，我们需要一些额外的内容在当前的主内容中。添加下列{{htmlelement("section")}} 在你的 {{htmlelement("body")}} 标签之中，放在在已存在的部分之中：
    
 
@@ -269,9 +269,9 @@ 
    添加HTML 
    
 
    注意：你可以随意更改假的内容，替换为你想要的真的内容。
    
 
 
-
    更改存在的CSS
    
+
    更改存在的 CSS
    
 
-
    接下来我们需要对之前的 CSS 进行一些小修改，让消息盒子放置和定位更好。删除margin: 0 auto （不需要居中显示），添加fixed定位；调整top 属性把它粘在浏览器的视域。
    
+
    接下来我们需要对之前的 CSS 进行一些小修改，让消息盒子放置和定位更好。删除 margin: 0 auto（不需要居中显示），添加 fixed 定位；调整 top 属性把它粘在浏览器的视域。
    
 
 
    它应该看起来像下面这样：
    
 
@@ -294,7 +294,7 @@ 
    对主内容样式设计
    
   margin-left: 470px;
 }
    
 
-
    开始我们给这个内容和消息盒子面板一样的背景颜色，颜色，内边距。然后给他一个大的margin-left使他移动到右边，为消息盒子在左边腾出位置，以便于各个部分不重叠。
    
+
    开始我们给这个内容和消息盒子面板一样的背景颜色，颜色，内边距。然后给他一个大的 margin-left 使他移动到右边，为消息盒子在左边腾出位置，以便于各个部分不重叠。
    
 
 
    这标志着第二个例子的结束；我们希望你能感到第三个例子，完全是因为兴趣。
    
 
@@ -310,7 +310,7 @@ 
    一个滑动隐藏的面板
    
 
    注意：你可以点击蓝字预览完成后的效果，仔细看看哪些部分是你在这篇文章里你要制作的。
    
 
 
-
    在一开始，老规矩在我们的Githib代码仓库拷贝hideen-info-panel-start.html(源码)。这个例子并没有用先前的例子，所以我们需要一个新的开始文件。让我们来仔细观察一下这个HTML文件：
    
+
    在一开始，老规矩在我们的 Githib 代码仓库拷贝hideen-info-panel-start.html(源码)。这个例子并没有用先前的例子，所以我们需要一个新的开始文件。让我们来仔细观察一下这个 HTML 文件：
    
 
 
    <label for="toggle">❔</label>
 <input type="checkbox" id="toggle">
@@ -320,19 +320,19 @@ 
    一个滑动隐藏的面板
    
 
 </aside>
    
 
-
    开始，我们看到了一个 {{htmlelement("label")}} 元素和 {{htmlelement("input")}} 元素——<label>元素普遍用来联系文字标签和表单，目的是能更好的理解表单（允许屏幕阅读器用户查看表单元素的描述）。这里通过for属性绑定id到了<input>标签的checkbox元素。
    
+
    开始，我们看到了一个 {{htmlelement("label")}} 元素和 {{htmlelement("input")}} 元素——<label>元素普遍用来联系文字标签和表单，目的是能更好的理解表单（允许屏幕阅读器用户查看表单元素的描述）。这里通过for属性绑定id到了<input>标签的 checkbox 元素。
    
 
 
    
-
    注意：我们已经设置了一个特殊的问题标记特性到我们的HTML中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。
    
+
    注意：我们已经设置了一个特殊的问题标记特性到我们的 HTML 中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。
    
 
    
 
-
    现在我们将这些元素用于稍微不同的目的——另一个 <label> 标签有用的副作用使你能通过点击checkbox的label标签来选择这个checkbox，就好像点击了这个checkbox自己一样。这就会实现有名的 checkbox hack 技术，可以提供无 JavaScript 的方法来通过按钮来控制一个元素。我们将通过其他两个元素控制 {{htmlelement("aside")}} 元素。（为了简洁起见，我们已将其内容从上述代码列表中删除）。
    
+
    现在我们将这些元素用于稍微不同的目的——另一个 <label> 标签有用的副作用使你能通过点击 checkbox 的 label 标签来选择这个 checkbox，就好像点击了这个 checkbox 自己一样。这就会实现有名的 checkbox hack 技术，可以提供无 JavaScript 的方法来通过按钮来控制一个元素。我们将通过其他两个元素控制 {{htmlelement("aside")}} 元素。（为了简洁起见，我们已将其内容从上述代码列表中删除）。
    
 
 
    在下面的部分我们将解释这一切如何运作。
    
 
 
    设置表单元素样式
    
 
-
    首先让我们处理表单元素 - 在 {{htmlelement("style")}} 标签之间添加以下CSS：
    
+
    首先让我们处理表单元素 - 在 {{htmlelement("style")}} 标签之间添加以下 CSS：
    
 
 
    label[for="toggle"] {
   font-size: 3rem;
@@ -353,15 +353,15 @@ 
    设置表单元素样式
    
 
      
  
    • 设置更大的 {{cssxref("font-size")}} 使图标更大更美观。
      • 
  
    • 设置 {{cssxref("position")}} 为 absolute，使用 {{cssxref("top")}} 属性和 {{cssxref("right")}} 属性来让他能很合适的位于右上角。
      • 
- 
    • 设置其 {{cssxref("z-index")}} 为1——因此当信息面板被赋予样式和显示的时候，不会覆盖我们的图标；相反图标依然会位于最上层能够再次被按下来隐藏信息平板。
      • 
+ 
    • 设置其 {{cssxref("z-index")}} 为 1——因此当信息面板被赋予样式和显示的时候，不会覆盖我们的图标；相反图标依然会位于最上层能够再次被按下来隐藏信息平板。
      • 
  
    • 使用 {{cssxref("cursor")}} 属性来改变鼠标的指针，当鼠标悬浮在图标上面的时候变成一个手形指针（就像你看到的当悬浮在链接上一样），作为一个额外的可视化线索告诉用户这个图标可以做一些有趣的事情。
      • 
 
    
 
-
    第二条规则是在实际的 <input> 元素的checkbox 上设置{{cssxref("position")}} 属性为 absolute，并从屏幕上方隐藏掉它，我们并不希望在我们的用户界面里看到它。
    
+
    第二条规则是在实际的 <input> 元素的 checkbox 上设置{{cssxref("position")}} 属性为 absolute，并从屏幕上方隐藏掉它，我们并不希望在我们的用户界面里看到它。
    
 
 
    设置面板的样式
    
 
-
    现在是时候为实际的滑动面板设计风格了。在你的css底部添加下列规则：
    
+
    现在是时候为实际的滑动面板设计风格了。在你的 css 底部添加下列规则：
    
 
 
    aside {
   background-color: #a60000;
@@ -385,24 +385,24 @@ 
    设置面板的样式
    
  
  • 然后，我们在面板上设置一个固定的 {{cssxref("width")}} ，让它的 {{cssxref("height")}} 充满整个浏览器窗口的视口。
    • 
  
  • 我们同样包括一些 {{cssxref("padding")}} 来组成我们想要的总的高度和宽度的值（如果我们没有设置 box-sizing: border-box; ，那就很有必要，正如这个例子）
    • 
  
  • 然后，我们在面板上设置 {{cssxref("position")}}: fixed;，即使页面的内容在滚动，也总是显示在同一个位置。我们设置 {{cssxref("top")}} 属性，使其粘在视口顶部，设置 {{cssxref("right")}} 属性使其默认情况下位于屏幕的右边。
    • 
- 
  • 最后我们在元素上设置 {{cssxref("transition")}} 属性，Transitions是一个有意思的特性，允许你在状态改变的时候平滑的过渡，而不是粗暴的“开”或“关”。在这个例子中我们尝试在checkbox被选中时让面板平滑的滚动。（或者换句话说，当问题标记图标被点击以后——记住，点击 <label> 标签也会选择相对应的checkbox！我们已经告诉你这是一种hack了）你也将会学到更多……
    • 
+ 
  • 最后我们在元素上设置 {{cssxref("transition")}} 属性，Transitions 是一个有意思的特性，允许你在状态改变的时候平滑的过渡，而不是粗暴的“开”或“关”。在这个例子中我们尝试在 checkbox 被选中时让面板平滑的滚动。（或者换句话说，当问题标记图标被点击以后——记住，点击 <label> 标签也会选择相对应的 checkbox！我们已经告诉你这是一种 hack 了）你也将会学到更多……
    • 
 
 
 
    设置选择后的状态
    
 
-
    这是最后要添加的一点 CSS ——把这些放到你的 CSS 底部:
    
+
    这是最后要添加的一点 CSS ——把这些放到你的 CSS 底部：
    
 
 
    input[type=checkbox]:checked + aside {
   right: 0px;
 }
    
 
-
    这里的选择器是复杂的——我们选择与 <input> 元素邻接的 <aside> 元素，但是仅仅在它被选择时（请注意使用 {{cssxref(":checked")}} 伪类来实现此目的），在这种情况下，我们将 <aside> 的 {{cssxref("right")}} 属性设置为0px，会造成面板再次出现在屏幕上（由于过渡属性会平滑的出现）。再一次点击这个标签会取消选中checkbox，面板将会跟着再一次消失。
    
+
    这里的选择器是复杂的——我们选择与 <input> 元素邻接的 <aside> 元素，但是仅仅在它被选择时（请注意使用 {{cssxref(":checked")}} 伪类来实现此目的），在这种情况下，我们将 <aside> 的 {{cssxref("right")}} 属性设置为 0px，会造成面板再次出现在屏幕上（由于过渡属性会平滑的出现）。再一次点击这个标签会取消选中 checkbox，面板将会跟着再一次消失。
    
 
-
    所以你有 ——一个相当巧妙的避免使用JavaScript来创建一个切换按钮效果方式。 这将在IE9及以上版本中起作用（平滑过渡将在IE10及更高版本中起作用）。这种效果确实有一些问题 ——这是有点滥用表单元素（它们不是为了这个目的），并且在可访问性方面效果不是很好——标签在默认情况下不可聚焦，并且表单元素的非语义使用可能会导致屏幕朗读器出现问题。 JavaScript和链接或按钮可能更合适，但这样的实验仍然很有趣。
    
+
    所以你有 ——一个相当巧妙的避免使用 JavaScript 来创建一个切换按钮效果方式。这将在 IE9 及以上版本中起作用（平滑过渡将在 IE10 及更高版本中起作用）。这种效果确实有一些问题 ——这是有点滥用表单元素（它们不是为了这个目的），并且在可访问性方面效果不是很好——标签在默认情况下不可聚焦，并且表单元素的非语义使用可能会导致屏幕朗读器出现问题。JavaScript 和链接或按钮可能更合适，但这样的实验仍然很有趣。
    
 
 
    总结
    
 
-
    这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向Flexbox。
    
+
    这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向 Flexbox。
    
 
 
    {{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
    
 
diff --git a/files/zh-cn/learn/css/css_layout/responsive_design/index.html b/files/zh-cn/learn/css/css_layout/responsive_design/index.html
index 50f16d2923ccaa..dc0d4e2fa35564 100644
--- a/files/zh-cn/learn/css/css_layout/responsive_design/index.html
+++ b/files/zh-cn/learn/css/css_layout/responsive_design/index.html
@@ -5,13 +5,13 @@
 ---
 
    {{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
    
 
-
    早年设计Web时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD指的是允许Web页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想，在这篇文章里，我们将会帮你理解掌握它时所需知道的主要技能。
    
+
    早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想，在这篇文章里，我们将会帮你理解掌握它时所需知道的主要技能。
    
 
 
-   
+   
@@ -53,35 +53,35 @@ 
    历史上的网站布局
    备注：上面的截屏是在火狐开发者工具的响应式设计模式中截取的。
    
 
-
    随着移动Web在早期的功能手机上开始成为现实，希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像m.example.com或者example.mobi这类）。这意味着一个网站需要开发两个分开的版本，而且要保持时效性。
    
+
    随着移动 Web 在早期的功能手机上开始成为现实，希望拥抱移动端的公司普遍希望为他们的网站创建一个有着不同的网址的移动版本（大多是像m.example.com或者example.mobi这类）。这意味着一个网站需要开发两个分开的版本，而且要保持时效性。
    除此以外，这些移动网站的体验经常缩水。由于移动设备变得更加强大，足以显示完整的网站，对于那些被困在移动版网站的移动端用户来说，这是很折磨人的，他们因此也没法获取他们知道在支持所有功能的桌面版网站上能找到的信息。
    响应式设计之前的灵活布局
    
 
-
    人们开发了许多方式，尽力解决建设网站时使用液态和固定宽度的方式所带来的弊端。2004年，Cameron Adams写了一篇题为《Resolution dependent layout》的帖子，描述了一种可以创造适应多种屏幕分辨率的设计的方式。这种方式需要JavaScript来探测屏幕的分辨率，载入恰当的CSS。
    
+
    人们开发了许多方式，尽力解决建设网站时使用液态和固定宽度的方式所带来的弊端。2004 年，Cameron Adams 写了一篇题为《Resolution dependent layout》的帖子，描述了一种可以创造适应多种屏幕分辨率的设计的方式。这种方式需要 JavaScript 来探测屏幕的分辨率，载入恰当的 CSS。
    
 
-
    Zoe Mickley Gillenwater深刻影响了她的著作，在里面描述并标准化了可变站点建立的不同方式，试图在充满屏幕和完全保持固定尺寸之间找到最佳平衡。
    
+
    Zoe Mickley Gillenwater 深刻影响了她的著作，在里面描述并标准化了可变站点建立的不同方式，试图在充满屏幕和完全保持固定尺寸之间找到最佳平衡。
    响应式设计
    
 
-
    “响应式设计”这个词是Ethan Marcotte在2010年首度提出的，他将其描述为三种技术的混合使用。
    
+
    “响应式设计”这个词是Ethan Marcotte 在 2010 年首度提出的，他将其描述为三种技术的混合使用。
      
- 
    1. 第一个是液态网格，这早先已由Gillenwater进行探讨，可以在Marcotte的文章《Fluid Grids》（出版于2009年的《A List Apart》上）中读到。
      2. 
+ 
    2. 第一个是液态网格，这早先已由 Gillenwater 进行探讨，可以在 Marcotte 的文章《Fluid Grids》（出版于 2009 年的《A List Apart》上）中读到。
      3. 
  
    3. 第二个是液态图像的理念。通过使用相当简单的将设置max-width属性设置为100%的技术，图像可以在包含它们的列变得比图像原始尺寸窄的时候，缩放得更小，但总不会变得更大。这使得图像可以被缩放，以被放到一个灵活尺寸的列，而不是溢出出去，同时也不会在列宽于图像的时候，使图像变得太大以至于画质变得粗糙。
      4. 
- 
    4. 第三个关键的组件是媒体查询。媒体查询使以往Cameron Adams探讨过的、由JavaScript实现的布局类型切换，可以只使用CSS实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。
      5. 
+ 
    5. 第三个关键的组件是媒体查询。媒体查询使以往 Cameron Adams 探讨过的、由 JavaScript 实现的布局类型切换，可以只使用 CSS 实现。和所有尺寸的屏幕都使用一种布局不同的是，布局是可以改变的：侧栏可以在小屏幕上重新布局，而替代用的导航栏也可以显示出来。
      6. 
 
    
 
-
    需要你理解的很重要的一点是响应式Web设计不是单独的技术，它是描述Web设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。在Marcotte's原来的探索中，这意味着灵活网格（使用float）和媒体查询，但是在这篇文章写就的几乎十年以后，Web的响应式工作已经成为了默认做法。现代的CSS布局方式基本上就是响应式的，而且我们在Web平台上内置了新的东西，使得设计响应式站点变得容易。
    
+
    需要你理解的很重要的一点是响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。在 Marcotte's 原来的探索中，这意味着灵活网格（使用 float）和媒体查询，但是在这篇文章写就的几乎十年以后，Web 的响应式工作已经成为了默认做法。现代的 CSS 布局方式基本上就是响应式的，而且我们在 Web 平台上内置了新的东西，使得设计响应式站点变得容易。
    
 
-
    这篇文章的余下部分会为你指出，在建立响应式站点的时候，你可能会用到的各式Web平台的特色功能。
    
+
    这篇文章的余下部分会为你指出，在建立响应式站点的时候，你可能会用到的各式 Web 平台的特色功能。
    媒介查询
    
 
-
    响应式设计仅仅是因为媒介查询才新兴起来的。媒介查询第三级规范已经在2009年成为了候选推荐，这意味着它可视为准备好在浏览器中开始支持了。媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将CSS选择性地适应用户的需要应用在样式化页面上。
    
+
    响应式设计仅仅是因为媒介查询才新兴起来的。媒介查询第三级规范已经在 2009 年成为了候选推荐，这意味着它可视为准备好在浏览器中开始支持了。媒介查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。
    
 
-
    例如，下面的媒体查询进行测试，以知晓当前的Web页面是否被展示为屏幕媒体（也就是说不是印刷文档），且视口至少有800像素宽。用于.container选择器的CSS将只会在这两件前提存在的情况下应用。
    
+
    例如，下面的媒体查询进行测试，以知晓当前的 Web 页面是否被展示为屏幕媒体（也就是说不是印刷文档），且视口至少有 800 像素宽。用于.container选择器的 CSS 将只会在这两件前提存在的情况下应用。
    @media screen and (min-width: 800px) {
   .container {
@@ -92,9 +92,9 @@ 
    媒介查询
    
 
 
    你可以在一张样式表上加入多条媒体查询，调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果。媒体查询，以及样式改变时的点，被叫做断点（breakpoints）。
    
 
-
    使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局 。这经常被描述为移动优先设计。
    
+
    使用媒体查询时的一种通用方式是，为窄屏设备（例如移动设备）创建一个简单的单栏布局，然后检查是否是大些的屏幕，在你知道你有足够容纳的屏幕宽度的时候，开始采用一种多栏的布局。这经常被描述为移动优先设计。
    
 
-
    在MDN文档中的媒体查询中了解更多
    
+
    在 MDN 文档中的媒体查询中了解更多
    
 
 
    灵活网格
    
 
@@ -102,19 +102,19 @@ 
    灵活网格
    
 
 
    使用灵活网格，你只需要加进去一个断点，在内容看起来不齐整的时候改变设计。例如如果一行随着屏幕大小增加而增长得不可读的长，或者是一个盒子在变窄时把每行的两个单词挤到一起。
    
 
-
    早年间进行响应式设计的时候，我们唯一的实现布局的选项是使用float。灵活浮动布局是这样实现的，让每个元素都有一个作为宽度的百分数，而且确保整个布局的和不会超过100%。在他对于液态网格文章的原文中，Marcotte详细描述了一种布局的法则，通过使用像素并把布局转化为百分数的方式设计。
    
+
    早年间进行响应式设计的时候，我们唯一的实现布局的选项是使用float。灵活浮动布局是这样实现的，让每个元素都有一个作为宽度的百分数，而且确保整个布局的和不会超过 100%。在他对于液态网格文章的原文中，Marcotte 详细描述了一种布局的法则，通过使用像素并把布局转化为百分数的方式设计。
    
 
 
    target / context = result 
 
    
 
-
    例如如果我们的预期栏尺寸为60像素，而且它所在的上下文（或者容器）为960像素，我们在将零点二的空间移动到右边以后，用960去除60，得到我们能够使用在我们的CSS上的值。
    
+
    例如如果我们的预期栏尺寸为 60 像素，而且它所在的上下文（或者容器）为 960 像素，我们在将零点二的空间移动到右边以后，用 960 去除 60，得到我们能够使用在我们的 CSS 上的值。
    
 
 
    .col {
   width: 6.25%; /* 60 / 960 = 0.0625 */
 } 
 
    
 
-
    这种方式将会在今天整个Web上的许多地方上看到，而且它被我们的Legacy layout methods一文中的布局一节中记载。可能你将会在工作中遇到使用这种方式的站点，所以有必要理解它，即使是在你不用建立一个使用浮动基础的灵活网格的情况下。
    
+
    这种方式将会在今天整个 Web 上的许多地方上看到，而且它被我们的Legacy layout methods一文中的布局一节中记载。可能你将会在工作中遇到使用这种方式的站点，所以有必要理解它，即使是在你不用建立一个使用浮动基础的灵活网格的情况下。
    
 
 
    下面的例子阐释了一个使用媒体查询和灵活网格的简单响应式设计。在窄屏幕上，布局将盒子堆叠在另一个的上面：
    
 
@@ -129,7 +129,7 @@ 
    灵活网格
    
 
 
 
    
-
    备注：你可以在GitHub上找到此示例的实时示例和源代码。
    
+
    备注：你可以在 GitHub 上找到此示例的实时示例和源代码。
    
 
    
 
 
    现代布局技术
    
@@ -171,9 +171,9 @@ 
    伸缩盒
    
 
    备注：作为一个示例，我们已经重构了上面的简单响应式布局，这次我们用了伸缩盒。你可以看看我们是怎么样才不再需要使用奇怪的百分数值来计算列的尺寸的：示例、源代码。
    
 
 
-
    CSS网格
    
+
    CSS 网格
    
 
-
    在CSS网格布局中，fr单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着3个大小为1fr的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。你可以在Flexible grids with the fr unit下的学习布局网格专题了解更多和这一方式相关的信息。
    
+
    在 CSS 网格布局中，fr单位许可了跨网格轨道可用空间的分布。下面的示例创建了一个有着 3 个大小为1fr的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。你可以在Flexible grids with the fr unit下的学习布局网格专题了解更多和这一方式相关的信息。
    
 
 
    .container {
   display: grid;
@@ -182,12 +182,12 @@ 
    CSS网格
    
 
    
 
 
    
-
    备注：网格布局版本的代码要更简单，因为我们可以在.wrapper上定义列：示例，源代码。
    
+
    备注：网格布局版本的代码要更简单，因为我们可以在.wrapper 上定义列：示例，源代码。
    
 
    
 
 
    响应式图像
    
 
-
    最简单的处理响应式图像的方式是在Marcotte的早年的关于响应式设计的文章上所描述的那样。基本来说，你可以用一张有着所需最大尺寸的图像。然后缩放它。这仍然是今日所使用的一种方式，而且在大多数样式表里面，你在某些地方可以找到下面的CSS：
    
+
    最简单的处理响应式图像的方式是在 Marcotte 的早年的关于响应式设计的文章上所描述的那样。基本来说，你可以用一张有着所需最大尺寸的图像。然后缩放它。这仍然是今日所使用的一种方式，而且在大多数样式表里面，你在某些地方可以找到下面的 CSS：
    
 
 
    img {
   max-width: 100%:
@@ -200,7 +200,7 @@ 
    响应式图像
    
 
 
    你也可以给用于不同尺寸的图像做“艺术指导”，为不同的屏幕尺寸提供不同的图像裁切或者完全不同的图像。
    
 
-
    你可以在MDN这里的学习HTML一节中找到详细的响应式图像指南。
    
+
    你可以在 MDN 这里的学习 HTML 一节中找到详细的响应式图像指南。
    
 
 
    响应式排版
    
 
@@ -251,7 +251,7 @@ 
    使用视口单位实现响应
   font-size: 6vw;
 }
    
 
-
    问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用viewport单位设定文本。
    
+
    问题在于，当做上面的事情的时候，因为文本总是随着视口的大小改变大小，用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。
    
 
 
    这里有一个解决方法，它使用了calc()，如果你将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的。基本来说，是vw加在了放缩后的值上。
    
 
@@ -267,25 +267,25 @@ 
    使用视口单位实现响应
 
 
    视口元标签
    
 
-
    如果你看看一张响应式页面的HTML源代码，你通常将会在文档的<head>看到下面的{{htmlelement("meta")}}标签。
    
+
    如果你看看一张响应式页面的 HTML 源代码，你通常将会在文档的<head>看到下面的{{htmlelement("meta")}}标签。
    
 
 
    <meta name="viewport" content="width=device-width,initial-scale=1">
 
    
 
-
    这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%，在移动端以你所希望的为移动优化的大小展示文档。
    
+
    这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的 100%，在移动端以你所希望的为移动优化的大小展示文档。
    
 
 
    为何需要这个？因为移动端浏览器倾向于在它们的视口宽度上说谎。
    
 
-
    这个元标签的存在，是由于原来iPhone发布以后，人们开始在小的手机屏幕上阅览网页，而大多数站点未对移动端做优化的缘故。移动端浏览器因此会把视口宽度设为960像素，并以这个宽度渲染页面，结果展示的是桌面布局的缩放版本。其他的移动端浏览器（例如谷歌安卓上的）也是这么做的。用户可以在站点中放大、移动，查看他们感兴趣的那部分，但是这看起来很不舒服。如果你不幸遇到了一个没有响应式设计的网站，今天你还会看到这种情况。
    
+
    这个元标签的存在，是由于原来 iPhone 发布以后，人们开始在小的手机屏幕上阅览网页，而大多数站点未对移动端做优化的缘故。移动端浏览器因此会把视口宽度设为 960 像素，并以这个宽度渲染页面，结果展示的是桌面布局的缩放版本。其他的移动端浏览器（例如谷歌安卓上的）也是这么做的。用户可以在站点中放大、移动，查看他们感兴趣的那部分，但是这看起来很不舒服。如果你不幸遇到了一个没有响应式设计的网站，今天你还会看到这种情况。
    
 
-
    麻烦的是，你的带断点和媒介查询的响应式设计不会在移动端浏览器上像预期那样工作。如果你有个窄屏布局，在480像素及以下的视口宽度下生效，但是视口是按960像素设定的，你将不会在移动端看到你的窄屏布局。通过设定width=device-width，你用设备的实际宽度覆写了苹果默认的width=960px，然后你的媒介查询就会像预期那样生效。
    
+
    麻烦的是，你的带断点和媒介查询的响应式设计不会在移动端浏览器上像预期那样工作。如果你有个窄屏布局，在 480 像素及以下的视口宽度下生效，但是视口是按 960 像素设定的，你将不会在移动端看到你的窄屏布局。通过设定width=device-width，你用设备的实际宽度覆写了苹果默认的width=960px，然后你的媒介查询就会像预期那样生效。
    
 
-
    所以你应该在你的文档头部总是包含上面那行HTML。
    
+
    所以你应该在你的文档头部总是包含上面那行 HTML。
    
 
 
    和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。
    
 
 
      
- 
    • initial-scale：设定了页面的初始缩放，我们设定为1。
      • 
+ 
    • initial-scale：设定了页面的初始缩放，我们设定为 1。
      • 
  
    • height：特别为视口设定一个高度。
      • 
  
    • minimum-scale：设定最小缩放级别。
      • 
  
    • maximum-scale：设定最大缩放级别。
      • 
@@ -295,21 +295,21 @@ 
      视口元标签
      
 
      你应该避免使用minimum-scale、maximum-scale，尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。
      
 
 
      
-
      备注： 有一个CSS @规则是被设计用来替换掉视口元标签的——@viewport——但是浏览器对它的支持太差了。它是在IE和Edge中引入的，但自从Chromium内核的Edge发布以后，它就不再受到Edge浏览器支持了。
      
+
      备注： 有一个 CSS @规则是被设计用来替换掉视口元标签的——@viewport——但是浏览器对它的支持太差了。它是在 IE 和 Edge 中引入的，但自从 Chromium 内核的 Edge 发布以后，它就不再受到 Edge 浏览器支持了。
      
 
      
 
 
      小结
      
 
-
      响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多CSS和HTML的功能和技术，现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站，遇到一个缩放的桌面版网站，或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为Web已经迁移到了这种响应式设计的方式上。
      
+
      响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多 CSS 和 HTML 的功能和技术，现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站，遇到一个缩放的桌面版网站，或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为 Web 已经迁移到了这种响应式设计的方式上。
      
 
-
      在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解Web开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的CSS和HTML的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。
      
+
      在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解 Web 开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的 CSS 和 HTML 的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。
      
 
 
      {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
      
 
 
      模块目录
      
 
 
        
- 
      • 介绍CSS布局
        • 
+ 
      • 介绍 CSS 布局
        • 
  
      • 正常布局流
        • 
  
      • 弹性盒
        • 
  
      • 网格
        • 
diff --git a/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html b/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html
index 92b38a16fde307..ebd2c6c323bf5b 100644
--- a/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html
+++ b/files/zh-cn/learn/css/css_layout/supporting_older_browsers/index.html
@@ -7,13 +7,13 @@
 
 
        {{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}
        
 
-
        本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是Web上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的Web技术，而无需让采用旧技术的用户被拒之门外。
        
+
        本文中，我们推荐使用弹性盒和网格作为你的设计的主要布局方式。但是，你的网站的访客会有人使用旧浏览器，或者是不支持你已经使用的方式。这总是 Web 上存在的情况，因为新的特性被开发出来，不同的浏览器会优先支持不同的特性。本文解释了如何使用现代的 Web 技术，而无需让采用旧技术的用户被拒之门外。
        
 
 
    
  
   
    
    学习前提：HTML基础（学习Introduction to HTML），以及对CSS工作方式的理解（学习CSS first steps和CSS building blocks）HTML 基础（学习Introduction to HTML），以及对 CSS 工作方式的理解（学习CSS first steps和CSS building blocks）
   
    
   
    
    目标：
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    
-   
+   
@@ -26,15 +26,15 @@ 
    对于你的
 
 
    每个网站论目标用户都是不同的，在决定采用哪种方式之前，你需要查明使用旧浏览器浏览你的站点的用户的数量。如果你有一个已有的网站，你想要润色或者替换它，这是一件直截了当的事情，因为你很可能有了可用的、可以告诉你人们使用的技术的分析。如果你没有分析，或者这是一个全新的网站，那么例如Statcounter之类的站点可以提供以位置分类的数据。
    
 
-
    你应该同样考虑设备的类型和人们使用你的网站的方式。譬如，你可能更想有超出平均数量的移动设备的访问。可访问性和使用辅助性技术的人总应当被考虑，对于一些站点，这问题可能更加重要。以我的经验，开发者经常担心1%的使用旧版IE的用户的体验，而不去照顾多得多的有可访问性需求的用户。
    
+
    你应该同样考虑设备的类型和人们使用你的网站的方式。譬如，你可能更想有超出平均数量的移动设备的访问。可访问性和使用辅助性技术的人总应当被考虑，对于一些站点，这问题可能更加重要。以我的经验，开发者经常担心 1% 的使用旧版 IE 的用户的体验，而不去照顾多得多的有可访问性需求的用户。
    
 
 
    对你想使用的特性的支持如何？
    
 
-
    一旦你知道了会访问你的网站的浏览器，你就可以在任何你想使用的技术，与该技术受到的支持以及为不能使用该技术的访客提供一个替代方案的难易度之间做权衡。在MDN上，我们在尽力让这个流程变得容易——在每个详述CSS属性的页面上提供浏览器的兼容性信息。例如，看一下{{cssxref("grid-template-columns")}}页面。在这个页面底部有一个表格，列出了主流的浏览器，还有它们开始支持这个属性的版本。
    
+
    一旦你知道了会访问你的网站的浏览器，你就可以在任何你想使用的技术，与该技术受到的支持以及为不能使用该技术的访客提供一个替代方案的难易度之间做权衡。在 MDN 上，我们在尽力让这个流程变得容易——在每个详述 CSS 属性的页面上提供浏览器的兼容性信息。例如，看一下{{cssxref("grid-template-columns")}}页面。在这个页面底部有一个表格，列出了主流的浏览器，还有它们开始支持这个属性的版本。
    
 
 
    
 
-
    另一个流行的查明一个特性有多受到支持的方式是Can I Use网站。这个网站列出了主流的Web平台特性，附有它们的浏览器支持信息。你可以按位置查看使用数据——在你致力于一个用户大多数是世界上的某个区域的网站的时候会有用。你甚至可以链接你的Google Analytics账户，得到基于你的用户的信息。
    
+
    另一个流行的查明一个特性有多受到支持的方式是Can I Use网站。这个网站列出了主流的 Web 平台特性，附有它们的浏览器支持信息。你可以按位置查看使用数据——在你致力于一个用户大多数是世界上的某个区域的网站的时候会有用。你甚至可以链接你的 Google Analytics 账户，得到基于你的用户的信息。
    
 
 
    理解你的用户拥有的技术，以及支持你可能想要使用的东西，这样你就可以很好地作出你的所有决定，知道最多能多好地支持所有用户。
    
 
@@ -42,15 +42,15 @@ 
    支持不意味着“看起来
 
 
    一个网站可能不会在所有浏览器上看起来都一样，因为你的一些用户将会是在一部手机上，而另一些用户是在桌面大屏幕上浏览你的网站；类似地，你的一些用户会是使用旧版浏览器的，而另外一些是最新版；你的一些用户可能是在聆听由屏幕阅读器朗读的你的内容，或者已经放大了页面来读到内容。支持所有人意味着提供保守设计版本的你的内容，这样在现代浏览器上，它会看起来很棒，而对于旧浏览器用户而言仍然以最低限度可用。
    
 
-
    基本级别的支持来源于良好地组织你的内容，从而让你的页面的正常布局流有意义。一个使用非常局限的功能手机的用户可能不怎么会体验到你的CSS，但是内容会以让阅读容易的方式流过。因而你应该总是从一个良好组织的HTML文档开始。如果你移除掉你的样式表，你的内容还能被理解吗？
    
+
    基本级别的支持来源于良好地组织你的内容，从而让你的页面的正常布局流有意义。一个使用非常局限的功能手机的用户可能不怎么会体验到你的 CSS，但是内容会以让阅读容易的方式流过。因而你应该总是从一个良好组织的 HTML 文档开始。如果你移除掉你的样式表，你的内容还能被理解吗？
    
 
-
    一个选项是，把站点的这种原始视图作为回滚，用在使用很老旧或者受局限的浏览器的用户身上。如果你没有多少来到站点的人是使用这些浏览器的，将时间花在尝试给予他们和使用现代浏览器类似的体验上可能没有商业价值。将时间花在让站点具备更多可访问性的事情上，以服务远远更多的用户，可能会是更好的做法。这样的做法在纯HTML页面和花里胡哨之间是有余地的，CSS事实上让建立这些回滚变得简明。
    
+
    一个选项是，把站点的这种原始视图作为回滚，用在使用很老旧或者受局限的浏览器的用户身上。如果你没有多少来到站点的人是使用这些浏览器的，将时间花在尝试给予他们和使用现代浏览器类似的体验上可能没有商业价值。将时间花在让站点具备更多可访问性的事情上，以服务远远更多的用户，可能会是更好的做法。这样的做法在纯 HTML 页面和花里胡哨之间是有余地的，CSS 事实上让建立这些回滚变得简明。
    
 
-
    在CSS中构建回滚
    
+
    在 CSS 中构建回滚
    
 
-
    CSS规范包含了在一个物件上同时应用两种布局的时候，解释浏览器如何反应的信息。例如，规范定义如果一个浮动元素同时又是用CSS网格布局实现的网格元素（Grid Item）的时候会发生什么。结合浏览器会忽略掉它不会理解的CSS的特点组合起来，你就得到了使用我们已经提到的传统技术构建简单布局的方法，在可以理解你的网格布局的现代浏览器中，传统布局方法会被网格布局覆写掉。
    
+
    CSS 规范包含了在一个物件上同时应用两种布局的时候，解释浏览器如何反应的信息。例如，规范定义如果一个浮动元素同时又是用 CSS 网格布局实现的网格元素（Grid Item）的时候会发生什么。结合浏览器会忽略掉它不会理解的 CSS 的特点组合起来，你就得到了使用我们已经提到的传统技术构建简单布局的方法，在可以理解你的网格布局的现代浏览器中，传统布局方法会被网格布局覆写掉。
    
 
-
    在下面的示例中，我们已经浮动了三个<div>，所以它们显示在了一行中。任何使用不支持CSS网格布局的浏览器的人将会看到以浮动布局实现的一列盒子。一个成为了网格物件的浮动物件失去了浮动的动作，就是说通过把wrapper变成网格容器，浮动物件变成了网格物件。如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略display: grid相关的属性，使用浮动布局。
    
+
    在下面的示例中，我们已经浮动了三个<div>，所以它们显示在了一行中。任何使用不支持CSS 网格布局的浏览器的人将会看到以浮动布局实现的一列盒子。一个成为了网格物件的浮动物件失去了浮动的动作，就是说通过把 wrapper 变成网格容器，浮动物件变成了网格物件。如果浏览器器支持网格布局，它会显示网格视图，否则它会忽略display: grid相关的属性，使用浮动布局。
    
 
 
    
 
    * {box-sizing: border-box;}
@@ -93,18 +93,18 @@ 
    回滚方式
    
  
    浮动和清除
    
  
    如上所示，如果浮动和清除的物件变成了弹性或网格物件，浮动和清除属性不再影响布局。
    
  
    display: inline-block
    
- 
    这种方式能被用来建立列布局，如果一个物件被设为display: inline-block，但是之后变成了弹性或者网格物件，inline-block行为将会被忽略。
    
+ 
    这种方式能被用来建立列布局，如果一个物件被设为display: inline-block，但是之后变成了弹性或者网格物件，inline-block 行为将会被忽略。
    
  
    display: table
    
- 
    这种在这几节课的介绍中描述的建立CSS表格的方式可以被用作回滚。被设为CSS表格布局的物件将会在它们变为弹性或者网格物件的时候不再表现出这种行为。重要的是，被建立起来用于修复表格结构的匿名盒子没有被建立起来。
    
+ 
    这种在这几节课的介绍中描述的建立 CSS 表格的方式可以被用作回滚。被设为 CSS 表格布局的物件将会在它们变为弹性或者网格物件的时候不再表现出这种行为。重要的是，被建立起来用于修复表格结构的匿名盒子没有被建立起来。
    
  
    Multiple-column Layout
    
  
    对于某些布局，你能用multi-col作为回滚。如果你的容器有任何一个column-*属性被定义，之后变成了网格容器，那么多列行为不会实现。
    
  
    作为网格的回滚的弹性盒
    
- 
    弹性盒由于受到了IE10和IE11的支持，比网格有着更好的浏览器支持。不过，在这节课的稍后部分，你一定要看下旧浏览器对弹性盒相当参差不齐而且令人困惑的支持的相关信息。如果你把弹性容器做成了网格容器，任何应用到子元素的flex属性都会被忽略。
    
+ 
    弹性盒由于受到了 IE10 和 IE11 的支持，比网格有着更好的浏览器支持。不过，在这节课的稍后部分，你一定要看下旧浏览器对弹性盒相当参差不齐而且令人困惑的支持的相关信息。如果你把弹性容器做成了网格容器，任何应用到子元素的flex属性都会被忽略。
    
 
 
-
    对于许多在旧浏览器中微调的布局来说，你可能会发现你能用这种方式使用CSS，给访客亲切的体验。我们加入了一个更简单的基于旧的和受到良好支持技术的布局，然后用新一些的CSS建立一个可以由90%的用户看到的布局。但是存在这样的情况：回滚代码会需要包含新浏览器也能理解的东西；举例来说就是，我们要往我们的浮动物件中加入百分数宽度，从而让列看起来更像网格，拉伸以充满容器。
    
+
    对于许多在旧浏览器中微调的布局来说，你可能会发现你能用这种方式使用 CSS，给访客亲切的体验。我们加入了一个更简单的基于旧的和受到良好支持技术的布局，然后用新一些的 CSS 建立一个可以由 90% 的用户看到的布局。但是存在这样的情况：回滚代码会需要包含新浏览器也能理解的东西；举例来说就是，我们要往我们的浮动物件中加入百分数宽度，从而让列看起来更像网格，拉伸以充满容器。
    
 
-
    在浮动布局中，百分数是依照容器计算的——33.333%是容器宽度的三分之一。但在网格中，这33.333%是根据物件所在的网格区域计算的，所以只要网格布局引入进来，物件的大小实际上变成了我们想要的大小的三分之一。
    
+
    在浮动布局中，百分数是依照容器计算的——33.333% 是容器宽度的三分之一。但在网格中，这 33.333% 是根据物件所在的网格区域计算的，所以只要网格布局引入进来，物件的大小实际上变成了我们想要的大小的三分之一。
    
 
 
    
 
    * {box-sizing: border-box;}
@@ -136,11 +136,11 @@ 
    回滚方式
    
 
    {{ EmbedLiveSample('Example2', '100%', '200') }}
    
 
    
 
-
    为了处理这种问题，我们需要有能够探测网格是否受到支持的方法，也就是探测它是否会覆写宽度的方法。CSS在这里为我们提供了一个解决方法。
    
+
    为了处理这种问题，我们需要有能够探测网格是否受到支持的方法，也就是探测它是否会覆写宽度的方法。CSS 在这里为我们提供了一个解决方法。
    
 
 
    特性查询
    
 
-
    特性查询允许你测试一个浏览器是否支持任何特定的一个CSS特性。这就是说，你可以写一些面向不支持某项特性的浏览器的CSS，然后检查以了解浏览器是否支持，如果支持的话就可以加进你的复杂布局了。
    
+
    特性查询允许你测试一个浏览器是否支持任何特定的一个 CSS 特性。这就是说，你可以写一些面向不支持某项特性的浏览器的 CSS，然后检查以了解浏览器是否支持，如果支持的话就可以加进你的复杂布局了。
    
 
 
    如果我们向上面的示例中加入了一条特征查询，要是我们知道网格受到支持的话，我们可以用它把我们的物件宽度设定回auto。
    
 
@@ -180,25 +180,25 @@ 
    特性查询
    
 
    {{ EmbedLiveSample('Example3', '100%', '200') }}
    
 
    
 
-
    对特性查询的支持，在各现代浏览器中都是很好的。但是你应该注意那些既不支持CSS网格，也不支持特征查询的浏览器。这就是说在上面详细介绍的一种方式，对这些浏览器而言，会表现得很好。我们要做的是，先在任何特性查询以外，编写我们的旧CSS。不支持网格也不支持特性查询的浏览器会使用这部分它们可以理解的布局信息，将其他东西全都忽略掉。支持特性查询和CSS网格等的浏览器会运行网格代码和特性查询之内的代码。
    
+
    对特性查询的支持，在各现代浏览器中都是很好的。但是你应该注意那些既不支持 CSS 网格，也不支持特征查询的浏览器。这就是说在上面详细介绍的一种方式，对这些浏览器而言，会表现得很好。我们要做的是，先在任何特性查询以外，编写我们的旧 CSS。不支持网格也不支持特性查询的浏览器会使用这部分它们可以理解的布局信息，将其他东西全都忽略掉。支持特性查询和 CSS 网格等的浏览器会运行网格代码和特性查询之内的代码。
    
 
-
    对于特性查询的规范，也包含了测试浏览器是否支持某个特性的能力——这只在浏览器支持特性查询的时候有用。未来，一种检测支持的缺失的方式将会实现，同时不支持特性查询的浏览器也将退出历史舞台。但是现在，你要使用这种编写旧CSS的方式，然后覆写它，以求最广泛的支持。
    
+
    对于特性查询的规范，也包含了测试浏览器是否支持某个特性的能力——这只在浏览器支持特性查询的时候有用。未来，一种检测支持的缺失的方式将会实现，同时不支持特性查询的浏览器也将退出历史舞台。但是现在，你要使用这种编写旧 CSS 的方式，然后覆写它，以求最广泛的支持。
    
 
 
    弹性盒的旧版本
    
 
-
    在旧版浏览器中，你可以找到弹性盒规范的旧有修订版本。在编写这篇文章的时候，这大多数是IE10的问题，它在弹性盒上使用了-ms-前缀。这也意味着现在还存在着一些过时的文章和教程，这篇有用的指导帮助你分辨你看到的信息；如果你需要在很旧的浏览器中需要flex支持的话，它也会帮到你。
    
+
    在旧版浏览器中，你可以找到弹性盒规范的旧有修订版本。在编写这篇文章的时候，这大多数是 IE10 的问题，它在弹性盒上使用了-ms-前缀。这也意味着现在还存在着一些过时的文章和教程，这篇有用的指导帮助你分辨你看到的信息；如果你需要在很旧的浏览器中需要 flex 支持的话，它也会帮到你。
    
 
-
    IE10和IE11的带前缀版的网格
    
+
    IE10 和 IE11 的带前缀版的网格
    
 
-
    CSS网格规范最初成形于IE10，也就是说尽管IE10和IE11不支持现代的网格，虽然这种网格和本站记载的现代布局不同，它们还是有一个很堪用的网格布局版本。IE10和IE11的实现是以-ms-为前缀的，也就是说你可以给这两个浏览器用，而在非微软浏览器上，这种属性会被忽略。不过Edge仍然能理解旧语法，所以小心点，让每个东西都安全地在你的现代网格CSS中覆写。
    
+
    CSS 网格规范最初成形于 IE10，也就是说尽管 IE10 和 IE11 不支持现代的网格，虽然这种网格和本站记载的现代布局不同，它们还是有一个很堪用的网格布局版本。IE10 和 IE11 的实现是以-ms-为前缀的，也就是说你可以给这两个浏览器用，而在非微软浏览器上，这种属性会被忽略。不过 Edge 仍然能理解旧语法，所以小心点，让每个东西都安全地在你的现代网格 CSS 中覆写。
    
 
-
    网格布局渐进增强指导能帮你理解IE版的网格，我们在这节课的末尾加入了一些额外的有用的链接。不过，除非你有很多使用旧版IE的访客，你可能发现专注于建立一个由所有不支持的浏览器共用的回滚版本是一个更好的选择。
    
+
    网格布局渐进增强指导能帮你理解 IE 版的网格，我们在这节课的末尾加入了一些额外的有用的链接。不过，除非你有很多使用旧版 IE 的访客，你可能发现专注于建立一个由所有不支持的浏览器共用的回滚版本是一个更好的选择。
    
 
 
    测试旧浏览器
    
 
-
    由于大多数浏览器都支持弹性盒和网格，测试旧浏览器想想就很难。一种方式是使用在线的测试工具，例如Sauce Labs，在跨浏览器测试模块里有详细说明。
    
+
    由于大多数浏览器都支持弹性盒和网格，测试旧浏览器想想就很难。一种方式是使用在线的测试工具，例如 Sauce Labs，在跨浏览器测试模块里有详细说明。
    
 
-
    你也可以下载安装虚拟机，在你的电脑的容器环境中运行旧版浏览器。能够使用旧版IE是很有用的，为此，微软已经制作了一些可以免费下载的虚拟机。这些对Mac、Windows和Linux操作系统都是可以用的，所以即使你没有Windows电脑，这也是一个测试旧的和现代Windows浏览器的绝佳办法。
    
+
    你也可以下载安装虚拟机，在你的电脑的容器环境中运行旧版浏览器。能够使用旧版 IE 是很有用的，为此，微软已经制作了一些可以免费下载的虚拟机。这些对 Mac、Windows 和 Linux 操作系统都是可以用的，所以即使你没有 Windows 电脑，这也是一个测试旧的和现代 Windows 浏览器的绝佳办法。
    
 
 
    小结
    
 
@@ -207,13 +207,13 @@ 
    小结
    
 
    另见
    
 
 
 
@@ -222,7 +222,7 @@ 
    另见
    
 
    模块目录
    
 
 
      
- 
    • CSS布局介绍
      • 
+ 
    • CSS 布局介绍
      • 
  
    • 正常布局流
      • 
  
    • 弹性盒
      • 
  
    • 网格
      • 
diff --git a/files/zh-cn/learn/css/first_steps/getting_started/index.html b/files/zh-cn/learn/css/first_steps/getting_started/index.html
index e30226d18be006..c5f74cf3edcda8 100644
--- a/files/zh-cn/learn/css/first_steps/getting_started/index.html
+++ b/files/zh-cn/learn/css/first_steps/getting_started/index.html
@@ -1,5 +1,5 @@
 ---
-title: 让我们开始CSS的学习之旅
+title: 让我们开始 CSS 的学习之旅
 slug: Learn/CSS/First_steps/Getting_started
 tags:
   - CSS
@@ -26,7 +26,7 @@ 
      前置知识
      
 
        
  
      • 基本熟悉计算机操作。
        • 
  
      • 基本工作环境的设置（详见安装基本软件），基本的文件操作，详见处理文件。
        • 
- 
      • 熟悉 HTML 概述 章节中提到的基本 HTML 知识.
        • 
+ 
      • 熟悉 HTML 概述 章节中提到的基本 HTML 知识。
        • 
 
      
 
 
      目标
      
@@ -44,21 +44,21 @@ 
      先从 HTML 开始吧
      
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>开始学习CSS</title>
+    <title>开始学习 CSS</title>
 </head>
 
 <body>
 
     <h1>我是一级标题</h1>
 
-    <p>这是一个段落文本. 在文本中有一个 <span>span element</span>
+    <p>这是一个段落文本。在文本中有一个 <span>span element</span>
 并且还有一个 <a href="http://example.com">链接</a>.</p>
 
-    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>
+    <p>这是第二段。包含了一个 <em>强调</em> 元素.</p>
 
     <ul>
-        <li>项目1</li>
-        <li>项目2</li>
+        <li>项目 1</li>
+        <li>项目 2</li>
         <li>项目 <em>三</em></li>
     </ul>
 
@@ -73,7 +73,7 @@ 
      先从 HTML 开始吧
      
 
 
      添加 CSS 试试看？
      
 
-
      我们最想做的就是让 HTML 文档能够遵守我们给它的 CSS 规则。 其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。
      
+
      我们最想做的就是让 HTML 文档能够遵守我们给它的 CSS 规则。其实有三种方式可以实现，而目前我们更倾向于利用最普遍且有用的方式——在文档的开头链接 CSS。
      
 
 
      在与之前所说的 HTML 文档的相同目录创建一个文件，保存并命名为 styles.css 。（看后缀知道此文件就是 CSS 文件）
      
 
@@ -81,7 +81,7 @@ 
      添加 CSS 试试看？
      
 
 
      <link rel="stylesheet" href="styles.css">
      
 
-
       {{htmlelement("link")}} 语句块里面，我们用属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 href 指定，寻找 CSS 文件的位置。 你可以做测试来验证CSS是否有效：在 styles.css 里面加上CSS样式并观察显示的结果。下面，用你的编辑器打出下面的代码。
      
+
       {{htmlelement("link")}} 语句块里面，我们用属性 rel，让浏览器知道有 CSS 文档存在（所以需要遵守 CSS 样式的规定），并利用属性 href 指定，寻找 CSS 文件的位置。 你可以做测试来验证 CSS 是否有效：在 styles.css 里面加上 CSS 样式并观察显示的结果。下面，用你的编辑器打出下面的代码。
      
 
 
      h1 {
   color: red;
@@ -155,7 +155,7 @@ 
      使用类名
      
   font-weight: bold;
 }
      
 
-
      这个意思是说，“选中每个 special 类的 li 元素”。 你真要这样，好了，它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：
      
+
      这个意思是说，“选中每个 special 类的 li 元素”。你真要这样，好了，它对 <span> 还有其它元素不起作用了。你可以把这个元素再添上去就是了：
      
 
 
      li.special,
 span.special {
@@ -185,7 +185,7 @@ 
      根据元素在文档中
   font-size: 200%;
 }
      
 
-
      下面的示例包含了上面的两个规则。 尝试添加规则使位于段落中的 span 变为红色。如果没问题，您将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色。
      
+
      下面的示例包含了上面的两个规则。尝试添加规则使位于段落中的 span 变为红色。如果没问题，您将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
      
 
@@ -195,7 +195,7 @@ 
      根据元素在文档中
 
 
      根据状态确定样式
      
 
-
      在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。 当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用CSS去定位或者说针对这些不同的状态进行修饰——下面的CSS代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。
      
+
      在这篇教程中我们最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。当我们修改一个链接的样式时我们需要定位（针对） <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用 CSS 去定位或者说针对这些不同的状态进行修饰——下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。
      
 
 
      a:link {
   color: pink;
@@ -211,7 +211,7 @@ 
      根据状态确定样式
      
   text-decoration: none;
 }
      
 
-
      在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。——换一个更好的颜色吧。你能将链接变为黑体吗?
      
+
      在下面的例子中，你可以对超链接的不同状态尝试各种各样的值。我已经编写了一些规则，然而你肯定已经发现粉色看上去太浅以至于不好辨认。——换一个更好的颜色吧。你能将链接变为黑体吗？
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 
      
 
@@ -222,7 +222,7 @@ 
      根据状态确定样式
      
 
 
      你的访客可能在一台使用鼠标和键盘操作的计算机前，也可能正在使用带有触摸屏的手机，或者正在使用屏幕阅读软件读出文档内容，或者他们需要使用更大的字体，或者仅仅使用键盘浏览站点。
      
 
-
      一个朴素的 HTML 文档一般来说对任何人都是可以无障碍访问的 ，当你开始为它添加样式，记得不要破坏这种可访问性。
      
+
      一个朴素的 HTML 文档一般来说对任何人都是可以无障碍访问的，当你开始为它添加样式，记得不要破坏这种可访问性。
      
 
 
 
      同时使用选择器和选择符
      
diff --git a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html
index 2a7342a3a6f6a6..d9c02e6e2ab85e 100644
--- a/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html
+++ b/files/zh-cn/learn/css/first_steps/how_css_is_structured/index.html
@@ -1,5 +1,5 @@
 ---
-title: 如何构建CSS
+title: 如何构建 CSS
 slug: Learn/CSS/First_steps/How_CSS_is_structured
 tags:
   - CSS
@@ -12,9 +12,9 @@
 ---
 
      {{LearnSidebar}}
      
 
-
      {{PreviousMenuNext("Learn/CSS/First_steps/开始", "Learn/CSS/First_steps/CSS如何运行", "Learn/CSS/First_steps")}}
      
+
      {{PreviousMenuNext("Learn/CSS/First_steps/开始", "Learn/CSS/First_steps/CSS 如何运行", "Learn/CSS/First_steps")}}
      
 
-
      既然你已经了解了什么是CSS，以及使用CSS的基础知识，是时候更深入的了解该语言本身的结构了。我们已经见过了本页讨论的很多概念；如果在之后对某些概念感到困惑的话，可以返回至此进行回顾。
      
+
      既然你已经了解了什么是 CSS，以及使用 CSS 的基础知识，是时候更深入的了解该语言本身的结构了。我们已经见过了本页讨论的很多概念；如果在之后对某些概念感到困惑的话，可以返回至此进行回顾。
      
 
 
      前置知识
      
 
@@ -23,25 +23,25 @@ 
      前置知识
      
 
        
  
      • 基本熟悉计算机操作。
        • 
  
      • 基本工作环境的设置（详见安装基本软件），基本的文件操作，详见处理文件。
        • 
- 
      • 熟悉 HTML概述 章节中提到的基本HTML知识.
        • 
+ 
      • 熟悉 HTML 概述 章节中提到的基本 HTML 知识。
        • 
 
      
 
 
      目标
      
 
 
        
- 
      • 理解 HTML文档链接CSS文档的几个基本套路，
        • 
- 
      • 并能运用所学的CSS，做些文字上的格式化操作。
        • 
+ 
      • 理解 HTML 文档链接 CSS 文档的几个基本套路，
        • 
+ 
      • 并能运用所学的 CSS，做些文字上的格式化操作。
        • 
 
      
 
-
      在你的HTML里面应用CSS
      
+
      在你的 HTML 里面应用 CSS
      
 
-
      我们需要了解的第一件事情就是在文档中应用CSS的三种方法
      
+
      我们需要了解的第一件事情就是在文档中应用 CSS 的三种方法
      
 
 
      外部样式表
      
 
-
      在Getting started with CSS 中我们将外部样式表链接到页面。这是将css附加到文档中的最常见和最有用的方法，因为您可以将css链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。
      
+
      在Getting started with CSS 中我们将外部样式表链接到页面。这是将 css 附加到文档中的最常见和最有用的方法，因为您可以将 css 链接到多个页面，从而允许您使用相同的样式表设置所有页面的样式。在大多数情况下，一个站点的不同页面看起来几乎都是一样的，因此您可以使用相同的规则集来获得基本的外观。
      
 
-
      外部样式表是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它的情况：
      
+
      外部样式表是指将 CSS 编写在扩展名为.css 的单独文件中，并从 HTML<link> 元素引用它的情况：
      
 
 
      <!DOCTYPE html>
 <html>
@@ -56,7 +56,7 @@ 
      外部样式表
      
   </body>
 </html>
      
 
-
      CSS文件可能如下所示：
      
+
      CSS 文件可能如下所示：
      
 
 
      h1 {
   color: blue;
@@ -70,7 +70,7 @@ 
      外部样式表
      
 
 
      {{htmlelement("link")}} 元素的 href 属性需要引用你的文件系统中的一个文件。
      
 
-
      在上面的例子中，CSS文件和HTML文档在同一个文件夹中，但是你可以把CSS文件放在其他地方，并调整指定的路径以匹配，例如：
      
+
      在上面的例子中，CSS 文件和 HTML 文档在同一个文件夹中，但是你可以把 CSS 文件放在其他地方，并调整指定的路径以匹配，例如：
      
 
 
      <!-- Inside a subdirectory called styles inside the current directory -->
 <link rel="stylesheet" href="styles/style.css">
@@ -83,9 +83,9 @@ 
      外部样式表
      
 
 
      内部样式表
      
 
-
      内部样式表是指不使用外部CSS文件，而是将CSS放在HTML文件{{htmlelement("head")}}标签里的{{htmlelement("style")}}标签之中。
      
+
      内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件{{htmlelement("head")}}标签里的{{htmlelement("style")}}标签之中。
      
 
-
      于是HTML看起来就像下面这个样子：
      
+
      于是 HTML 看起来就像下面这个样子：
      
 
 
      <!DOCTYPE html>
 <html>
@@ -110,11 +110,11 @@ 
      内部样式表
      
   </body>
 </html>
      
 
-
      有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑CSS文件)，但该方法和外部样式表比起来更加低效 。在一个站点里，你不得不在每个页面里重复添加相同的CSS，并且在需要更改CSS时修改每个页面文件。
      
+
      有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑 CSS 文件)，但该方法和外部样式表比起来更加低效 。在一个站点里，你不得不在每个页面里重复添加相同的 CSS，并且在需要更改 CSS 时修改每个页面文件。
      
 
 
      内联样式
      
 
-
      内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素：
      
+
      内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素：
      
 
 
      <!DOCTYPE html>
 <html>
@@ -130,11 +130,11 @@ 
      内联样式
      
 
 
      除非你有充足的理由，否则不要这样做！它难以维护（在需要更新时，你必须在修改同一个文档的多处地方），并且这种写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解。将不同类型的代码分开存放在不同的文档中，会让我们的工作更加清晰。
      
 
-
      在某些地方，内联样式更常见，甚至更可取。 如果您的工作环境确实很严格（也许网站管理系统(CMS)仅允许您编辑HTML正文），则可能不得不使用它们。 您也会发现它们很长时间被应用在HTML电子邮件中，以便与尽可能多的电子邮件客户端兼容。
      
+
      在某些地方，内联样式更常见，甚至更可取。如果您的工作环境确实很严格（也许网站管理系统 (CMS) 仅允许您编辑 HTML 正文），则可能不得不使用它们。您也会发现它们很长时间被应用在 HTML 电子邮件中，以便与尽可能多的电子邮件客户端兼容。
      
 
-
      在文本中使用CSS
      
+
      在文本中使用 CSS
      
 
-
      有的时候我们会在文本中使用大量的CSS。为了做到这些,我们推荐你在你的计算机上创建一个新的文件夹,然后在文件夹中创建下面两个文件的副本。
      
+
      有的时候我们会在文本中使用大量的 CSS。为了做到这些，我们推荐你在你的计算机上创建一个新的文件夹，然后在文件夹中创建下面两个文件的副本。
      
 
 
      index.html:
      
 
@@ -160,19 +160,19 @@ 
      在文本中使用CSS
      
   color: red;
 }
      
 
-
      然后，当您遇到一些您想要试验的CSS时，替换HTML<body>内容与一些HTML样式，并开始添加CSS样式在您的CSS文件。
      
+
      然后，当您遇到一些您想要试验的 CSS 时，替换 HTML<body>内容与一些 HTML 样式，并开始添加 CSS 样式在您的 CSS 文件。
      
 
 
      如果你没有可以轻松创建文件的系统，则可以使用下面交互式编译器进行实验。
      
 
 
      {{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 
      
 
-
      继续读下去，希望你能享受其中!
      
+
      继续读下去，希望你能享受其中！
      
 
 
      选择器
      
 
-
      讲到CSS就不得不说到选择器, 并且在之前的辅导教程中我们已经列举了一些不同的选择器。为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。
      
+
      讲到 CSS 就不得不说到选择器，并且在之前的辅导教程中我们已经列举了一些不同的选择器。为了样式化某些元素，我们会通过选择器来选中 HTML 文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。
      
 
-
      每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。以下都是有效的选择器或组合选择器的示例。
      
+
      每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。以下都是有效的选择器或组合选择器的示例。
      
 
 
      h1
 a:link
@@ -183,15 +183,15 @@ 
      选择器
      
 .box p:first-child
 h1, h2, .intro
      
 
-
      尝试创建一些使用上述选择器的CSS规则，并创建一些HTML样式。如果您不知道上面的一些语法意味着什么，请尝试在MDN上搜索它！
      
+
      尝试创建一些使用上述选择器的 CSS 规则，并创建一些 HTML 样式。如果您不知道上面的一些语法意味着什么，请尝试在 MDN 上搜索它！
      
 
 
      
-
      注意：在下一个模块中，您将在我们的CSS选择器教程中了解更多关于选择器的内容。
      
+
      注意：在下一个模块中，您将在我们的CSS 选择器教程中了解更多关于选择器的内容。
      
 
      
 
 
      专一性
      
 
-
      通常情况下，两个选择器可以选择相同的HTML元素。考虑下面的样式表，其中我有一个规则，其中有一个将段落设置为蓝色的p选择器，还有一个将选定元素设置为红色的类。
      
+
      通常情况下，两个选择器可以选择相同的 HTML 元素。考虑下面的样式表，其中我有一个规则，其中有一个将段落设置为蓝色的 p 选择器，还有一个将选定元素设置为红色的类。
      
 
 
      .special {
   color: red;
@@ -201,11 +201,11 @@ 
      专一性
      
   color: blue;
 }
      
 
-
      比方说，在我们的HTML文档中，我们有一个带有特殊类的段落。这两条规则都适用，那么谁赢了？你认为我们的段落会变成什么颜色？
      
+
      比方说，在我们的 HTML 文档中，我们有一个带有特殊类的段落。这两条规则都适用，那么谁赢了？你认为我们的段落会变成什么颜色？
      
 
 
      <p class="special">What color am I?</p>
      
 
-
      CSS语言有规则来控制在发生碰撞时哪条规则将获胜--这些规则称为级联规则和专用规则。在下面的代码块中，我们为p选择器定义了两个规则，但是段落最后是蓝色的。这是因为将其设置为蓝色的声明将出现在样式表的后面，而稍后的样式将覆盖以前的样式。这就是起作用的级联。
      
+
      CSS 语言有规则来控制在发生碰撞时哪条规则将获胜--这些规则称为级联规则和专用规则。在下面的代码块中，我们为 p 选择器定义了两个规则，但是段落最后是蓝色的。这是因为将其设置为蓝色的声明将出现在样式表的后面，而稍后的样式将覆盖以前的样式。这就是起作用的级联。
      
 
 
      p {
   color: red;
@@ -217,34 +217,34 @@ 
      专一性
      
 
 
      但是，在我们同时使用了类选择器和元素选择器的前一个例子中，类将获胜，使得段落变红--即使它出现在样式表的前面。一个类被描述为比元素选择器更具体，或者具有更多的特异性，所以它获胜了。
      
 
-
      自己试试上面的实验--将HTML添加到您的实验中，然后将两个p{.}规则添加到样式表中。接下来，将第一个p选择器更改为.Special，以查看它如何更改样式。
      
+
      自己试试上面的实验--将 HTML 添加到您的实验中，然后将两个 p{.}规则添加到样式表中。接下来，将第一个 p 选择器更改为.Special，以查看它如何更改样式。
      
 
-
      一开始，具体性和层叠的规则看起来有点复杂，一旦你积累了更多的CSS知识，就更容易理解了。在我们的级联和继承文章(将在下一个模块中讨论)中，我将详细解释这一点，包括如何计算专用性。现在，请记住这是存在的，有时CSS可能不会像您预期的那样应用，因为样式表中的其他内容具有更高的特异性。确定一个元素可以适用不止一个规则是解决这些问题的第一步
      
+
      一开始，具体性和层叠的规则看起来有点复杂，一旦你积累了更多的 CSS 知识，就更容易理解了。在我们的级联和继承文章 (将在下一个模块中讨论) 中，我将详细解释这一点，包括如何计算专用性。现在，请记住这是存在的，有时 CSS 可能不会像您预期的那样应用，因为样式表中的其他内容具有更高的特异性。确定一个元素可以适用不止一个规则是解决这些问题的第一步
      
 
 
      属性和值
      
 
-
      在最基本的层面上，CSS由两个组成部分组成：
      
+
      在最基本的层面上，CSS 由两个组成部分组成：
      
 
 
        
- 
      • 属性：人类可读的标识符，指示您想要更改的样式特征(例如font-size, width, background-color) 你想改变。
        • 
- 
      • 值：每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性(例如，要将字体、宽度或背景色更改为。)
        • 
+ 
      • 属性：人类可读的标识符，指示您想要更改的样式特征 (例如font-size, width, background-color) 你想改变。
        • 
+ 
      • 值：每个指定的属性都有一个值，该值指示您希望如何更改这些样式特性 (例如，要将字体、宽度或背景色更改为。)
        • 
 
      
 
-
      下面的图像突出显示单个属性和值。 属性名为 color, 值为 blue.
      
+
      下面的图像突出显示单个属性和值。属性名为 color, 值为 blue.
      
 
 
      A declaration highlighted in the CSS
      
 
-
      与值配对的属性称为CSS声明。CSS声明放在CSS声明块中。下一张图片显示了我们的CSS，并突出显示了声明块。
      
+
      与值配对的属性称为 CSS 声明。CSS 声明放在 CSS 声明块中。下一张图片显示了我们的 CSS，并突出显示了声明块。
      
 
 
      A highlighted declaration block
      
 
-
      最后，CSS声明块与选择器配对，以生成CSS规则集(或CSS规则)。我们的图像包含两个规则，一个用于H1选择器，另一个用于p选择器。h1的规则被突出显示。
      
+
      最后，CSS 声明块与选择器配对，以生成 CSS 规则集 (或 CSS 规则)。我们的图像包含两个规则，一个用于 H1 选择器，另一个用于 p 选择器。h1 的规则被突出显示。
      
 
 
      The rule for h1 highlighted
      
 
-
      将CSS属性设置为特定值是CSS语言的核心功能。CSS引擎计算哪些声明应用于页面的每个元素，以便适当地布局和样式它。重要的是要记住，在css中，属性和值都是区分大小写的。每对中的属性和值由冒号(：)分隔。
      
+
      将 CSS 属性设置为特定值是 CSS 语言的核心功能。CSS 引擎计算哪些声明应用于页面的每个元素，以便适当地布局和样式它。重要的是要记住，在 css 中，属性和值都是区分大小写的。每对中的属性和值由冒号 (：) 分隔。
      
 
-
      尝试查找以下属性的不同值，并编写将它们应用于不同HTML元素的CSS规则： 
      
+
      尝试查找以下属性的不同值，并编写将它们应用于不同 HTML 元素的 CSS 规则： 
      
 
 
        
  
      • {{cssxref("font-size")}}
        • 
@@ -255,16 +255,16 @@ 
        属性和值
        
 
      
 
 
      
-
      重要事项：如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的CSS引擎完全忽略。
      
+
      重要事项：如果属性未知或某个值对给定属性无效，则声明被视为无效，并被浏览器的 CSS 引擎完全忽略。
      
 
      
 
 
      
-
      重要：在CSS(和其他网络标准)中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为color。colour是不起作用的。
      
+
      重要：在 CSS(和其他网络标准) 中，当语言表达存在不确定性时，美国的拼写被视作公认的标准。例如，颜色应该始终拼写为 color。colour 是不起作用的。
      
 
      
 
 
      函数
      
 
-
      虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。一个例子是calc()函数。这个函数允许您在CSS中进行简单的计算，例如：
      
+
      虽然大多数值是相对简单的关键字或数值，但也有一些可能的值以函数的形式出现。一个例子是 calc() 函数。这个函数允许您在 CSS 中进行简单的计算，例如：
      
 
 
      
 
      <div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
      
@@ -285,7 +285,7 @@ 
      函数
      
 
 
      {{EmbedLiveSample('calc_example', '100%', 200)}}
      
 
-
      一个函数由函数名和一些括号组成，其中放置了该函数的允许值。在上面的calc()示例中，我要求此框的宽度为包含块宽度的90%，减去30像素。这不是我可以提前计算的东西，只是在CSS中输入值，因为我不知道90%会是什么。与所有值一样，MDN上的相关页面将有使用示例，这样您就可以看到函数是如何工作的。
      
+
      一个函数由函数名和一些括号组成，其中放置了该函数的允许值。在上面的 calc() 示例中，我要求此框的宽度为包含块宽度的 90%，减去 30 像素。这不是我可以提前计算的东西，只是在 CSS 中输入值，因为我不知道 90% 会是什么。与所有值一样，MDN 上的相关页面将有使用示例，这样您就可以看到函数是如何工作的。
      
 
 
      另一个例子是{{cssxref("<transform>")}}, 例如 rotate().
      
 
@@ -305,7 +305,7 @@ 
      函数
      
 
 
      {{EmbedLiveSample('transform_example', '100%', 200)}}
      
 
-
      尝试查找一下属性的不同值，并编写将他们应用于不同HTML元素的CSS规则：
      
+
      尝试查找一下属性的不同值，并编写将他们应用于不同 HTML 元素的 CSS 规则：
      
 
 
        
  
      • {{cssxref("transform")}}
        • 
@@ -315,13 +315,13 @@ 
        函数
        
 
 
        @规则
        
 
-
        到目前为止，我们还没有遇到 @rules (pronounced "at-rules"). 这是一些特殊的规则，为 CSS提供了一些关于如何表现的指导。 有些@rules 规则很简单，有规则名和值。例如，要将额外的样式表导入主CSS样式表，可以使用@import:
        
+
        到目前为止，我们还没有遇到 @rules (pronounced "at-rules"). 这是一些特殊的规则，为 CSS 提供了一些关于如何表现的指导。有些@rules 规则很简单，有规则名和值。例如，要将额外的样式表导入主 CSS 样式表，可以使用@import:
        
 
 
        @import 'styles2.css';
        
 
-
        您将遇到的最常见的 @rules 之一是@media，它允许您使用 媒体查询 来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
        
+
        您将遇到的最常见的 @rules 之一是 @media，它允许您使用 媒体查询 来应用 CSS，仅当某些条件成立 (例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
        
 
-
        在下面的 CSS中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用@media创建样式表的一个部分，该部分仅适用于视口大于30em的浏览器。如果浏览器的宽度大于30em，则背景色将为蓝色。
        
+
        在下面的 CSS 中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用 @media 创建样式表的一个部分，该部分仅适用于视口大于 30em 的浏览器。如果浏览器的宽度大于 30em，则背景色将为蓝色。
        
 
 
        body {
   background-color: pink;
@@ -335,7 +335,7 @@ 
        @规则
        
 
 
        在这些教程中，你将遇到一些其他的规则 @rules 
        
 
-
        查看是否可以将媒体查询添加到CSS中，该查询将根据视口宽度更改样式。更改浏览器窗口的宽度以查看结果。
        
+
        查看是否可以将媒体查询添加到 CSS 中，该查询将根据视口宽度更改样式。更改浏览器窗口的宽度以查看结果。
        
 
 
        速记属性
        
 
@@ -368,9 +368,9 @@ 
        速记属性
        
 background-repeat: repeat-x;
 background-attachment: fixed;
        
 
-
        我们现在不打算详尽地教授这些内容--在后面的课程中，您将看到许多例子，我们建议您查找CSS参考中的速记属性名称，以查找更多内容。
        
+
        我们现在不打算详尽地教授这些内容--在后面的课程中，您将看到许多例子，我们建议您查找 CSS 参考中的速记属性名称，以查找更多内容。
        
 
-
        尝试将上述声明添加到CSS中，看看它如何影响HTML的样式。试着尝试一些不同的属性值。
        
+
        尝试将上述声明添加到 CSS 中，看看它如何影响 HTML 的样式。试着尝试一些不同的属性值。
        
 
 
        
 
        警告：虽然速记经常允许您忽略值，但它们会将不包含的任何值重置为它们的初始值。这确保使用了一组合理的值。但是，如果您期望速记只更改传入的值，这可能会使您感到困惑。
        
@@ -378,7 +378,7 @@ 
        速记属性
        
 
 
        注释
        
 
-
        与任何的代码工作一样，在编写CSS过程中，最好的练习方式就是添加注释。这样做可以帮助您在过了几个月后回来修改或优化代码时了解它们是如何工作的，同时也便于其他人理解您的代码。
        
+
        与任何的代码工作一样，在编写 CSS 过程中，最好的练习方式就是添加注释。这样做可以帮助您在过了几个月后回来修改或优化代码时了解它们是如何工作的，同时也便于其他人理解您的代码。
        
 
 
        CSS中的注释以/*开头，以*/结尾。在下面的代码块中，注释标记了不同代码节的开始。当代码库变得更大时，这对于帮助您导航代码库非常有用--在代码编辑器中搜索注释可以高效地定位代码节。
        
 
@@ -417,7 +417,7 @@ 
        注释
        
   padding-top: 0;
 }
      
 
-
      “注释掉”代码这一操作常用于在测试中临时禁用一段代码。例如，如果您试图找出代码的哪一部分会导致错误。在下例中，.special selector规则被“注释”掉了，也就是被禁用了。
      
+
      “注释掉”代码这一操作常用于在测试中临时禁用一段代码。例如，如果您试图找出代码的哪一部分会导致错误。在下例中，.special selector 规则被“注释”掉了，也就是被禁用了。
      
 
 
      /*.special {
   color: red;
@@ -427,13 +427,13 @@ 
      注释
      
   color: blue;
 }
      
 
-
      添加一些注释到您的CSS，以适应使用他们。
      
+
      添加一些注释到您的 CSS，以适应使用他们。
      
 
 
      空白
      
 
-
      空白是指实际空格、制表符和新行。以与HTML相同的方式，浏览器往往忽略CSS中的大部分空白；许多空白只是为了提高可读性。
      
+
      空白是指实际空格、制表符和新行。以与 HTML 相同的方式，浏览器往往忽略 CSS 中的大部分空白；许多空白只是为了提高可读性。
      
 
-
      在下面的第一个示例中，我们将每个声明(以及规则开始/结束)都放在自己的行中--这可以说是编写CSS的好方法，因为它使维护和理解变得更加容易：
      
+
      在下面的第一个示例中，我们将每个声明 (以及规则开始/结束) 都放在自己的行中--这可以说是编写 CSS 的好方法，因为它使维护和理解变得更加容易：
      
 
 
      body {
   font: 1em/150% Helvetica, Arial, sans-serif;
@@ -468,7 +468,7 @@ 
      空白
      
 }
 
      
 
-
      您可以编写完全相同的CSS，删除大部分空格--这在功能上与第一个示例相同，但我相信您肯定也觉得阅读起来有点困难：
      
+
      您可以编写完全相同的 CSS，删除大部分空格--这在功能上与第一个示例相同，但我相信您肯定也觉得阅读起来有点困难：
      
 
 
      body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
 @media (min-width: 70em) { body {font-size: 130%;} }
@@ -480,11 +480,11 @@ 
      空白
      
 div p + p {padding-top: 0;}
 
      
 
-
      您选择的代码布局通常是个人偏好，尽管当您开始在团队中工作时，您可能会发现现有团队有自己的样式指南，指定要遵循的约定。　
      
+
      您选择的代码布局通常是个人偏好，尽管当您开始在团队中工作时，您可能会发现现有团队有自己的样式指南，指定要遵循的约定。 
      
 
-
      在CSS中，属性和它们的值之间的空格需要小心。
      
+
      在 CSS 中，属性和它们的值之间的空格需要小心。
      
 
-
      例如，以下声明是有效的CSS：
      
+
      例如，以下声明是有效的 CSS：
      
 
 
      margin: 0 auto;
 padding-left: 10px;
      
@@ -494,22 +494,22 @@ 
      空白
      
 
      margin: 0auto;
 padding- left: 10px;
      
 
-
      “0auto”不被识别为边距属性的有效值(“0”和“AUTO”是两个独立的值)，而浏览器会将“padding- ”识别为有效属性。因此，您应该始终确保通过至少一个空格将不同的值分隔开来，但将属性名称和属性值作为单个未中断的字符串放在一起。
      
+
      “0auto”不被识别为边距属性的有效值 (“0”和“AUTO”是两个独立的值)，而浏览器会将“padding- ”识别为有效属性。因此，您应该始终确保通过至少一个空格将不同的值分隔开来，但将属性名称和属性值作为单个未中断的字符串放在一起。
      
 
-
      试着在CSS中使用空格，看看什么情况下破坏了东西，什么时候没有破坏。
      
+
      试着在 CSS 中使用空格，看看什么情况下破坏了东西，什么时候没有破坏。
      
 
 
      接下来是什么？
      
 
-
      了解一下浏览器如何将HTML和CSS转换成网页是很有用的, 所以在下一篇文章 — CSS是如何工作的 — 我们将看看这个过程。
      
+
      了解一下浏览器如何将 HTML 和 CSS 转换成网页是很有用的，所以在下一篇文章 — CSS 是如何工作的 — 我们将看看这个过程。
      
 
-
      {{PreviousMenuNext("Learn/CSS/First_steps/开始", "Learn/CSS/First_steps/CSS如何运行", "Learn/CSS/First_steps")}}
      
+
      {{PreviousMenuNext("Learn/CSS/First_steps/开始", "Learn/CSS/First_steps/CSS 如何运行", "Learn/CSS/First_steps")}}
      
 
 
      在这个模块中
      
 
 
        
- 
      1. 什么是CSS?
        2. 
- 
      2. 开始使用CSS 
        3. 
- 
      3. 如何构建CSS  
        4. 
- 
      4. CSS是如何工作的
        5. 
+ 
      5. 什么是 CSS?
        6. 
+ 
      6. 开始使用 CSS 
        7. 
+ 
      7. 如何构建 CSS  
        8. 
+ 
      8. CSS 是如何工作的
        9. 
  
      9. 使用你的新知识
        10. 
 
      
diff --git a/files/zh-cn/learn/css/first_steps/how_css_works/index.html b/files/zh-cn/learn/css/first_steps/how_css_works/index.html
index 84af0c5dfb5a61..605d7ad3b6c3d1 100644
--- a/files/zh-cn/learn/css/first_steps/how_css_works/index.html
+++ b/files/zh-cn/learn/css/first_steps/how_css_works/index.html
@@ -1,11 +1,11 @@
 ---
-title: CSS如何运行
+title: CSS 如何运行
 slug: Learn/CSS/First_steps/How_CSS_works
 tags:
   - CSS
   - DOM
   - 入门
-  - 无效的CSS代码
+  - 无效的 CSS 代码
   - 解析
 translation_of: Learn/CSS/First_steps/How_CSS_works
 original_slug: Learn/CSS/First_steps/CSS如何运行
@@ -13,30 +13,30 @@
 
      {{LearnSidebar}}
      
  {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
      
 
-
      我们已经知道了CSS是做什么的以及怎么写简单的样式这样基础的CSS，接下来我将了解到浏览器如何获取CSS、HTML和将他们加载成网页。
      
+
      我们已经知道了 CSS 是做什么的以及怎么写简单的样式这样基础的 CSS，接下来我将了解到浏览器如何获取 CSS、HTML 和将他们加载成网页。
      
 
 
    
  
   
    
    学习前提：HTML基础（学习HTML介绍），了解CSS工作的原理（学习CSS介绍和样式化盒子）HTML 基础（学习HTML 介绍），了解 CSS 工作的原理（学习CSS 介绍和样式化盒子）
   
    
   
    
    目标：
    
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    前置知识:基础计算机知识、基本软件安装、简单文件知识、HTML基础前置知识：基础计算机知识、基本软件安装、简单文件知识、HTML 基础
   
    
   
    目标:理解浏览器如何加载CSS和HTML、浏览器遇到无法解析的CSS会发生什么目标：理解浏览器如何加载 CSS 和 HTML、浏览器遇到无法解析的 CSS 会发生什么
   
    
      
 
    
 
-
    CSS究竟是怎么工作的？
    
+
    CSS 究竟是怎么工作的？
    
 
 
    当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
    
 
 
      
- 
    1. 浏览器载入HTML文件（比如从网络上获取）。
      2. 
- 
    2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
      3. 
- 
    3. 接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对如何加载JavaScript不会展开叙述。
      4. 
- 
    4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
      5. 
+ 
    5. 浏览器载入 HTML 文件（比如从网络上获取）。
      6. 
+ 
    6. 将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
      7. 
+ 
    7. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
      8. 
+ 
    8. 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
      9. 
  
    9. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
      10. 
  
    10. 网页展示在屏幕上（这一步被称为着色）。
      11. 
 
    
@@ -45,17 +45,17 @@ 
    CSS究竟是怎么工作的？
    
 
 
    
 
-
    关于DOM
    
+
    关于 DOM
    
 
-
    一个DOM有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM或DOM node）。节点由节点本身和其他DOM节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。
    
+
    一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。
    
 
-
    对于DOM的理解会很大程度上帮助你设计、调试和维护你的CSS，因为DOM是你的CSS样式和文件内容的结合。当你使用浏览器F12调试的时候你需要操作DOM以查看使用了哪些规则。
    
+
    对于 DOM 的理解会很大程度上帮助你设计、调试和维护你的 CSS，因为 DOM 是你的 CSS 样式和文件内容的结合。当你使用浏览器 F12 调试的时候你需要操作 DOM 以查看使用了哪些规则。
    
 
-
    一个真实的DOM案例
    
+
    一个真实的 DOM 案例
    
 
-
    不同于很长且枯燥的案例，这里我们通过一个HTML片段来了解HTML怎么转化成DOM
    
+
    不同于很长且枯燥的案例，这里我们通过一个 HTML 片段来了解 HTML 怎么转化成 DOM
    
 
-
    以下列HTML代码为例：
    
+
    以下列 HTML 代码为例：
    
 
 
    <p>
   Let's use:
@@ -65,7 +65,7 @@ 
    一个真实的DOM案例
    
 </p>
 
    
 
-
    在这个DOM中，<p>元素对应了父节点，它的子节点是一个text节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的Text节点的父节点。
    
+
    在这个 DOM 中，<p>元素对应了父节点，它的子节点是一个 text 节点和三个对应了<span>元素的节点，SPAN节点同时也是他们中的 Text 节点的父节点。
    
 
 
    P
 ├─ "Let's use:"
@@ -77,17 +77,17 @@ 
    一个真实的DOM案例
    
    └─ "Sheets"
 
    
 
-
    上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器：
    
+
    上图就是浏览器怎么解析之前那个 HTML 片段——它生成上图的 DOM 树形结构并将它按照如下输出到浏览器：
    
 
-
    {{EmbedLiveSample('一个真实的DOM案例', '100%', 55)}}
    
+
    {{EmbedLiveSample('一个真实的 DOM 案例', '100%', 55)}}
    
 
 
 
-
    应用CSS到DOM
    
+
    应用 CSS 到 DOM
    
 
-
    接下来让我们看看添加一些CSS到文件里加以渲染，同样的HTML代码：
    
+
    接下来让我们看看添加一些 CSS 到文件里加以渲染，同样的 HTML 代码：
    
 
 
    <p>
   Let's use:
@@ -96,32 +96,32 @@ 
    应用CSS到DOM
    
   <span>Sheets</span>
 </p>
    
 
-
    以下为CSS代码：
    
+
    以下为 CSS 代码：
    
 
 
    span {
   border: 1px solid black;
   background-color: lime;
 }
    
 
-
    浏览器会解析HTML并创造一个DOM，然后解析CSS。可以看到唯一的选择器就是span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。
    
+
    浏览器会解析 HTML 并创造一个 DOM，然后解析 CSS。可以看到唯一的选择器就是span元素选择器，浏览器处理规则会非常快！把同样的规则直接使用在三个<span>标签上，然后渲染出图像到屏幕。
    
 
 
    现在的显示如下：
    
 
-
    {{EmbedLiveSample('应用CSS到DOM', '100%', 55)}}
    
+
    {{EmbedLiveSample('应用 CSS 到 DOM', '100%', 55)}}
    
 
-
    在我们下一个模块的 Debugging CSS 文章中我们将会使用F12调试CSS的问题并且更进一步的了解浏览器如何解析CSS。
    
+
    在我们下一个模块的 Debugging CSS 文章中我们将会使用 F12 调试 CSS 的问题并且更进一步的了解浏览器如何解析 CSS。
    
 
-
    当浏览器遇到无法解析的CSS代码会发生什么
    
+
    当浏览器遇到无法解析的 CSS 代码会发生什么
    
 
-
    在之前的文章中我们提到了浏览器并不会同时实现所有的新CSS，此外很多人也不会使用最新版本的浏览器。鉴于CSS一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的CSS选择器或声明的时候会发生什么呢？
    
+
    在之前的文章中我们提到了浏览器并不会同时实现所有的新 CSS，此外很多人也不会使用最新版本的浏览器。鉴于 CSS 一直不断的开发，因此领先于浏览器可以识别的范围，那么你也许会好奇当浏览器遇到无法解析的 CSS 选择器或声明的时候会发生什么呢？
    
 
-
    答案就是浏览器什么也不会做，继续解析下一个CSS样式！
    
+
    答案就是浏览器什么也不会做，继续解析下一个 CSS 样式！
    
 
-
    如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的CSS声明。在你书写了错误的CSS代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的CSS代码的时候上述的情况同样会发生（直接忽略）。
    
+
    如果一个浏览器在解析你所书写的 CSS 规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的 CSS 声明。在你书写了错误的 CSS 代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的 CSS 代码的时候上述的情况同样会发生（直接忽略）。
    
 
-
    相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个CSS选择器。
    
+
    相似的，当浏览器遇到无法解析的选择器的时候，他会直接忽略整个选择器规则，然后解析下一个 CSS 选择器。
    
 
-
    在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的CSS代码会正常执行，只有错误的部分会被忽略。
    
+
    在下面的案例中，我使用会导致属性错误的英式拼写来书写"color"，所以我的段落没有被渲染成蓝色，而其他的 CSS 代码会正常执行，只有错误的部分会被忽略。
    
 
 
    
 
    <p> I want this text to be large, bold and blue.</p>
    
@@ -135,9 +135,9 @@ 
    当浏览器
 
 
    {{EmbedLiveSample('Skipping_example', '100%', 200)}}
    
 
-
    这样做好处多多，代表着你使用最新的CSS优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个CSS样式的时候，浏览器会加载样式表中的最后的CSS代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个CSS样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。
    
+
    这样做好处多多，代表着你使用最新的 CSS 优化的过程中浏览器遇到无法解析的规则也不会报错。当你为一个元素指定多个 CSS 样式的时候，浏览器会加载样式表中的最后的 CSS 代码进行渲染（样式表，优先级等请读者自行了解），也正因为如此，你可以为同一个元素指定多个 CSS 样式来解决有些浏览器不兼容新特性的问题（比如指定两个width）。
    
 
-
    这一特点在你想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate的缩写，CSS3新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值)作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。
    
+
    这一特点在你想使用一个很新的 CSS 特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用，举例来说，一些老的浏览器不接收calc()(calculate 的缩写，CSS3 新增，为元素指定动态宽度、长度等，注意此处的动态是计算之后得一个值) 作为一个值。我可能使用它结合像素为一个元素设置了动态宽度（如下），老式的浏览器由于无法解析忽略这一行；新式的浏览器则会把这一行解析成像素值，并且覆盖第一行指定的宽度。
    
 
 
    .box {
   width: 500px;
@@ -148,16 +148,16 @@ 
    当浏览器
 
 
    最后
    
 
-
    恭喜你完成本模块，下面的文章你将会使用你的新知识来完成覆盖样式的案例，在这个过程中测试一些CSS样式。
    
+
    恭喜你完成本模块，下面的文章你将会使用你的新知识来完成覆盖样式的案例，在这个过程中测试一些 CSS 样式。
    
 
 
    {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
    
 
 
    模块目标
    
 
 
      
- 
    1. 什么是CSS
      2. 
- 
    2. 入门CSS
      3. 
- 
    3. CSS的结构
      4. 
- 
    4. CSS如何运行
      5. 
+ 
    5. 什么是 CSS
      6. 
+ 
    6. 入门 CSS
      7. 
+ 
    7. CSS 的结构
      8. 
+ 
    8. CSS 如何运行
      9. 
  
    9. 使用新知识
      10. 
 
    
diff --git a/files/zh-cn/learn/css/first_steps/index.html b/files/zh-cn/learn/css/first_steps/index.html
index e810d66cfde62c..63d692e487f694 100644
--- a/files/zh-cn/learn/css/first_steps/index.html
+++ b/files/zh-cn/learn/css/first_steps/index.html
@@ -1,5 +1,5 @@
 ---
-title: 学习CSS 第一步
+title: 学习 CSS 第一步
 slug: Learn/CSS/First_steps
 tags:
   - 初学者
@@ -10,42 +10,42 @@
 ---
 
    {{LearnSidebar}}
    
 
-
    CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握CSS的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为HTML添加样式。
    
+
    CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。这个模块为你掌握 CSS 的过程提供了一个温和的开端，包括它如何工作的基础知识，语法是什么样的，以及如何开始使用它来为 HTML 添加样式。
    
 
 
    先决条件
    
 
 
    在开始本单元之前，您应该：
    
 
 
      
- 
    1. 基本熟悉使用计算机，并被动地使用Web（即查看它，消费内容）。
      2. 
+ 
    2. 基本熟悉使用计算机，并被动地使用 Web（即查看它，消费内容）。
      3. 
  
    3. 基本工作环境的设置详见安装基本软件，并了解如何创建和管理文件，详见处理文件。
      4. 
- 
    4. 熟悉 HTML概述 章节中提到的基本HTML知识.
      5. 
+ 
    5. 熟悉 HTML 概述 章节中提到的基本 HTML 知识。
      6. 
 
    
 
 
    
-
    注意： 如果你工作在一个无权创建自己文件的电脑/平板/其他设备上，你需要在一个在线编程工具上试验 （大多数）代码示例，如  JSBin 或者 Glitch 等。
    
+
    注意：如果你工作在一个无权创建自己文件的电脑/平板/其他设备上，你需要在一个在线编程工具上试验 （大多数）代码示例，如  JSBin 或者 Glitch 等。
    
 
    
 
 
    指南
    
 
-
    该模块包含以下文章 , 这些文章将带您了解CSS的所有基本理论，并提供测试一些技能的机会。
    
+
    该模块包含以下文章 , 这些文章将带您了解 CSS 的所有基本理论，并提供测试一些技能的机会。
    
 
 
    
  
    什么是 CSS?
    
- 
    {{Glossary("CSS")}} (Cascading Style Sheets) 使你创建外观漂亮的网页，但它如何起作用的呢？这篇文章用一个简单的语法示例解释CSS是什么，还包括有关该语言的一些关键术语。
    
+ 
    {{Glossary("CSS")}} (Cascading Style Sheets) 使你创建外观漂亮的网页，但它如何起作用的呢？这篇文章用一个简单的语法示例解释 CSS 是什么，还包括有关该语言的一些关键术语。
    
  
    CSS 入门
    
- 
    在本文中，我们将采用一个简单的HTML文档并将CSS应用于该文档，并在此过程中学习一些关于语言的实用内容。
    
- 
    如何构建CSS？ 
    
- 
    现在您已经了解了CSS是什么以及使用它的基础知识，现在是时候更深入地了解语言本身的结构。在这里，我们已经遇到了讨论过的许多概念; 如果你发现任何令人困惑的概念，你可以回到这个回顾。
    
+ 
    在本文中，我们将采用一个简单的 HTML 文档并将 CSS 应用于该文档，并在此过程中学习一些关于语言的实用内容。
    
+ 
    如何构建 CSS？ 
    
+ 
    现在您已经了解了 CSS 是什么以及使用它的基础知识，现在是时候更深入地了解语言本身的结构。在这里，我们已经遇到了讨论过的许多概念; 如果你发现任何令人困惑的概念，你可以回到这个回顾。
    
  
    CSS 如何工作
    
- 
    我们已经学习了CSS基础理论：CSS是什么以及如何编写简单的样式表。在这个课程中，我们将看看浏览器如何使用CSS和HTML并将其转换为网页。
    
+ 
    我们已经学习了 CSS 基础理论：CSS 是什么以及如何编写简单的样式表。在这个课程中，我们将看看浏览器如何使用 CSS 和 HTML 并将其转换为网页。
    
  
    用用你刚学到的知识
    
- 
    根据您在最后几课中学到的内容，您应该发现可以使用CSS格式化简单的文本文档，以便为它们添加自己的样式。本文为您提供了实现这一目标的机会。
    
+ 
    根据您在最后几课中学到的内容，您应该发现可以使用 CSS 格式化简单的文本文档，以便为它们添加自己的样式。本文为您提供了实现这一目标的机会。
    
 
    
 
 
    相关链接
    
 
 
    
- 
    中级网络识字1：CSS简介
    
- 
    一个优秀的Mozilla基础课程，探索和测试CSS模块简介中谈到的许多技能。了解在网页上设置HTML元素的样式，CSS选择器，属性和值。
    
+ 
    中级网络识字 1：CSS 简介
    
+ 
    一个优秀的 Mozilla 基础课程，探索和测试CSS模块简介中谈到的许多技能。了解在网页上设置 HTML 元素的样式，CSS 选择器，属性和值。
    
 
    
diff --git a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html
index b56299a5f51412..810ab33d4d76ce 100644
--- a/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html
+++ b/files/zh-cn/learn/css/first_steps/styling_a_biography_page/index.html
@@ -9,20 +9,20 @@
 ---
 
    {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
    
 
-
    通过在前几节课程中学到的知识，你应该学会了用CSS组织一个简单的文本文件，并且在其中添加自己的CSS样式。本节中你将实现这一功能。
    
+
    通过在前几节课程中学到的知识，你应该学会了用 CSS 组织一个简单的文本文件，并且在其中添加自己的 CSS 样式。本节中你将实现这一功能。
    
 
 
@@ -30,15 +30,15 @@
 
 
    先决条件
    
 
-
    你可以使用下面的实时编辑器，或者下载这个download the starting point在自己的编辑器中进行编辑。这是一个独立的HTML文件，在head中包含了初始CSS样式。你可以将这些CSS样式从HTML文件中移出，保存为另一个独立文件。你可以选择CodePen、jsFiddle或Glitch中的任意一个完成这些工作。
    
+
    你可以使用下面的实时编辑器，或者下载这个download the starting point在自己的编辑器中进行编辑。这是一个独立的 HTML 文件，在 head 中包含了初始 CSS 样式。你可以将这些 CSS 样式从 HTML 文件中移出，保存为另一个独立文件。你可以选择 CodePen、jsFiddle 或 Glitch 中的任意一个完成这些工作。
    
 
    注意：如果遇到困难，你可以向我求助——参见本页下面的测评或请求帮助页面。
    
 
    
 
-
    让我们来学一些CSS样式
    
+
    让我们来学一些 CSS 样式
    
 
-
    接下来的实例是一个个人主页，我们用CSS设定它的样式。以下是我用到的一些CSS属性，通过这些链接，你可以打开相应的MDN页面了解更多。
    
+
    接下来的实例是一个个人主页，我们用 CSS 设定它的样式。以下是我用到的一些 CSS 属性，通过这些链接，你可以打开相应的 MDN 页面了解更多。
      
  
    • {{cssxref("font-family")}}
      • 
@@ -49,18 +49,18 @@ 
      先决条件
      
  
    • {{cssxref("text-decoration")}}
      • 
 
    
 
-
    我使用了许多不同的选择器（样式元素），如h1和h2，也为工作职务建立了一个类别。
    
+
    我使用了许多不同的选择器（样式元素），如 h1 和 h2，也为工作职务建立了一个类别。
    
 
-
    尝试使用CSS更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过CSS 参考找到本文未提及的一些属性，尽管大胆尝试！
    
+
    尝试使用 CSS 更改这一页面的显示，试着修改已有属性的取值，删除一些规则，或添加新的样式。然后通过CSS 参考找到本文未提及的一些属性，尽管大胆尝试！
    
 
-
    举例来说，你可以:
    
+
    举例来说，你可以：
      
- 
    • 使用CSS的颜色关键词hotpink，将一级标题设定为粉红色。
      • 
- 
    • 使用CSS颜色关键词purple，为标题添加10像素宽的点线边距。
      • 
+ 
    • 使用 CSS 的颜色关键词 hotpink，将一级标题设定为粉红色。
      • 
+ 
    • 使用 CSS 颜色关键词 purple，为标题添加 10 像素宽的点线边距。
      • 
  
    • 将二级标题设为斜体。
      • 
- 
    • 用#eeeeee为联系人列表中的超链接添加背景颜色和一个5像素宽的紫色加粗边框。使用一些内边距属性，拉开正文与外边距的距离。
      • 
- 
    • 当鼠标在某些HTML元素上悬停时增加动画 (推荐改变颜色和字体)。
      • 
+ 
    • 用#eeeeee 为联系人列表中的超链接添加背景颜色和一个 5 像素宽的紫色加粗边框。使用一些内边距属性，拉开正文与外边距的距离。
      • 
+ 
    • 当鼠标在某些 HTML 元素上悬停时增加动画 (推荐改变颜色和字体)。
      • 
  
    • 设置链接在鼠标悬停时变为绿色。
      • 
 
    
 
@@ -77,12 +77,12 @@ 
    测评或请求帮助
    如果你希望测试你的页面，或者你遇到困难想要求助，你可以：
      
- 
    1. 将你的文件提交到可网络共享的编辑器，如CodePen、jsFiddle或Glitch。
      2. 
- 
    2. 在MDN论坛（MDN Discourse forum）发帖请求测评或帮助。发帖时添加“学习”的标签，这样我们能够更容易找到它。你的帖子应包括以下内容：
      3. 
+ 
    3. 将你的文件提交到可网络共享的编辑器，如 CodePen、jsFiddle 或 Glitch。
      4. 
+ 
    4. 在 MDN 论坛（MDN Discourse forum）发帖请求测评或帮助。发帖时添加“学习”的标签，这样我们能够更容易找到它。你的帖子应包括以下内容：
      5. 
 
      
- 
    • 一个描述性标题，例如“CSS的初步尝试需要测试”。
      • 
+ 
    • 一个描述性标题，例如“CSS 的初步尝试需要测试”。
      • 
  
    • 详细描述你希望我们做些什么——比如，你已经尝试过了，但是卡住了，需要帮助。
      • 
  
    • 你希望测试的例子的在网络编辑器上的链接。这是很好的做法，因为如果不让帮助你的看到你的程序，他们就很难帮助你解决程序的问题。
      • 
  
    • 你的网页的测评页面链接，这样我们就可以找到你所求助的问题。
      • 
@@ -90,16 +90,16 @@ 
      测评或请求帮助
      
 
 
      接下来是什么？
      
 
-
      恭喜你完成了第一个模块的学习。现在你应该对CSS有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块CSS构建中，我们将对一些关键区域进行深入的学习。
      
+
      恭喜你完成了第一个模块的学习。现在你应该对 CSS 有了一个大致的了解 并且能够了解在样式表中发生的大多数事情。在下一个模块CSS 构建中，我们将对一些关键区域进行深入的学习。
      
 
 
      {{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
      
 
 
      本章目录
      
 
 
        
- 
      1. 什么是CSS？
        2. 
- 
      2. CSS入门
        3. 
- 
      3. CSS是如何构成的
        4. 
- 
      4. CSS是如何工作的
        5. 
+ 
      5. 什么是 CSS？
        6. 
+ 
      6. CSS 入门
        7. 
+ 
      7. CSS 是如何构成的
        8. 
+ 
      8. CSS 是如何工作的
        9. 
  
      9. 运用你所学的知识
        10. 
 
      
diff --git a/files/zh-cn/learn/css/first_steps/what_is_css/index.html b/files/zh-cn/learn/css/first_steps/what_is_css/index.html
index ba0d52223e344c..0754ef68278119 100644
--- a/files/zh-cn/learn/css/first_steps/what_is_css/index.html
+++ b/files/zh-cn/learn/css/first_steps/what_is_css/index.html
@@ -1,5 +1,5 @@
 ---
-title: 什么是CSS?
+title: 什么是 CSS?
 slug: Learn/CSS/First_steps/What_is_CSS
 translation_of: Learn/CSS/First_steps/What_is_CSS
 ---
@@ -7,57 +7,57 @@
 
 
      {{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
      
 
-
      {{Glossary("CSS")}} (层叠样式表) 让你可以创建好看的网页，但是它具体是怎么工作的呢? 这篇文章通过一些很简单的例子，告诉我们什么是 CSS，同时还会涉及一些和 CSS 相关的专业术语。
      
+
      {{Glossary("CSS")}} (层叠样式表) 让你可以创建好看的网页，但是它具体是怎么工作的呢？ 这篇文章通过一些很简单的例子，告诉我们什么是 CSS，同时还会涉及一些和 CSS 相关的专业术语。
      
 
 
    
  
   
    
    先决条件：
    
-    
    基本熟悉使用计算机，基本工作环境的设置，基本的文件处理知识，基本的HTML知识（在HTML概述中学习）和CSS基础（查看本模块其他内容）
    
+    
    基本熟悉使用计算机，基本工作环境的设置，基本的文件处理知识，基本的 HTML 知识（在HTML 概述中学习）和 CSS 基础（查看本模块其他内容）
    
        		
   
    
   
    
    目标：
    
-    
    尝试使用一些CSS的新玩法并检验新的知识
    
+    
    尝试使用一些 CSS 的新玩法并检验新的知识
    
        		
   
    
      
 
 
 
 
 
 
 
 
 
 
 
    
-   
-   
+   
+   
-   
-   
+   
+   
    
  
   
    预备知识:基本的计算机知识，安装基础软件, 文件处理 的基础知识, 还有HTML基础 (学习 HTML概述。)预备知识：基本的计算机知识，安装基础软件, 文件处理 的基础知识，还有 HTML 基础 (学习 HTML 概述。)
   
    
   
    目标:了解什么是CSS。目标：了解什么是 CSS。
   
    
      
 
    
 
-
    在 HTML概述 模块我们学习了HTML是什么，以及如何使用它来组成页面。 浏览器能够解析这些页面。标题部分看起来会比正常文本更大，段落则会另起一行，并且相互之间会有一定间隔。链接通过下划线和不同的颜色与其他文本区分开来。这些都是浏览器的默认样式——当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性。
    
+
    在 HTML 概述 模块我们学习了 HTML 是什么，以及如何使用它来组成页面。 浏览器能够解析这些页面。标题部分看起来会比正常文本更大，段落则会另起一行，并且相互之间会有一定间隔。链接通过下划线和不同的颜色与其他文本区分开来。这些都是浏览器的默认样式——当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性。
    
 
 
    这是浏览器默认样式
    
 
 
    如果所有网站都像上图那样，互联网就会非常枯燥。但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。
    
 
-
    CSS用来干什么?
    
+
    CSS 用来干什么？
    
 
-
    前文提到过, CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。
    
+
    前文提到过，CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。
    
 
-
    一份文档是由标记语言组织起来的文本文件 —— {{Glossary("HTML")}} 是最常见的标记语言, 但你可能也听说过其他可标记语言，如 {{Glossary("SVG")}} 或 {{Glossary("XML")}}。
    
+
    一份文档是由标记语言组织起来的文本文件 —— {{Glossary("HTML")}} 是最常见的标记语言， 但你可能也听说过其他可标记语言，如 {{Glossary("SVG")}} 或 {{Glossary("XML")}}。
    
 
 
    展示一份文档给用户实际上是将文档变成用户可用的文件。{{Glossary("browser","Browsers")}}：如 {{Glossary("Mozilla Firefox","Firefox")}}，{{Glossary("Google Chrome","Chrome")}}, 或 {{Glossary("Microsoft Edge","Edge")}}，都可以将文档在电脑屏幕、投影仪或打印机等设备上进行可视化。
    
 
 
    
-
    注意: 浏览器有时候也被称为 {{Glossary("User agent","user agent")}}，大致可以当这个程序是一个存在于计算机系统中的人。 当我们讨论CSS时，浏览器是 User agent 的主要形式， 然而它并不是唯一的一个。还有其他可用的user agents — 像是那些可以把HTML和CSS文档转换为可以打印的PDF文档的软件。
    
+
    注意: 浏览器有时候也被称为 {{Glossary("User agent","user agent")}}，大致可以当这个程序是一个存在于计算机系统中的人。当我们讨论 CSS 时，浏览器是 User agent 的主要形式，然而它并不是唯一的一个。还有其他可用的 user agents — 像是那些可以把 HTML 和 CSS 文档转换为可以打印的 PDF 文档的软件。
    
 
    
 
 
    CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。查看本段内容中所给出的特定案例。
    
 
 
    CSS 语法
    
 
-
    CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”
    
+
    CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”
    
 
-
    下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果:
    
+
    下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果：
    
 
 
    h1 {
     color: red;
     font-size: 5em;
 }
    
 
-
    语法由一个 {{Glossary("CSS Selector", "选择器(selector)")}}起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素。 在这个例子中我们为一级标题（主标题{{htmlelement("h1")}}）添加样式。
    
+
    语法由一个 {{Glossary("CSS Selector", "选择器 (selector)")}}起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题{{htmlelement("h1")}}）添加样式。
    
 
-
    接着输入一对大括号{ }。 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。
    
+
    接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。
    
 
-
    冒号之前是属性，冒号之后是值。不同的 CSS {{Glossary("property/CSS","属性(properties)")}} 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。
    
+
    冒号之前是属性，冒号之后是值。不同的 CSS {{Glossary("property/CSS","属性 (properties)")}} 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值；还有 font-size 属性，它可以接收许多 size units 值。
    
 
 
    一个 CSS 样式表可以包含很多个规则。
    
 
@@ -70,33 +70,33 @@ 
    CSS 语法
    
     color: black;
 }
    
 
-
    你会发现你已经很快掌握了一些属性的值，但是属性可以接受的值远不止这些。在MDN上每个属性都有单独的页面，不论你是忘记了某个属性，还是想要知道一个属性还能接受什么其它的值，这些页面都可以帮助你。
    
+
    你会发现你已经很快掌握了一些属性的值，但是属性可以接受的值远不止这些。在 MDN 上每个属性都有单独的页面，不论你是忘记了某个属性，还是想要知道一个属性还能接受什么其它的值，这些页面都可以帮助你。
    
 
 
    
-
    注意：在MDN上的 CSS reference 页面列举了所有的 CSS属性页面（同时也包括其它的CSS特性）。 另外，当你想要寻找一个CSS特性的更多内容时，多使用你的搜索引擎来搜索 "mdn css-feature-name" 。例如，搜索 "mdn color" 和 "mdn font-size"！
    
+
    注意：在 MDN 上的 CSS reference 页面列举了所有的 CSS 属性页面（同时也包括其它的 CSS 特性）。另外，当你想要寻找一个 CSS 特性的更多内容时，多使用你的搜索引擎来搜索 "mdn css-feature-name" 。例如，搜索 "mdn color" 和 "mdn font-size"！
    
 
    
 
 
    CSS 模块
    
 
-
    你可以通过 CSS 为许多东西添加样式，CSS 由许多模块(modules) 构成。你可以在 MDN 上浏览这些模块的参考内容(MDN reference)，许多模块都被组织在自己单独的文档页面。例如，我想查找一下 MDN reference 的 Backgrounds and Borders 模块的相关内容，来了解它是用来做什么的、它还包括什么属性、它还有什么其它特性等。你也可以在 CSS Specification 查找（见下文），它定义了CSS规范 。
    
+
    你可以通过 CSS 为许多东西添加样式，CSS 由许多模块 (modules) 构成。你可以在 MDN 上浏览这些模块的参考内容 (MDN reference)，许多模块都被组织在自己单独的文档页面。例如，我想查找一下 MDN reference 的 Backgrounds and Borders 模块的相关内容，来了解它是用来做什么的、它还包括什么属性、它还有什么其它特性等。你也可以在 CSS Specification 查找（见下文），它定义了 CSS 规范。
    
 
-
    在这个阶段你不必过于担心 CSS 是如何组织的(how CSS is structured)，但是它能帮助你更好的掌握 CSS。例如，你注意到某个属性和另外一些属性的相似点，并且它们可能确实是相同的格式。
    
+
    在这个阶段你不必过于担心 CSS 是如何组织的 (how CSS is structured)，但是它能帮助你更好的掌握 CSS。例如，你注意到某个属性和另外一些属性的相似点，并且它们可能确实是相同的格式。
    
 
 
    举个具体点的例子：如上文中的 Backgrounds and Borders 模块 — 你会发现 background-color 和 border-color 这两个属性在逻辑上相通。并且它也确实如此。
    
 
 
    CSS 规范
    
 
-
    所有的标准Web技术(HTML, CSS, JavaScript等) 都被定义在一个巨大的文档中，称作 规范specifications (或者简称为 "specs")，它是由 (像是 {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} 或 {{glossary("Khronos")}}) 这些规范化组织所发布的，其中还定义了各种技术是如何工作的。
    
+
    所有的标准 Web 技术 (HTML, CSS, JavaScript 等) 都被定义在一个巨大的文档中，称作 规范 specifications (或者简称为 "specs")，它是由 (像是 {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} 或 {{glossary("Khronos")}}) 这些规范化组织所发布的，其中还定义了各种技术是如何工作的。
    
 
-
    CSS 也不例外 — 它是由W3C(万维网联盟)中的一个名叫 CSS Working Group 团体发展起来的。这个团体是由浏览器厂商和其他公司中对 CSS 感兴趣的人作为代表组成的。也有其他的人员，比如受邀专家(invited experts)，他们作为不从属于任何组织的独立声音加入团体。
    
+
    CSS 也不例外 — 它是由 W3C(万维网联盟) 中的一个名叫 CSS Working Group 团体发展起来的。这个团体是由浏览器厂商和其他公司中对 CSS 感兴趣的人作为代表组成的。也有其他的人员，比如受邀专家 (invited experts)，他们作为不从属于任何组织的独立声音加入团体。
    
 
-
    新的 CSS 特性被开发出来，或是因为某个浏览器热衷于开发新功能，或是因为Web设计人员与开发者要求增加一个新特性，又或是 CSS Working Group 内部的讨论决定。CSS 始终在发展，并伴随着新的特性。然而，有一件事情从始至终都未改变，那就是不让新的改变破坏旧的网站，即使是2000年建立的网站，如今也能正常访问！
    
+
    新的 CSS 特性被开发出来，或是因为某个浏览器热衷于开发新功能，或是因为 Web 设计人员与开发者要求增加一个新特性，又或是 CSS Working Group 内部的讨论决定。CSS 始终在发展，并伴随着新的特性。然而，有一件事情从始至终都未改变，那就是不让新的改变破坏旧的网站，即使是 2000 年建立的网站，如今也能正常访问！
    
 
-
    作为一个 CSS 新手，你会发现阅读 CSS 规范 中的内容非常吃力 — 它旨在为工程师在用户代理(user agents)中实现对 CSS 各种特性的支持，而不是作为一本为Web开发者理解 CSS 内容的教程。即使是有经验的开发者，也更倾向于使用 MDN 文档或者其它教程。但是，知晓它的存在，理解 CSS、规范 和 浏览器支持（见下文） 之间的关系是很有价值的。
    
+
    作为一个 CSS 新手，你会发现阅读 CSS 规范 中的内容非常吃力 — 它旨在为工程师在用户代理 (user agents) 中实现对 CSS 各种特性的支持，而不是作为一本为 Web 开发者理解 CSS 内容的教程。即使是有经验的开发者，也更倾向于使用 MDN 文档或者其它教程。但是，知晓它的存在，理解 CSS、规范 和 浏览器支持（见下文）之间的关系是很有价值的。
    
 
 
    浏览器支持
    
 
-
    当一个浏览器支持 CSS 后，我们就可以用它来进行Web开发了。这意味着我们写在 CSS 文件中的代码可以被指令执行，展示到荧幕中。在 CSS 如何工作 一节中我们会学习到更多的相关知识。但是让所有的浏览器都同时支持一个 CSS 新特性是不现实的，通常都会一个空档期 — 一些浏览器已经支持而另一些仍未支持。因此，查看特性的实现状态(implementation status)是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态，你可以通过这种方法来查看你是否可以去使用它。
    
+
    当一个浏览器支持 CSS 后，我们就可以用它来进行 Web 开发了。这意味着我们写在 CSS 文件中的代码可以被指令执行，展示到荧幕中。在 CSS 如何工作 一节中我们会学习到更多的相关知识。但是让所有的浏览器都同时支持一个 CSS 新特性是不现实的，通常都会一个空档期 — 一些浏览器已经支持而另一些仍未支持。因此，查看特性的实现状态 (implementation status) 是非常有用的。在 MDN 上的每个属性的页面中都标有它们对应的状态，你可以通过这种方法来查看你是否可以去使用它。
    
 
 
    以下是 CSS font-family 属性的兼容数据表。
    
 
@@ -113,7 +113,7 @@ 
    本章目录
    
 
      
  
    1. 什么是 CSS?
      2. 
  
    2. CSS 入门
      3. 
- 
    3. 如何构建CSS
      4. 
+ 
    4. 如何构建 CSS
      5. 
  
    5. CSS 如何工作
      6. 
  
    6. 用用你刚学到的知识
      7. 
 
    
diff --git a/files/zh-cn/learn/css/howto/css_faq/index.html b/files/zh-cn/learn/css/howto/css_faq/index.html
index 0b16993b010d1d..3ae70f839f846c 100644
--- a/files/zh-cn/learn/css/howto/css_faq/index.html
+++ b/files/zh-cn/learn/css/howto/css_faq/index.html
@@ -4,20 +4,20 @@
 translation_of: Learn/CSS/Howto/CSS_FAQ
 original_slug: Web/CSS/Common_CSS_Questions
 ---
-
    为什么我有效的CSS没有正确的渲染？
    
+
    为什么我有效的 CSS 没有正确的渲染？
    
 
-
    浏览器使用DOCTYPE声明来选择是否使用更符合Web标准或兼容旧浏览器的bug的模式。在你的HTML的开始使用一个正确的和现代的DOCTYPE声明将改善浏览器标准执行。
    
+
    浏览器使用 DOCTYPE 声明来选择是否使用更符合 Web 标准或兼容旧浏览器的 bug 的模式。在你的 HTML 的开始使用一个正确的和现代的 DOCTYPE 声明将改善浏览器标准执行。
    
 
 
    现代浏览器主要有两种渲染模式：
    
 
 
      
- 
    • 怪异模式： 又称向后兼容模式,，允许将传统网页渲染为作者意图。 旧浏览器使用的非标准渲染规则。 不完整的、不正确的、缺少DOCTYPE声明或已知的DOCTYPE声明中普遍使用2001年以前的文件将在怪异模式中呈现。
      • 
- 
    • 标准模式：浏览器试图严格遵守W3C标准。新HTML网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代DOCTYPE声明的页面将被用标准模式呈现。
      • 
+ 
    • 怪异模式： 又称向后兼容模式，，允许将传统网页渲染为作者意图。 旧浏览器使用的非标准渲染规则。 不完整的、不正确的、缺少 DOCTYPE 声明或已知的 DOCTYPE 声明中普遍使用 2001 年以前的文件将在怪异模式中呈现。
      • 
+ 
    • 标准模式：浏览器试图严格遵守 W3C 标准。新 HTML 网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代 DOCTYPE 声明的页面将被用标准模式呈现。
      • 
 
    
 
-
    基于Gecko的浏览器， 有三分之一 Almost Standards Mode， 只有一些小怪癖。
    
+
    基于 Gecko 的浏览器， 有三分之一 Almost Standards Mode，只有一些小怪癖。
    
 
-
    这是最常用的触发标准模式或准标准模式的DOCTYPE声明列表：
    
+
    这是最常用的触发标准模式或准标准模式的 DOCTYPE 声明列表：
    
 
 
    <!DOCTYPE html> /* 这一行是 HTML5 的 doctype 声明。，使用该声明会使现代浏览器使用
                    HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
@@ -35,36 +35,36 @@ 
    为什么我有效的C
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
    
 
-
    为什么我有效的css完全没有被渲染？ 
    
+
    为什么我有效的 css 完全没有被渲染？ 
    
 
-
    为了使浏览器渲染样式文件，CSS样式表必须用text/css的MIME。如果Web服务器不服务于这种类型，则CSS也不会被应用。
    
+
    为了使浏览器渲染样式文件，CSS 样式表必须用 text/css 的 MIME。如果 Web 服务器不服务于这种类型，则 CSS 也不会被应用。
    
 
-
    id和class有什么不同？
    
+
    id 和 class 有什么不同？
    
 
 
    HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。class属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。
    
  
    
- 当你想给一个特定元素或块应用样式规则时就使用ID选择符。此样式将只用于与该特定id匹配的元素。
    
+ 当你想给一个特定元素或块应用样式规则时就使用 ID 选择符。此样式将只用于与该特定 id 匹配的元素。
    
 
 

    
- 当你想要将样式规则应用于多个块和元素时，你应该使用class选择符。
    
+ 当你想要将样式规则应用于多个块和元素时，你应该使用 class 选择符。
    
 
-
    较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留id作为特定用途 (比如链接label标签和form元素或者为语义上唯一的元素应用样式)。
    
+
    较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留 id 作为特定用途 (比如链接 label 标签和 form 元素或者为语义上唯一的元素应用样式)。
    
 
 
    查看 CSS selectors
    
 
 
    我如何还原属性的默认值？
    
 
-
    最初CSS没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。
    
+
    最初 CSS 没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。
    
 
-
    与CSS2相比，已经发生了改变。 关键字 initial 现在是一个有效的CSS属性。它将给定的CSS属性值重置为默认值。
    
+
    与 CSS2 相比，已经发生了改变。 关键字 initial 现在是一个有效的 CSS 属性。它将给定的 CSS 属性值重置为默认值。
    
 
-
    我如何才可以从一个样式中衍生出另一种样式?
    
+
    我如何才可以从一个样式中衍生出另一种样式？
    
 
 
    CSS 不允许这样做。(See Eric Meyer's note about the Working Group's stance). 但是，将多个类分配给单个元素，可以提供相同的效果。
    
 
 
    我该如何给一个元素分配多个类？
    
 
-
    HTML元素可以通过列出的类属性，用空格分开它们。
    
+
    HTML 元素可以通过列出的类属性，用空格分开它们。
    
 
 
    <style type="text/css">
 .news { background: black; color: white; }
@@ -76,13 +76,13 @@ 
    我该如
 </div>
 
    
 
-
    如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据CSS声明的顺序。在class属性类的顺序是不相关的。
    
+
    如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据 CSS 声明的顺序。在 class 属性类的顺序是不相关的。
    
 
 
    为什么我的样式规则不能正确地工作？
    
 
 
    在语法上正确的样式规则可能在某些情况下不适用。你可以使用 DOM Inspector's CSS Style Rules 调试这类问题。 下面列出了最常见的忽略样式规则的实例：
    
 
-
    HTML元素层次结构
    
+
    HTML 元素层次结构
    
 
 
    The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.
    
 
@@ -177,8 +177,8 @@ 
    z-index 属性与定位有什么关系？
    
 
-
    z-index属性指定了元素的栈序。
    
+
    z-index 属性指定了元素的栈序。
    
 
 
    有较高z-index/栈序的元素总是在有着较低z-index/栈序的元素之前。
    
 
-
    z-index只会在有着指定position (position:absolute, position:relative, or position:fixed)的元素上工作。
    
+
    z-index 只会在有着指定 position (position:absolute, position:relative, or position:fixed) 的元素上工作。
    
diff --git a/files/zh-cn/learn/css/howto/generated_content/index.md b/files/zh-cn/learn/css/howto/generated_content/index.md
index 3d00daedf4620e..8479e9208a8d6b 100644
--- a/files/zh-cn/learn/css/howto/generated_content/index.md
+++ b/files/zh-cn/learn/css/howto/generated_content/index.md
@@ -52,7 +52,7 @@ A text where I need to something
 
 样式表默认使用 UTF-8 字符集。但也可以通过 link 属性或样式表以及其它方式指定其它字符集。参见 CSS 规范中的 [4.4 CSS style sheet representation](https://www.w3.org/TR/CSS21/syndata.html#q23)。
 
-还可以通过转义机制（通过反斜杠转义）指定单个字符。比如，“\265B” 是国际象棋黑皇后的符号 ♛。详细内容请参见 [Referring to characters not represented in a character encoding](https://www.w3.org/TR/CSS21/syndata.html#q24) 和 CSS 规范中的 [Characters and case](https://www.w3.org/TR/CSS21/syndata.html#q6)。
+还可以通过转义机制（通过反斜杠转义）指定单个字符。比如，“\265B”是国际象棋黑皇后的符号 ♛。详细内容请参见 [Referring to characters not represented in a character encoding](https://www.w3.org/TR/CSS21/syndata.html#q24) 和 CSS 规范中的 [Characters and case](https://www.w3.org/TR/CSS21/syndata.html#q6)。
 
 ### 图片内容
 
diff --git a/files/zh-cn/learn/css/howto/index.html b/files/zh-cn/learn/css/howto/index.html
index 9f91aff44178a8..89c1627d70f267 100644
--- a/files/zh-cn/learn/css/howto/index.html
+++ b/files/zh-cn/learn/css/howto/index.html
@@ -1,9 +1,9 @@
 ---
-title: 解决常见的css问题
+title: 解决常见的 css 问题
 slug: Learn/CSS/Howto
 translation_of: Learn/CSS/Howto
 ---
-
    以下链接提供了一些你在使用CSS时可能遇到的常见问题的解决方案。
    
+
    以下链接提供了一些你在使用 CSS 时可能遇到的常见问题的解决方案。
    
 
 
    主要使用事项
    
 
@@ -12,16 +12,16 @@ 
    主要使用事项
    
 
    基础
    
 
 
 
 
    样式和内容
    
@@ -38,16 +38,16 @@ 
    样式和内容
    
 
    盒子和布局
    
 
 
 
    
@@ -55,26 +55,26 @@ 
    盒子和布局
    
 
 
    罕见问题与进阶技巧
    
 
-
    CSS允许一些高级的设计技巧。这些文章可以帮助您解决一些更复杂的使用案例。
    
+
    CSS 允许一些高级的设计技巧。这些文章可以帮助您解决一些更复杂的使用案例。
    
 
 
    通用
    
 
 
 
 
    进阶效果
    
 
 
 
 
    布局
    
 
 
diff --git a/files/zh-cn/learn/css/index.html b/files/zh-cn/learn/css/index.html
index aa3602603b7ab9..3525c43d78b018 100644
--- a/files/zh-cn/learn/css/index.html
+++ b/files/zh-cn/learn/css/index.html
@@ -16,23 +16,23 @@
 ---
 
    {{LearnSidebar}}
    
 
-
    层叠样式表 — 也就是{{glossary("CSS")}} — 是你在{{glossary("HTML")}}之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
    
+
    层叠样式表 — 也就是{{glossary("CSS")}} — 是你在{{glossary("HTML")}}之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，您可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
    
 
 
    学习路径
    
 
-
    在尝试学习 CSS 之前，您应该了解 HTML 的基础知识。建议你先学习 HTML 简介模块 — 这一模块主要介绍了以下内容:
    
+
    在尝试学习 CSS 之前，您应该了解 HTML 的基础知识。建议你先学习 HTML 简介模块 — 这一模块主要介绍了以下内容：
    
 
 
 
-
    我们建议你同时学习 HTML 和 CSS，在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣，并且不了解 HTML 就不能真正掌握CSS。
    
+
    我们建议你同时学习 HTML 和 CSS，在这两个主题之间来回切换。因为有着 CSS 的 HTML 更加有趣，并且不了解 HTML 就不能真正掌握 CSS。
    
 
-
    在学习本章节之前，你应该会使用计算机，熟练的使用网页操作（哪怕只是盯着屏幕看）。你应该配置好一个基本的操作环境（见安装基本软件），知道如何创建和管理文件（见处理文件）—这两个都是 Web入门 的初学者模块的一部分。
    
+
    在学习本章节之前，你应该会使用计算机，熟练的使用网页操作（哪怕只是盯着屏幕看）。你应该配置好一个基本的操作环境（见安装基本软件），知道如何创建和管理文件（见处理文件）—这两个都是 Web 入门 的初学者模块的一部分。
    
 
-
    我们建议你在学习本章内容前，先完成 Web入门，尽管这不是必须的；CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有，而且 CSS 模块涵盖了更多的细节。
    
+
    我们建议你在学习本章内容前，先完成 Web 入门，尽管这不是必须的；CSS 基础文章中涵盖的大部分内容在 CSS 模块简介中也有，而且 CSS 模块涵盖了更多的细节。
    
 
 
    模块
    
 
@@ -40,25 +40,25 @@ 
    模块
    
 
 
    
  
    CSS 初步
    
- 
    这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。
    
+ 
    这个模块介绍了使用 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将 CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。
    
  
    构建 CSS 块
    
- 
    本模块承接CSS 初步，进行进一步的学习——既然你已经熟悉了CSS的语言和语法，有了一些使用CSS的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。
    
- 
    这样做的目的是，在继续深入到更加具体的规则，例如样式化文本和CSS布局前，为你提供一个用于编写堪用的CSS的工具箱，帮你理解所有必要的理论。
    
+ 
    本模块承接CSS 初步，进行进一步的学习——既然你已经熟悉了 CSS 的语言和语法，有了一些使用 CSS 的基本经验，是时候再深入一些了。本模块涉及了层叠与继承、可用的所有种类的选择器、单位、尺寸、样式化背景和边框、调试，还有更多。
    
+ 
    这样做的目的是，在继续深入到更加具体的规则，例如样式化文本和CSS 布局前，为你提供一个用于编写堪用的 CSS 的工具箱，帮你理解所有必要的理论。
    
  
    样式化文本
    
  
    这个模块介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。
    
  
    CSS 布局
    
- 
    到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。
    
+ 
    到目前为止，我们已经学习了 CSS 基础知识、如何设置文本样式、如何设计并操作内容所在的框。现在应该考虑如何把你的框以合适的位置放置在视口内和其他框旁边了。我们已经学习了在深入 CSS 布局之前需要学会的必要知识，下一步我们通过学习设置 display 属性、使用新的布局工具如弹性盒（flexbox），CSS 网格和定位、以及你仍想知道的一些传统技术，来深入学习 CSS 布局。
    
 
    
 
-
    解决常见的CSS问题
    
+
    解决常见的 CSS 问题
    
 
-
    使用CSS解决常见问题解释了怎样使用CSS解决创建一个网页时常遇到的问题。
    
+
    使用 CSS 解决常见问题解释了怎样使用 CSS 解决创建一个网页时常遇到的问题。
    
 
-
    从这里开始，你大致就能在HTML元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是CSS最基础的部分，也没有很多做不到的事情。学习CSS最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！
    
+
    从这里开始，你大致就能在 HTML 元素和它们的背景上应用颜色、改变形状尺寸和元素的位置、向元素上添加并定义边框。不过一旦你牢固掌握了即便是 CSS 最基础的部分，也没有很多做不到的事情。学习 CSS 最棒的一件事情就是，一旦你知道了基本的原理，即使你实际上不知道怎么做，你通常还是会很清楚什么能做到而什么不能做到！
    
 
 
    参阅
    
 
 
    
  
    CSS on MDN
    
- 
    MDN 上css文档的主要入口，包括详细的参考到高级的教程一系列内容。
    
+ 
    MDN 上 css 文档的主要入口，包括详细的参考到高级的教程一系列内容。
    
 
    
diff --git a/files/zh-cn/learn/css/styling_text/fundamentals/index.html b/files/zh-cn/learn/css/styling_text/fundamentals/index.html
index a8df2e9760b0ef..d76a0c857c75cc 100644
--- a/files/zh-cn/learn/css/styling_text/fundamentals/index.html
+++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html
@@ -23,13 +23,13 @@
    基本的电脑操作，HTML 基础 (学习 Introduction to HTML)，CSS 基础 (学习 Introduction to CSS).
   
   
-   目的:
+   目的：
    了解在网页上设计文本所需的基本属性和技术。
   
  
 
 
-
    CSS中的文字样式涉及什么？
    
+
    CSS 中的文字样式涉及什么？
    
 
 
    正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 {{htmlelement("br")}} 元素。
    
 
@@ -69,7 +69,7 @@ 
    颜色
    
 
 
    {{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。
    
 
-
    color 也可以接受任何合法的 CSS 颜色单位, 比如:
    
+
    color 也可以接受任何合法的 CSS 颜色单位, 比如：
    
 
 
    p {
   color: red;
@@ -94,7 +94,7 @@ 
    颜色
    
 
 
    字体种类
    
 
-
    要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font. 下面是一个简单的例子:
    
+
    要在你的文本上设置一个不同的字体，你可以使用 {{cssxref("font-family")}}  属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font. 下面是一个简单的例子：
    
 
 
    p {
   font-family: arial;
@@ -106,9 +106,9 @@ 
    网页安全字体
    
 
 
    说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。
    
 
-
    大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的Linux发行版，Android和iOS版本）中都可用。
    
+
    大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的 Linux 发行版，Android 和 iOS 版本）中都可用。
    
 
-
    实际的Web安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在90年代末和21世纪初期的倡议Core fonts for the Web )：
    
+
    实际的 Web 安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在 90 年代末和 21 世纪初期的倡议Core fonts for the Web )：
    
 
 
@@ -122,12 +122,12 @@ 
    网页安全字体
    
-   
+   
-   
+   
@@ -137,7 +137,7 @@ 
    网页安全字体
    
-   
+   
@@ -177,7 +177,7 @@ 
    默认字体
    
-   
+   
@@ -213,7 +213,7 @@ 
    字体栈
    在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。
    
 
-
    在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是Time New Roman - 这对于 sans-serif 字体是不利的！
    
+
    在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是 Time New Roman - 这对于 sans-serif 字体是不利的！
    
 
    注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。
    
@@ -251,8 +251,8 @@ 
    字体大小
    
 
 
      
  
    • px (像素): 将像素的值赋予给你的文本。这是一个绝对单位， 它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。
      • 
- 
    • em: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。
      • 
- 
    • rem: 这个单位的效果和 em 差不多，除了 1rem 等于 HTML 中的根元素的字体大小， (i.e. {{htmlelement("html")}}) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， rem 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用em 或 px, 或者是 {{glossary("polyfill")}} 就像 REM-unit-polyfill. （这个单位在“CSS的值和单位”一节也有讲解）
      • 
+ 
    • em: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手，但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢？当你习惯这样做时，那么就会变得很自然，你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。
      • 
+ 
    • rem: 这个单位的效果和 em 差不多，除了 1rem 等于 HTML 中的根元素的字体大小， (i.e. {{htmlelement("html")}}) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， rem 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用em 或 px, 或者是 {{glossary("polyfill")}} 就像 REM-unit-polyfill. （这个单位在“CSS 的值和单位”一节也有讲解）
      • 
 
    
 
 
    元素的 font-size 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——{{htmlelement("html")}}开始，浏览器的 font-size 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 {{htmlelement("h1")}} 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 {{htmlelement("article")}} 元素在你的页面上，然后设置它的 font-size 为 1.5em (通过计算，可以得到大小为 24px)，然后想让 <article> 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。
    
@@ -266,9 +266,9 @@ 
    字体大小
    
 
 
    一个简单的 size 示例
    
 
-
    当调整你的文本大小时，将文档(document)的基础  font-size 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。
    
+
    当调整你的文本大小时，将文档 (document) 的基础  font-size 设置为 10px 往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意，这样它们就可以很容易被找到。
    
 
-
    我们的新结果是这样的:
    
+
    我们的新结果是这样的：
    
 
 
    
  
   
    
    Arial
    sans-serif通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使 Arial 更广泛地可用。
   
    
   
    
    Courier New
    monospace某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫 Courier。使用 Courier New 作为 Courier 的首选替代方案，被认为是最佳做法。
   
    
   
    
    Georgia
   
    
    Times New Roman
    serif某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用 Times 作为 Times New Roman 的首选替代方案，被认为是最佳做法。
   
    
   
    
    Trebuchet MS
  
    
   
    
    serif有衬线的字体 （衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）有衬线的字体（衬线一词是指字体笔画尾端的小装饰，存在于某些印刷体字体中）
    My big red elephant
   
    
   
    
 
 
 
 
    
-   
+   
-   
+   
@@ -39,11 +39,11 @@ 
    让我们来看一些链接
    链接状态
    
 
-
    第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:
    
+
    第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式：
      
  
    • Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用{{cssxref(":link")}} 伪类来应用样式。
      • 
- 
    • Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 {{cssxref(":visited")}} 伪类来应用样式。
      • 
+ 
    • Visited: 这个链接已经被访问过了 (存在于浏览器的历史纪录), 它可以使用 {{cssxref(":visited")}} 伪类来应用样式。
      • 
  
    • Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 {{cssxref(":hover")}} 伪类来应用样式。
      • 
  
    • Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab  移动到这个链接的时候，或者使用编程的方法来选中这个链接 {{domxref("HTMLElement.focus()")}}) 它可以使用 {{cssxref(":focus")}} 伪类来应用样式。
      • 
  
    • Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 {{cssxref(":active")}} 伪类来应用样式。
      • 
@@ -63,22 +63,22 @@ 
      默认的样式
      
 
 
      {{ EmbedLiveSample('默认的样式', '100%', 120) }}
      
 
-
      当你观察默认样式的时候，你也许会注意到一些东西:
      
+
      当你观察默认样式的时候，你也许会注意到一些东西：
      
 
 
        
  
      • 链接具有下划线。
        • 
  
      • 未访问过的 (Unvisited) 的链接是蓝色的。
        • 
- 
      • 访问过的 (Visited) 的链接是紫色的.
        • 
+ 
      • 访问过的 (Visited) 的链接是紫色的。
        • 
  
      • 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
        • 
- 
      • 选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用Full Keyboard Access: All controls 选项，然后再按下 Ctrl + F7 ，这样就可以起作用)
        • 
+ 
      • 选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上，你可能需要使用Full Keyboard Access: All controls 选项，然后再按下 Ctrl + F7 ，这样就可以起作用)
        • 
  
      • 激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)
        • 
 
      
 
-
      有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：
      
+
      有趣的是，这些默认的样式与 20 世纪 90 年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：
      
 
 
        
  
      • 为链接使用下划线，但是不要在其他内容上也用下划线，以作区分。如果你不想要带有下划线的链接，那你至少要用其他方法来高亮突出链接。
        • 
- 
      • 当用户悬停或选择 (hover 或者 focused) 的时候，使链接有相应的变化，并且在链接被激活(active) 的时候，变化会有一些不同。可以使用以下CSS属性关闭/更改默认样式：
        • 
+ 
      • 当用户悬停或选择 (hover 或者 focused) 的时候，使链接有相应的变化，并且在链接被激活 (active) 的时候，变化会有一些不同。可以使用以下 CSS 属性关闭/更改默认样式：
        • 
  
      • {{cssxref("color")}} 文字的颜色
        • 
  
      • {{cssxref("cursor")}} 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。
        • 
  
      • {{cssxref("outline")}} 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。
        • 
@@ -163,7 +163,7 @@ 
        将样式应用到一些链接
        
   color: #CDFEAA;
 }
 
-
        这里还提供了一些示例HTML，供你应用CSS：
        
+
        这里还提供了一些示例 HTML，供你应用 CSS：
        
 
 
        <p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
 Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
@@ -173,22 +173,22 @@ 
        将样式应用到一些链接
        
 
 
        {{ EmbedLiveSample('将样式应用到一些链接', '100%', 150) }}
        
 
-
        那么我们在这里做了什么? 这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：
        
+
        那么我们在这里做了什么？这个看起来肯定和默认的样式不同，但仍然提供了一个熟悉的体验，好让用户知道发生了什么：
        
 
 
          
  
        • 第一和第二条规则和本次讨论关系不大。
          • 
- 
        • 第三个规则使用了 a 选择器，取消了默认的文本下划线和链接被选中（focus）时的轮廓 （outline）（不同浏览器的默认行为可能不同），并为每个链接添加了少量的内边距（padding），所有这一切将在之后变得明确。
          • 
+ 
        • 第三个规则使用了 a 选择器，取消了默认的文本下划线和链接被选中（focus）时的轮廓（outline）（不同浏览器的默认行为可能不同），并为每个链接添加了少量的内边距（padding），所有这一切将在之后变得明确。
          • 
  
        • 接着，我们使用a:link和a:visited选择器来设置未访问（unvisited）链接和访问过（visited）的链接的一点颜色上的变化，然后就能分辨开来了。
          • 
  
        • 下面两条规则使用 a:focus 和 a:hover 来设置选中（focus）和悬停（hover）的链接为不同的背景颜色，再加上一个下划线，使链接更加突出。这里有两点需要注意：
   
            
-   
          • 下划线是使用 {{cssxref("border-bottom")}} 创造的, 而不是 {{cssxref("text-decoration")}}，有一些人喜欢这样，因为前者比后者有更好的样式选项， 并且绘制的位置会稍微低一点，所以不会穿过字母 (比如 字母 g 和 y 底部).
            • 
+   
          • 下划线是使用 {{cssxref("border-bottom")}} 创造的，而不是 {{cssxref("text-decoration")}}，有一些人喜欢这样，因为前者比后者有更好的样式选项，并且绘制的位置会稍微低一点，所以不会穿过字母 (比如 字母 g 和 y 底部).
            • 
    
          • {{cssxref("border-bottom")}}的值被设置为1px solid，没有指定颜色。这样做可以使边框采用和元素文本一样的颜色，这在这样的情况下是很有用的，因为链接的每种状态下，文本是不同的颜色。
            • 
   
          
  
          • 
- 
        • 最后, a:active 用来给链接一个不同的配色方案，当链接被激活 (activated) 时，让链接被激活的时候更加明显。
          • 
+ 
        • 最后，a:active 用来给链接一个不同的配色方案，当链接被激活 (activated) 时，让链接被激活的时候更加明显。
          • 
 
        
 
-
        动手练习: 为你的链接添加样式
        
+
        动手练习：为你的链接添加样式
        
 
 
        在这个动手练习部分，我们希望你使用我们的空规则集，然后添加你自定义的规则，从而使链接看上去比较酷。发挥你的想象力，大胆地做吧。我们相信你可以想出一些更酷的东西，就像我们上面的例子一样。
        
 
@@ -276,9 +276,9 @@ 
        Playable code
        
 
 
        在链接中包含图标
        
 
-
        常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如, 我们会使用icons8.com上的这个优秀的范例。
        
+
        常见的做法是在链接中包含图标，使链接提供更多关于链接指向的内容的信息。让我们来看一个简单的例子，例子中为一个外部链接 (链接指向的不是本站，而是外部站点)。这样的图标通常看起来像一个指向盒子的小箭头，比如，我们会使用icons8.com 上的这个优秀的范例。
        
 
-
        让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML ：
        
+
        让我们来看一些能给我们这个效果的 HTML 和 CSS。先是一些简单的等待你样式化的 HTML：
        
 
 
        <p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
 look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
@@ -326,13 +326,13 @@ 
        在链接中包含图标
        
 
 
        {{ EmbedLiveSample('在链接中包含图标', '100%', 150) }}
        
 
-
        那么这里发生了什么? 我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为100%，使其出现在内容的右边，距离上方是0px。
        
+
        那么这里发生了什么？我们将跳过大部分的 CSS，因为那些只是你之前看过的相同的信息。最后一条规则很有趣，这里，我们在外部链接上插入了一个自定义背景图片，这和上篇自定义列表项目符号文章的做法很像。这次，我们使用了 {{cssxref("background")}} 简写，而不是分别使用多个属性。我们设置了我们想要插入的图片的路径，指定了 no-repeat ，这样我们只插入了一次图片，然后指定位置为 100%，使其出现在内容的右边，距离上方是 0px。
        
 
-
        我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于IE 9及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。
        
+
        我们也使用 {{cssxref("background-size")}} 来指定要显示的背景图像的大小，为了满足响应式网站设计的需要，在图标更大，需要再重新调整它的大小的时候，这样做是很有帮助的。但是，这仅适用于 IE 9 及更高版本。所以你如果需要支持那些老的浏览器，只能调整图像的原始大小，然后插入。
        
 
 
        最后，我们在链接上设置 {{cssxref("padding-right")}} ，为背景图片留出空间，这样就不会让它和文本重叠了。
        
 
-
        最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。
        
+
        最后的问题，我们是如何只选中了外部链接的？如果你正确编写你的HTML 链接 ，你应该只会在外部链接上使用绝对 URL，如果链接是链接你的站点的其他部分，那么使用相对链接是更加高效的。因此“http”文本应该只出现在外部链接上，为此我们可以使用一个属性选择器——a[href*="http"] ——选中 {{htmlelement("a")}} 元素，但是这样只会选中那些拥有 {{htmlattrxref("href","a")}} 属性，且属性的值包含 "http" 的 {{htmlelement("a")}}的元素。
        
 
 
        就这样啦，尝试重新审视上面的动手练习部分，尝试这种新技术！
        
 
@@ -400,7 +400,7 @@ 
        样式化链接为按钮
        
 
 
        {{ EmbedLiveSample('样式化链接为按钮', '100%', 100) }}
        
 
-
        让我们来解释一下这里发生了什么，主要是几个有趣的部分:
        
+
        让我们来解释一下这里发生了什么，主要是几个有趣的部分：
        
 
 
          
  
        • 我们的第二条规则删除了 {{htmlelement("ul")}} 元素的默认的 {{cssxref("padding")}}，然后设置了它的宽度是外部容器  {{htmlelement("body")}} (在这次条件下) 的 100% 。
          • 
@@ -409,8 +409,8 @@ 
          样式化链接为按钮
          
   
            
    
          • 和前面的例子一样，我们首先关掉了 {{cssxref("text-decoration")}} 和 {{cssxref("outline")}}，我们不希望这些破坏我们链接的样子。
            • 
    
          • 接着，我们设置 {{cssxref("display")}} 为 inline-block ，{{htmlelement("a")}} 元素默认为内联元素，而且我们不希望它们像值为 block 时一样，线条超出自己的内容，我们确实想要控制它们的大小inline-block 允许我们这样做。
            • 
-   
          • 接着是尺寸的设置! 我们要填满整个 {{htmlelement("ul")}} 的宽度，为按钮之间留一些间距 (margin)  (但不是右边边缘的间距)，我们有 5 个按钮需要容纳，所以它们的大小应该一样。为了做到这一点，我们设置 {{cssxref("width")}} 为 19.5%，然后 {{cssxref("margin-right")}} 为 0.625%. 你会注意到所有宽度加起来是 100.625%, 这样会让最后一个按钮溢出 <ul> ，然后显示到下一行中。但是，我们使用了下一条规则让它恢复到了 100%，这条规则选中了列表中的最后一个 <a>元素，然后删除了它的间距 (margin)。完成!
            • 
-   
          • 最后三条声明就比较简单了，主要是为链接各个状态添加了颜色。我们居中了每个链接中的文本，设置 {{cssxref("line-height")}} 为 3， 让按钮有一些高度 (这也具有垂直居中文本的优点)，并设置文本的颜色为黑色。
            • 
+   
          • 接着是尺寸的设置！我们要填满整个 {{htmlelement("ul")}} 的宽度，为按钮之间留一些间距 (margin)  (但不是右边边缘的间距)，我们有 5 个按钮需要容纳，所以它们的大小应该一样。为了做到这一点，我们设置 {{cssxref("width")}} 为 19.5%，然后 {{cssxref("margin-right")}} 为 0.625%. 你会注意到所有宽度加起来是 100.625%, 这样会让最后一个按钮溢出 <ul> ，然后显示到下一行中。但是，我们使用了下一条规则让它恢复到了 100%，这条规则选中了列表中的最后一个 <a>元素，然后删除了它的间距 (margin)。完成！
            • 
+   
          • 最后三条声明就比较简单了，主要是为链接各个状态添加了颜色。我们居中了每个链接中的文本，设置 {{cssxref("line-height")}} 为 3，让按钮有一些高度 (这也具有垂直居中文本的优点)，并设置文本的颜色为黑色。
            • 
   
          
  
 
        
diff --git a/files/zh-cn/learn/css/styling_text/styling_lists/index.html b/files/zh-cn/learn/css/styling_text/styling_lists/index.html
index 7177ba30595c79..899da47612bffd 100644
--- a/files/zh-cn/learn/css/styling_text/styling_lists/index.html
+++ b/files/zh-cn/learn/css/styling_text/styling_lists/index.html
@@ -8,16 +8,16 @@
 
 
        {{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
        
 
-
        List列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊CSS属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。
        
+
        List 列表 大体上和其他文本一样，但是仍有一些你需要知道的特殊 CSS 属性，和一些可供参考的最佳实践，这篇文章将阐述这一切。
        
 
 
    
  
   
    学习本章节的前提:学习本章节的前提：
    基本的计算机使用能力，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习 Introduction to CSS), CSS text and font fundamentals.
   
    
   
    目的:目的：
    学习如何将样式应用到链接状态，以及如何使用链接实现常见的 UI 功能，比如导航菜单。
   
    
      
 
 
 
 
    
-   
+   
-   
+   
@@ -27,7 +27,7 @@ 
    一个简单的例子
    首先，让我们看一个简单的例子。文章中我们将看到无序，有序和描述列表——它们都具有相似的样式特性，而某些特性却又各不相同。Github上有未加载样式的例子（也可以查看源码。）
    
 
-
    例子中列表的HTML代码如下：
    
+
    例子中列表的 HTML 代码如下：
    <h2>Shopping (unordered) list</h2>
 
@@ -72,18 +72,18 @@ 
    一个简单的例子
    
 
    现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：
    
 
 
      
- 
    •  {{htmlelement("ul")}}  和  {{htmlelement("ol")}}  元素设置{{cssxref("margin")}}的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为16px）。
      • 
+ 
    •  {{htmlelement("ul")}}  和  {{htmlelement("ol")}}  元素设置{{cssxref("margin")}}的顶部和底部：16px(1em) 0;和 padding-left: 40px(2.5em); （在这里注意的是浏览器默认字体大小为 16px）。
      • 
  
    • {{htmlelement("li")}}  默认是没有设置间距的。
      • 
- 
    • {{htmlelement("dl")}}  元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。
      • 
+ 
    • {{htmlelement("dl")}}  元素设置 margin 的顶部和底部：16px(1em) ，无内边距设定。
      • 
  
    • {{htmlelement("dd")}} 元素设置为： {{cssxref("margin-left")}}  40px (2.5em)。
      • 
- 
    • 在参考中提到的 {{htmlelement("p")}}  元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同。
      • 
+ 
    • 在参考中提到的 {{htmlelement("p")}}  元素设置 margin 的顶部和底部：16px(1em)，和其他的列表类型相同。
      • 
 
    
 
 
    处理列表间距
    
 
 
    当您创建样式列表时，您需要调整样式，使其保持与周围元素相同的垂直间距（例如段落和图片，有时称为垂直节奏））和相互间的水平间距（您可以在 Github 上参考完成的样式示例 ，也可以找到源代码。）
    
 
-
    用于文本样式和间距的CSS如下所示：
    
+
    用于文本样式和间距的 CSS 如下所示：
    
 
 
    /* General styles */
 
@@ -121,15 +121,15 @@ 
    处理列表间距
    
 
    
 
 
      
- 
    • 第一条规则集设置一个网站字体，基准字体大小为10px。 页面上的所有内容都将继承该规则集。
      • 
- 
    • 规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小（这些列表的子元素将会继承该规则集），这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。
      • 
- 
    • 规则集4在段落和列表项目上设置相同的 {{cssxref("line-height")}} ，因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。
      • 
- 
    • 规则集5-7适用于描述列表 - 我们在描述列表的术语和其描述上设置与段落和列表项相同的行高，以及 {{cssxref("margin-bottom")}} 为1.5 rem（与段落（p）和列表项目（li））相同。 再次强调一遍，这里很好地实现了一致性！ 我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。 
      • 
+ 
    • 第一条规则集设置一个网站字体，基准字体大小为 10px。页面上的所有内容都将继承该规则集。
      • 
+ 
    • 规则集 2 和 3 为标题、不同的列表类型和段落以及设置了相对字体大小（这些列表的子元素将会继承该规则集），这就意味着每个段落和列表都将拥有相同的字体大小和上下间距，有助于保持垂直间距一致。
      • 
+ 
    • 规则集 4 在段落和列表项目上设置相同的 {{cssxref("line-height")}} ，因此段落和每个单独的列表项目将在行之间具有相同的间距。这也将有助于保持垂直间距一致。
      • 
+ 
    • 规则集 5-7 适用于描述列表 - 我们在描述列表的术语和其描述上设置与段落和列表项相同的行高，以及 {{cssxref("margin-bottom")}} 为 1.5 rem（与段落（p）和列表项目（li））相同。再次强调一遍，这里很好地实现了一致性！我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。 
      • 
 
    
 
 
    列表特定样式
    
 
-
    现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。 我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：
    
+
    现在我们来看一下列表的一般间距，我们来研究一些列表具有的特定属性。我们从三个属性开始了解，这三个属性可以在 {{htmlelement("ul")}} 或  {{htmlelement("ol")}} 元素上设置：
    
 
 
      
  
    • {{cssxref("list-style-type")}} ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
      • 
@@ -153,7 +153,7 @@ 
      符号样式
      
 
 
      项目符号位置
      
 
-
      {{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 如上所示，默认值为 outside，这使项目符号位于列表项之外。
      
+
      {{cssxref("list-style-position")}} 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。如上所示，默认值为 outside，这使项目符号位于列表项之外。
      
 
 
      如果值设置为 inside，项目条目则位于行内。
      
 
@@ -172,7 +172,7 @@ 
      使用自定义的项目符号图
   list-style-image: url(star.svg);
 }
    
 
-
    然而，这个属性在控制项目符号的位置，大小等方面是有限的。 您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！
    
+
    然而，这个属性在控制项目符号的位置，大小等方面是有限的。您最好使用{{cssxref("background")}} 系列属性，您将在 Styling boxes 模块中了解更多信息。在这里我们仅做一点尝试！
    结束我们的例子，我们样式化无序列表像这样（放到您之前所见的顶部）：
    
 
@@ -192,13 +192,13 @@ 
    使用自定义的项目符号图
 
    我们的所做如下：
    
 
 
      
- 
    • 将 {{htmlelement("ul")}} 的 {{cssxref("padding-left")}} 从默认的 40px设置为 20px，然后在列表项上设置相同的数值。 这就是说，整个列表项仍然排列在列表中，但是列表项产生了一些用于背景图像的填充。 如果我们没有设置填充，背景图像将与列表项文本重叠，这看起来会很乱。
      • 
- 
    • 将 {{cssxref("list-style-type")}} 设置为none，以便默认情况下不会显示项目符号。 我们将使用 {{cssxref("background")}} 属性来代替项目符号。
      • 
+ 
    • 将 {{htmlelement("ul")}} 的 {{cssxref("padding-left")}} 从默认的 40px设置为 20px，然后在列表项上设置相同的数值。这就是说，整个列表项仍然排列在列表中，但是列表项产生了一些用于背景图像的填充。如果我们没有设置填充，背景图像将与列表项文本重叠，这看起来会很乱。
      • 
+ 
    • 将 {{cssxref("list-style-type")}} 设置为 none，以便默认情况下不会显示项目符号。我们将使用 {{cssxref("background")}} 属性来代替项目符号。
      • 
  
    • 为每个无序列表项插入项目符号，其相应的属性如下：
   
        
    
      • {{cssxref("background-image")}}: 充当项目符号的图片文件的参考路径
        • 
    
      • {{cssxref("background-position")}}: 这定义了所选元素背景中的图像将出现在哪里 - 在我们的示例中设置 0 0，这意味着项目符号将出现在每个列表项的最左上侧。
        • 
-   
      • {{cssxref("background-size")}}: 设置背景图片的大小。 理想条件下，我们想要项目符号与列表项的大小相同（比列表项稍大或稍小亦可）。 我们使用的尺寸为1.6rem（16px），它非常吻合我们为项目符号设置的 20px  的填充， 16px 加上 4px 的空格间距，可以使项目符号和列表项文本效果更好。
        • 
+   
      • {{cssxref("background-size")}}: 设置背景图片的大小。理想条件下，我们想要项目符号与列表项的大小相同（比列表项稍大或稍小亦可）。我们使用的尺寸为 1.6rem（16px），它非常吻合我们为项目符号设置的 20px  的填充， 16px 加上 4px 的空格间距，可以使项目符号和列表项文本效果更好。
        • 
    
      • {{cssxref("background-repeat")}}：默认条件下，背景图片不断复制直到填满整个背景空间，在我们的例子中，背景图片只需复制一次，所以我们设置值为 no-repeat。
        • 
   
      
  
      • 
@@ -228,11 +228,11 @@ 
      list-style 速记
      
 
 
      管理列表计数
      
 
-
      有时，您可能想在有序列表上进行不同的计数方式。例如： 从1以外的数字开始，或向后倒数，或者按步或多于1计数。HTML和CSS有一些工具可以帮助您
      
+
      有时，您可能想在有序列表上进行不同的计数方式。例如：从 1 以外的数字开始，或向后倒数，或者按步或多于 1 计数。HTML 和 CSS 有一些工具可以帮助您
      
 
 
      start
      
 
-
      {{htmlattrxref("start","ol")}} 属性允许你从1 以外的数字开始计数。示例如下：
      
+
      {{htmlattrxref("start","ol")}} 属性允许你从 1 以外的数字开始计数。示例如下：
      
 
 
      <ol start="4">
   <li>Toast pitta, leave to cool, then slice down the edge.</li>
@@ -262,7 +262,7 @@ 
      reversed
      
 
 
      value
      
 
-
      {{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下:
      
+
      {{htmlattrxref("value","ol")}} 属性允许设置列表项指定数值，示例如下：
      
 
 
      <ol>
   <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
@@ -279,7 +279,7 @@ 
      value
      
 
      注意: 纵然你使用非数字的 {{cssxref("list-style-type")}}, 你仍需要使用与数值同等意义的值作为 value 的属性。
      
 
 
-
      主动学习: 为嵌套式列表添加样式
      
+
      主动学习：为嵌套式列表添加样式
      
 
 
      在该学习环节，我们希望你使用如上所学尝试为一个嵌套式列表添加样式。我们已经提供了 HTML , 在此之上请完成如下：
      
 
@@ -290,7 +290,7 @@ 
      主动学习: 为嵌套式
  
    • 对列表进行自由发挥，尝试不同的项目符号类型，间距，以及其他的各种属性。
      • 
 
 
-
      如果犯了错误，可以随时点击 Reset（重置） 按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。
      
+
      如果犯了错误，可以随时点击 Reset（重置）按钮进行重新设置。如果你真的遇到困难无法继续下去，点击 Show solution（显示解决方案）按钮查看可行的解决方案。
      
 
 
    
  
   
    前置知识:前置知识：
    Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS), 基本文本和字体样式.
   
    
   
    目标:目标：
    熟悉与列表相关的样式和最佳实践
   
    
      
 
 
 
 
 
 
    
-   
+   
-   
-   
+   
+   
    
  
   
    预备条件:预备条件：
    在本次测评前，你应该完成了本模块所有章节。
   
    
   
    目标:测试对CSS文本样式化技术的理解。目标：测试对 CSS 文本样式化技术的理解。
   
    
      
 
    
 
 
    开始
    
 
-
    在本测评开始前，你应该:
    
+
    在本测评开始前，你应该：
    
 
 
 
 
    
-
    注意: 或者，你可以使用像 JSBin 或 Glitch 的网站完成你的测评。你可以把HTML和CSS粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的CSS面板，你可以将其放在HTML文件的<style>元素中。
    
+
    注意: 或者，你可以使用像 JSBin 或 Glitch 的网站完成你的测评。你可以把 HTML 和 CSS 粘贴到在线编辑器中，并使用this URL指定背景图像。如果你使用的在线编辑器没有单独的 CSS 面板，你可以将其放在 HTML 文件的<style>元素中。
    
 
    
 
 
    项目简介
    
 
-
    你有一个虚构的社区大学主页的未处理HTML文件和一些CSS文件。这些CSS文件把网页分成两栏布局，提供了一些简单的样式化。你将在CSS文件底部的comment下写你的CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。
    
+
    你有一个虚构的社区大学主页的未处理 HTML 文件和一些 CSS 文件。这些 CSS 文件把网页分成两栏布局，提供了一些简单的样式化。你将在 CSS 文件底部的 comment 下写你的 CSS，这样可以方便地标出你的工作。不要担心选择器一直重复；我们会帮你跳过这个问题。
    
 
 
    字体：
    
 
 
      
- 
    • 首先，下载一些免费的字体。因为这是一所大学，字体应该严肃，正式，给人信任的感觉 —— 主体使用serif字体，对标题结合使用sans-serif 或者 slab serif会是不错的选择。
      • 
+ 
    • 首先，下载一些免费的字体。因为这是一所大学，字体应该严肃，正式，给人信任的感觉 —— 主体使用 serif 字体，对标题结合使用 sans-serif 或者 slab serif 会是不错的选择。
      • 
  
    • 使用合适的服务对着两种字体生成无死角的@font-face代码。
      • 
- 
    • 将你的body字体应用到body，heading字体应用到heading。
      • 
+ 
    • 将你的 body 字体应用到 body，heading 字体应用到 heading。
      • 
 
    
 
 
    文本样式化基础：
    
 
 
      
  
    • 设置全站网页 font-size 为 10px。
      • 
- 
    • 使用相对单位（relative unit）为标题和其他元素的font-sizes设置合适的值。
      • 
- 
    • 为body文本设置合适的line-height。
      • 
+ 
    • 使用相对单位（relative unit）为标题和其他元素的 font-sizes 设置合适的值。
      • 
+ 
    • 为 body 文本设置合适的line-height。
      • 
  
    • 居中页面顶级标题。
      • 
  
    • 为标题设置 letter-spacing 避免字间太过拥挤。
      • 
- 
    • 为body文本设置合适的 letter-spacing 和 word-spacing。
      • 
- 
    • 在<section>元素中，每个标题后的第一段文字设置20px的文本缩进。
      • 
+ 
    • 为 body 文本设置合适的 letter-spacing 和 word-spacing。
      • 
+ 
    • 在<section>元素中，每个标题后的第一段文字设置 20px 的文本缩进。
      • 
 
    
 
 
    链接：
    
 
 
      
  
    • 设置 link, visited, focus, 和 hover 状态设置颜色，与页面顶部和底部的水平线颜色相匹配。
      • 
- 
    • 设置链接默认带下划线，但hover和focus时下划线消失。
      • 
- 
    • 取消页面中所有链接focus时默认的外边线。
      • 
- 
    • 设置active时有显著不同的样式，使其又突出又与整体页面设计和谐。
      • 
+ 
    • 设置链接默认带下划线，但 hover 和 focus 时下划线消失。
      • 
+ 
    • 取消页面中所有链接 focus 时默认的外边线。
      • 
+ 
    • 设置 active 时有显著不同的样式，使其又突出又与整体页面设计和谐。
      • 
  
    • 在外部链接右侧插入外部链接图标。
      • 
 
    
 
@@ -81,10 +81,10 @@ 
    项目简介
    
 
 
      
  
    • 确保列表和列表项与页面整体样式和谐。每个列表项应该有同样的与段落行相同的line-height 。每个列表上下间距应该与段落间距相同。
      • 
- 
    • 使用与页面设计匹配的bullet列表项符号。你可以选择自定义的bullet图像或者其他的喜欢的bullet符号。
      • 
+ 
    • 使用与页面设计匹配的 bullet 列表项符号。你可以选择自定义的 bullet 图像或者其他的喜欢的 bullet 符号。
      • 
 
    
 
-
    导航栏菜单:
    
+
    导航栏菜单：
    
 
 
      
  
    • 样式化你的导航栏菜单，使它拥有与页面整体相匹配的外观。
      • 
@@ -93,7 +93,7 @@ 
      项目简介
      
 
      提示与技巧
      
 
 
        
- 
      • 本练习中你不需要编辑HTML文件。
        • 
+ 
      • 本练习中你不需要编辑 HTML 文件。
        • 
  
      • 你不需要使导航栏菜单看起来像按钮，但它需要有一定的高度才不至于在页面侧边看起来很别扭；同时记得，你需要的是一个垂直导航栏菜单。
        • 
 
      
 
diff --git a/files/zh-cn/learn/css/styling_text/web_fonts/index.html b/files/zh-cn/learn/css/styling_text/web_fonts/index.html
index 2b847e75041f78..d3dd0b071e32bd 100644
--- a/files/zh-cn/learn/css/styling_text/web_fonts/index.html
+++ b/files/zh-cn/learn/css/styling_text/web_fonts/index.html
@@ -8,36 +8,36 @@
 
 
      {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
      
 
-
      在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本CSS特性。在这篇文章中，我们将更进一步，详细地探索web字体——它们允许您下载自定义字体和您的web页面，以允许更多不同的、自定义的文本样式。
      
+
      在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本 CSS 特性。在这篇文章中，我们将更进一步，详细地探索 web 字体——它们允许您下载自定义字体和您的 web 页面，以允许更多不同的、自定义的文本样式。
      
 
 
-   
-   
+   
+   
-   
-   
+   
+   
      
  
   
      预备知识:基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS文本和字体基础 。预备知识：基本计算机素养，HTML 基础 (学习 Introduction to HTML), CSS 基础 (学习Introduction to CSS), CSS 文本和字体基础 。
   
      
   
      目标:学习如何将web字体应用到web页面，使用第三方服务，或者编写自己的代码。目标：学习如何将 web 字体应用到 web 页面，使用第三方服务，或者编写自己的代码。
   
      
        
 
      
 
 
      字体种类回顾
      
 
-
      正如我们在基本文本和字体样式中所看到的那样，应用到您的HTML的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
      
+
      正如我们在基本文本和字体样式中所看到的那样，应用到您的 HTML 的字体可以使用 {{cssxref("font-family")}}属性来控制。您需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
      
 
 
      p {
   font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
 }
      
 
-
      这个系统运行良好，但是对于传统的web开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是Web-safe的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。
      
+
      这个系统运行良好，但是对于传统的 web 开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。您可以使用字体堆栈来指定可选择的字体，后面是 Web-safe 的替代选项，然后是默认的系统字体，但是为了确保您的设计在每种字体中都显示正常，这样增加了测试的开销。
      
 
 
      Web 字体
      
 
-
      但是还有一种选择，它非常有效，回到IE版本6。Web字体是一种CSS特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持Web字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：
      
+
      但是还有一种选择，它非常有效，回到 IE 版本 6。Web 字体是一种 CSS 特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持 Web 字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：
      
 
-
      首先，在CSS的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：
      
+
      首先，在 CSS 的开始处有一个{{cssxref("@font-face")}}块，它指定要下载的字体文件：
      
 
 
      @font-face {
   font-family: "myFont";
@@ -45,7 +45,7 @@ 
      Web 字体
      
 }
 
      
 
-
      在这个下面，你可以使用@font-face中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：
      
+
      在这个下面，你可以使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：
      
 
 
      html {
   font-family: "myFont", "Bitstream Vera Serif", serif;
@@ -56,34 +56,34 @@ 
      Web 字体
      
 
      关于网页字体有两件重要的事情要记住：
      
 
 
        
- 
      1. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如,大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
        2. 
- 
      2. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
        3. 
+ 
      3. 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型) 的字体，你可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。我们将向您展示如何生成所需的代码。
        4. 
+ 
      4. 字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件，比如在代码中 (或者在您的站点上) 提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。
        5. 
 
      
 
 
      
-
      注意： Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！
      
+
      注意： Web 字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！
      
 
      
 
-
      自主学习:web字体示例
      
+
      自主学习:web 字体示例
      
 
-
      记住这一点，让我们从最初的原则构建一个基本的web字体示例。使用嵌入的live示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。
      
+
      记住这一点，让我们从最初的原则构建一个基本的 web 字体示例。使用嵌入的 live 示例很难演示这一点，因此，我们希望您按照下面几节中详细介绍的步骤来了解这个过程。
      
 
-
      你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的CSS来处理这个示例的基本布局和排版。
      
+
      你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 web-font-start.css文件中，您将找到一些最小的 CSS 来处理这个示例的基本布局和排版。
      
 
 
      查找字体
      
 
-
      对于本例，我们将使用两种web字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
      
+
      对于本例，我们将使用两种 web 字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
      
  通常有三种类型的网站可以获得字体：
      
 
 
        
- 
      • 免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)。比如： Font Squirre，dafont 和 Everything Fonts。
        • 
+ 
      • 免费的字体经销商：这是一个可以下载免费字体的网站 (可能还有一些许可条件，比如对字体创建者的信赖)。比如： Font Squirre，dafont 和 Everything Fonts。
        • 
  
      • 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com。您也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype 或 Exljbris。
        • 
  
      • 在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见使用在线字体服务。
        • 
 
      
 
-
      让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体(可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的HTML和CSS文件相同的目录中。无论它们是TTF(True Type Fonts))还是OTF(Open Type字体)都不重要。
      
+
      让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体 (可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当您找到每种字体时，按下下载按钮，并将该文件保存在与您先前保存的 HTML 和 CSS 文件相同的目录中。无论它们是 TTF(True Type Fonts)) 还是 OTF(Open Type 字体) 都不重要。
      
 
-
      在每种情况下，都要解压字体包(Web字体通常分布在包含字体文件和许可信息的ZIP文件中。)您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。
      
+
      在每种情况下，都要解压字体包 (Web 字体通常分布在包含字体文件和许可信息的 ZIP 文件中。) 您可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让您自己考虑一个单一的字体文件。
      
 
 
      
 
      注意： 在右边栏的“查找字体”部分中，您可以单击不同的标记和分类来筛选显示的选项。
      
@@ -91,25 +91,25 @@ 
      查找字体
      
 
 
      生成所需代码
      
 
-
      现在您需要生成所需的代码(以及字体格式)。对于每种字体，遵循以下步骤：
      
+
      现在您需要生成所需的代码 (以及字体格式)。对于每种字体，遵循以下步骤：
      
 
 
        
- 
      1. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或Web项目中使用它。
        2. 
+ 
      2. 确保您已经满足了任何许可证的要求，如果您打算在一个商业和/或 Web 项目中使用它。
        3. 
  
      3. 前往 Fontsquirrel Webfont Generator.
        4. 
  
      4. 使用上传字体按钮上传你的两个字体文件。
        5. 
  
      5. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
        6. 
  
      6. 点击下载你的套件（kit）。
        7. 
 
      
 
-
      在生成器完成处理之后，您应该得到一个ZIP文件，将它保存在与HTML和CSS相同的目录中。
      
+
      在生成器完成处理之后，您应该得到一个 ZIP 文件，将它保存在与 HTML 和 CSS 相同的目录中。
      
 
 
      在演示中实现代码
      
 
-
      在这一点上解压您刚刚生成的webfont套件。在解压的目录中，您将看到三个有用的条目：
      
+
      在这一点上解压您刚刚生成的 webfont 套件。在解压的目录中，您将看到三个有用的条目：
      
 
 
        
- 
      • 每个字体的多个版本：（比如 .ttf, .woff, .woff2…… 随着浏览器支持需求的改变，提供的字体将随着时间的推移而不断更新。） 正如上面提到的，跨浏览器支持需要使用多种字体——这是Fontsquirrel的方法，确保你得到了你需要的一切。
        • 
- 
      • 每个字体的一个演示HTML文件在你的浏览器中加载，看看在不同的使用环境下字体会是什么样子。
        • 
+ 
      • 每个字体的多个版本：（比如 .ttf, .woff, .woff2…… 随着浏览器支持需求的改变，提供的字体将随着时间的推移而不断更新。）正如上面提到的，跨浏览器支持需要使用多种字体——这是 Fontsquirrel 的方法，确保你得到了你需要的一切。
        • 
+ 
      • 每个字体的一个演示 HTML 文件在你的浏览器中加载，看看在不同的使用环境下字体会是什么样子。
        • 
  
      • 一个 stylesheet.css 文件，它包含了你需要的生成好的 @font-face 代码。
        • 
 
      
 
@@ -117,9 +117,9 @@ 
      在演示中实现代码
      
 
 
        
  
      1. 将解压缩的目录重命名为简易的目录，比如fonts
        2. 
- 
      2. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的CSS之前，因为字体需要导入才能在你的网站上使用。
        3. 
- 
      3. 每个url()函数指向一个我们想要导入到我们的CSS中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
        4. 
- 
      4. 现在，您可以在字体栈中使用这些字体，就像任何web安全或默认的系统字体一样。
        
+ 
      5. 打开 stylesheet.css 文件，把包含在你的网页中的 @font-face块复制到你的 web-font-start.css 文件—— 你需要把它们放在最上面，在你的 CSS 之前，因为字体需要导入才能在你的网站上使用。
        6. 
+ 
      6. 每个url()函数指向一个我们想要导入到我们的 CSS 中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加fonts/ （必要时进行调整）。
        7. 
+ 
      7. 现在，您可以在字体栈中使用这些字体，就像任何 web 安全或默认的系统字体一样。
        
   例如：
   
        font-family: 'zantrokeregular', serif;
        
  
        8. 
@@ -137,24 +137,24 @@ 
        使用在线字体服务
        
 
 
        在线字体服务通常会为你存储和服务字体，这样你就不用担心写@font-face代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。
        
 
-
        大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a的副本作为你的开始。
        
+
        大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下 Google Fonts，这样你就能明白它的意思了。再次的，使用web-font-start.html 和 web-font-start.css a 的副本作为你的开始。
        
 
 
          
  
        1. 前往 Google Fonts.
          2. 
  
        2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
          3. 
  
        3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
          4. 
  
        4. 当您选择好字体种类时，按下页面底部的[Number] 种类选择。
          5. 
- 
        5. 在生成的屏幕中，首先需要复制所显示的HTML代码行，并将其粘贴到HTML文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的CSS中使用它。
          6. 
- 
        6. 然后，您需要将CSS声明复制到您的CSS中，以便将自定义字体应用到您的HTML。
          7. 
+ 
        7. 在生成的屏幕中，首先需要复制所显示的 HTML 代码行，并将其粘贴到 HTML 文件的头部。将其置于现有的{{htmlelement("link")}}元素之上，使得字体是导入的，然后在你的 CSS 中使用它。
          8. 
+ 
        8. 然后，您需要将 CSS 声明复制到您的 CSS 中，以便将自定义字体应用到您的 HTML。
          9. 
 
        
 
 
        
 
        注意：如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）
        
 
        
 
-
        关于@font-face的更多细节
        
+
        关于 @font-face 的更多细节
        
 
-
        让我们来探索由fontsquirrel为您生成的@font-face语法。这是其中一个块的样子：
        
+
        让我们来探索由 fontsquirrel 为您生成的@font-face语法。这是其中一个块的样子：
        
 
 
        @font-face {
   font-family: 'ciclefina';
@@ -168,16 +168,16 @@ 
        关于@font-face的更多细节
        
   font-style: normal;
 }
        
 
-
        这被称为"bulletproof @font-face syntax（刀枪不入的@font-face语法）", 这是 Paul Irish早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：
        
+
        这被称为"bulletproof @font-face syntax（刀枪不入的 @font-face 语法）", 这是 Paul Irish 早期的一篇文章提及后 @font-face 开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：
        
 
 
          
- 
        • font-family：这一行指定了您想要引用的字体的名称。你可以把它作为你喜欢的任何东西，只要你在你的CSS中始终如一地使用它。
          • 
- 
        • src：这些行指定要导入到您的CSS(url部分)的字体文件的路径，以及每种字体文件的格式(format部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如WOFF2放在前面，把偏老的，不是那么好的格式像TTF这样的放在后面。唯一的例外是EOT字体——他们首先在旧版本的IE中修复了几个bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。
          • 
- 
        • {{cssxref("font-weight")}}/{{cssxref("font-style")}}: 这些行指定字体的粗细，以及它是否斜体。如果您正在导入相同字体的多个粗细，您可以指定它们的粗细/样式，然后使用不同的{{cssxref("font-weight")}}/{{cssxref("font-style")}}来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson写的  @font-face tip: define font-weight and font-style to keep your CSS simple 更详细地说明了该做些什么。
          • 
+ 
        • font-family：这一行指定了您想要引用的字体的名称。你可以把它作为你喜欢的任何东西，只要你在你的 CSS 中始终如一地使用它。
          • 
+ 
        • src：这些行指定要导入到您的 CSS(url部分) 的字体文件的路径，以及每种字体文件的格式 (format部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如 WOFF2 放在前面，把偏老的，不是那么好的格式像 TTF 这样的放在后面。唯一的例外是 EOT 字体——他们首先在旧版本的 IE 中修复了几个 bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。
          • 
+ 
        • {{cssxref("font-weight")}}/{{cssxref("font-style")}}: 这些行指定字体的粗细，以及它是否斜体。如果您正在导入相同字体的多个粗细，您可以指定它们的粗细/样式，然后使用不同的{{cssxref("font-weight")}}/{{cssxref("font-style")}}来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson 写的  @font-face tip: define font-weight and font-style to keep your CSS simple 更详细地说明了该做些什么。
          • 
 
        
 
 
        
-
        注意：您还可以为您的web字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} )值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么web字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。
        
+
        注意：您还可以为您的 web 字体指定特定的{{cssxref("font-variant")}} 和 {{cssxref("font-stretch")}} ) 值。在较新的浏览器中，您还可以指定一个{{cssxref("unicode-range")}}值，这是一个您需要使用什么 web 字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan 写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。
        
 
        
 
 
        总结