Fix live samples in Learn/CSS, zh-CN (#1961)

* Fix broken live examples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

* Fix broken live samples

4 files changed, 74 insertions, 55 deletions

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 ab825e40e4..15b54cd485 100644
--- a/files/zh-cn/learn/css/css_layout/grids/index.html
+++ b/files/zh-cn/learn/css/css_layout/grids/index.html
@@ -83,10 +83,11 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>在规则里加入你的第二个声明。刷新页面后，你会看到子项们排进了新定义的网格中。</p>
 
+<div id="Grid_1">
 <div class="hidden">
 <h6 id="简单的网格示例">简单的网格示例 </h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -100,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
   border: 2px solid rgb(79,185,227);
 }          </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
@@ -110,11 +111,12 @@ translation_of: Learn/CSS/CSS_layout/Grids
  &lt;div&gt;Seven&lt;/div&gt;
 &lt;/div&gt; </pre>
 
-<pre class="notranslate">.container {
+<pre class="brush:css notranslate">.container {
   display: grid;
   grid-template-columns: 200px 200px 200px;
 } </pre>
 </div>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p>
 
@@ -138,10 +140,11 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>这个定义里，第一列被分配了<code>2fr</code>可用空间，余下的两列各被分配了<code>1fr</code>的可用空间，这会使得第一列的宽度是第二第三列的两倍。另外，<code>fr</code>可以与一般的长度单位混合使用，比如<code>grid-template-columns: 300px 2fr 1fr</code>，那么第一列宽度是<code>300px</code>，剩下的两列会根据除去<code>300px</code>后的可用空间按比例分配。</p>
 
+<div id="Grid_2">
 <div class="hidden">
 <h6 id="使用了fr单位的简单网格示例">使用了fr单位的简单网格示例</h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -161,7 +164,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 }
                 </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;div&gt;One&lt;/div&gt;
   &lt;div&gt;Two&lt;/div&gt;
   &lt;div&gt;Three&lt;/div&gt;
@@ -171,6 +174,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
   &lt;div&gt;Seven&lt;/div&gt;
 &lt;/div&gt;                        </pre>
 </div>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p>
 
@@ -190,10 +194,11 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>间隙距离可以用任何长度单位包括百分比来表示，但不能使用<code>fr</code>单位。</p>
 
+<div id="Grid_3">
 <div class="hidden">
 <h6 id="添加了间隙的简单网格示例">添加了间隙的简单网格示例</h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -214,7 +219,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 }
                 </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;div&gt;One&lt;/div&gt;
   &lt;div&gt;Two&lt;/div&gt;
   &lt;div&gt;Three&lt;/div&gt;
@@ -225,6 +230,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 &lt;/div&gt;
 </pre>
 </div>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p>
 
@@ -259,10 +265,11 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。</p>
 
+<div id="Grid_4">
 <div class="hidden">
 <h6 id="修改隐式网格尺寸的示例">修改隐式网格尺寸的示例</h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -276,7 +283,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
   border: 2px solid rgb(79,185,227);
 }                  </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;div&gt;One&lt;/div&gt;
   &lt;div&gt;Two&lt;/div&gt;
   &lt;div&gt;Three&lt;/div&gt;
@@ -288,12 +295,13 @@ translation_of: Learn/CSS/CSS_layout/Grids
                         </pre>
 </div>
 
-<pre class="notranslate">.container {
+<pre class="brush:css notranslate">.container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   grid-gap: 20px;
 }</pre>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p>
 
@@ -318,10 +326,11 @@ translation_of: Learn/CSS/CSS_layout/Grids
 
 <p>在你的文件中试试看，你也许可以用到以下的代码。</p>
 
+<div id="Grid_5">
 <div class="hidden">
 <h6 id="自动使用多列填充的网格">自动使用多列填充的网格</h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -336,7 +345,7 @@ translation_of: Learn/CSS/CSS_layout/Grids
 }
                 </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;div&gt;One&lt;/div&gt;
   &lt;div&gt;Two&lt;/div&gt;
   &lt;div&gt;Three&lt;/div&gt;
@@ -347,12 +356,13 @@ translation_of: Learn/CSS/CSS_layout/Grids
 &lt;/div&gt;                      </pre>
 </div>
 
-<pre class="notranslate">.container {
+<pre class="brush:css notranslate">.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-auto-rows: minmax(100px, auto);
   grid-gap: 20px;
 }</pre>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p>
 
@@ -404,10 +414,11 @@ footer {
   grid-row: 3;
 }</pre>
 
+<div id="Grid_6">
 <div class="hidden">
 <h6 id="基于线的元素放置_2">基于线的元素放置</h6>
 
-<pre class="notranslate">                body {
+<pre class="brush:css notranslate">                body {
                     width: 90%;
                     max-width: 900px;
                     margin: 2em auto;
@@ -452,7 +463,7 @@ aside {
 }
 </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;header&gt;This is my lovely blog&lt;/header&gt;
   &lt;article&gt;
     &lt;h1&gt;My article&lt;/h1&gt;
@@ -467,6 +478,7 @@ aside {
   &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
 &lt;/div&gt;               </pre>
 </div>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p>
 
@@ -508,10 +520,11 @@ footer {
 
 <p>刷新页面，然后你应该能看到的元素会被放到与之前相同的地方，整个过程不需要我们指定任何分隔线序号。</p>
 
+<div id="Grid_7">
 <div class="hidden">
 <h6 id="基于线的元素放置_3">基于线的元素放置</h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -557,7 +570,7 @@ footer {
 }
                 </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;header&gt;This is my lovely blog&lt;/header&gt;
   &lt;article&gt;
     &lt;h1&gt;My article&lt;/h1&gt;
@@ -571,6 +584,7 @@ footer {
   &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
 &lt;/div&gt;                     </pre>
 </div>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p>
 
@@ -612,10 +626,11 @@ footer {
   grid-row: 3;
 }</pre>
 
+<div id="Grid_8">
 <div class="hidden">
 <h6 id="一个CSS网格系统">一个CSS网格系统</h6>
 
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -661,7 +676,7 @@ aside {
 }
                 </pre>
 
-<pre class="notranslate">&lt;div class="container"&gt;
+<pre class="brush:html notranslate">&lt;div class="container"&gt;
   &lt;header&gt;This is my lovely blog&lt;/header&gt;
   &lt;article&gt;
     &lt;h1&gt;My article&lt;/h1&gt;
@@ -676,6 +691,7 @@ aside {
 &lt;/div&gt;
                         </pre>
 </div>
+</div>
 
 <p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p>
 
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 a96e967bad..6a0b707111 100644
--- a/files/zh-cn/learn/css/css_layout/introduction/index.html
+++ b/files/zh-cn/learn/css/css_layout/introduction/index.html
@@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction
 
 <p>每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。</p>
 
-<h2 id="正常布局流Normal_flow">正常布局流(Normal flow)</h2>
+<h2 id="Normal_flow">正常布局流(Normal flow)</h2>
 
 <p>正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：</p>
 
@@ -66,7 +66,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction
 
 <p>默认情况下，浏览器的显示如下:</p>
 
-<p>{{ EmbedLiveSample('正常布局流Normal_flow', '100%', 200) }}</p>
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
 
 <p>注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。</p>
 
@@ -349,7 +349,7 @@ p {
  <li><strong>粘性定位(Sticky positioning)</strong>是一种新的定位方式，它会让元素先保持和<code>position: static</code>一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会像<code>position: fixed</code>一样定位。</li>
 </ul>
 
-<h3 id="简单定位示例">简单定位示例</h3>
+<h3 id="Simple_positioning_example">简单定位示例</h3>
 
 <p>我们将展示一些示例代码来熟悉这些布局技术. 这些示例代码都作用在下面这一个相同的HTML上：</p>
 
@@ -376,7 +376,7 @@ p {
 
 <p>渲染效果如下:</p>
 
-<p>{{ EmbedLiveSample('简单定位示例', '100%', 300) }}</p>
+<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>
 
 <h3 id="相对定位">相对定位</h3>
 
@@ -581,7 +581,7 @@ p {
 <p><strong>注意</strong>: 想要发现更多关于定位的信息，请参阅我们的<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a>和<a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a>文章。</p>
 </div>
 
-<h2 id="表格布局">表格布局</h2>
+<h2 id="Table_layout">表格布局</h2>
 
 <p>HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。</p>
 
@@ -649,7 +649,7 @@ form p {
 
 <p>结果如下：</p>
 
-<p>{{ EmbedLiveSample('CSS_表格', '100%', '170') }}</p>
+<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>
 
 <p>你可以在 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> 看到预览版 (也可以见<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">源码</a>)</p>
 
diff --git a/files/zh-cn/learn/css/css_layout/positioning/index.html b/files/zh-cn/learn/css/css_layout/positioning/index.html
index d5e21680d0..c49c904ac4 100644
--- a/files/zh-cn/learn/css/css_layout/positioning/index.html
+++ b/files/zh-cn/learn/css/css_layout/positioning/index.html
@@ -33,7 +33,7 @@ original_slug: Learn/CSS/CSS_layout/定位
  </tbody>
 </table>
 
-<h2 id="文档流">文档流</h2>
+<h2 id="basic-flow">文档流</h2>
 
 <p>定位是一个相当复杂的话题，所以我们深入了解代码之前，让我们审视一下布局理论，并让我们了解它的工作原理。</p>
 
@@ -74,7 +74,7 @@ span {
   border: 1px solid black;
 }</pre>
 
-<p>{{ EmbedLiveSample('文档流', '100%', 500) }}</p>
+<p>{{ EmbedLiveSample('basic-flow', '100%', 500) }}</p>
 
 <p>在我们阅读本文时，我们将多次重复这个例子，因为我们要展示不同定位选项的效果。</p>
 
@@ -115,7 +115,7 @@ span {
 
 <p>如果您在此阶段保存并刷新，则结果根本不会发生变化。那么如何修改元素的位置呢？ 您需要使用{{cssxref("top")}}，{{cssxref("bottom")}}，{{cssxref("left")}}和{{cssxref("right")}}属性 ，我们将在下一节中解释。</p>
 
-<h3 id="介绍_top_bottom_left_right">介绍 top, bottom, left,  right</h3>
+<h3 id="Introducing_top_bottom_left_and_right">介绍 top, bottom, left,  right</h3>
 
 <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, 和 {{cssxref("right")}} 来精确指定要将定位元素移动到的位置。 要尝试这样做，请在CSS中的 <code>.positioned</code> 规则中添加以下声明：</p>
 
@@ -164,7 +164,7 @@ span {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('介绍_top_bottom_left_right', '100%', 500) }}</p>
+<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p>
 
 <p>酷，是吗？ 好吧，所以这个结果这可能不是你期待的——为什么它移动到底部和右边，但我们指定顶部和左边？ 听起来不合逻辑，但这只是相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。 所以例如，如果你指定 <code>top: 30px;</code>一个力推动框的顶部，使它向下移动30px。</p>
 
@@ -172,7 +172,7 @@ span {
 <p><strong>注意：</strong> 你可以在 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> 查看这个例子 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">see source code</a>)。</p>
 </div>
 
-<h3 id="绝对定位">绝对定位</h3>
+<h3 id="Absolute_positioning">绝对定位</h3>
 
 <p>绝对定位带来了非常不同的结果。让我们尝试改变代码中的位置声明如下：</p>
 
@@ -216,7 +216,7 @@ span {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('绝对定位', '100%', 420) }}</p>
+<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 450) }}</p>
 
 <p>首先，请注意，定位的元素应该在文档流中的间隙不再存在——第一和第三元素已经靠在一起，就像第二个元素不再存在！好吧，在某种程度上，这是真的。绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……</p>
 
@@ -234,7 +234,7 @@ span {
 <p><strong>注意：</strong>你可以在<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> 查看这个例子(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">see source code</a>)。</p>
 </div>
 
-<h3 id="定位上下文">定位上下文</h3>
+<h3 id="Positioning_contexts">定位上下文</h3>
 
 <p>哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的position属性。(参见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Identifying the containing block</a>).</p>
 
@@ -283,7 +283,7 @@ span {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('定位上下文', '100%', 420) }}</p>
+<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p>
 
 <p>定位的元素现在相对于{{htmlelement("body")}}元素。</p>
 
@@ -291,7 +291,7 @@ span {
 <p>注意：你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">see source code</a>).</p>
 </div>
 
-<h3 id="介绍_z-index">介绍 z-index</h3>
+<h3 id="Introducing_z-index">介绍 z-index</h3>
 
 <p>所有这些绝对定位很有趣，但还有另一件事我们还没有考虑到 ——当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？ 在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。 当我们有不止一个的时候呢？</p>
 
@@ -362,7 +362,7 @@ p:nth-of-type(1) {
 </pre>
 </div>
 
-<p>{{ EmbedLiveSample('介绍_z-index', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p>
 
 <p>请注意，z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果。</p>
 
@@ -370,7 +370,7 @@ p:nth-of-type(1) {
 <p><strong>注意：</strong>你可以在这里看到这个例子 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">see source code</a>).</p>
 </div>
 
-<h3 id="固定定位">固定定位</h3>
+<h3 id="Fixed_positioning">固定定位</h3>
 
 <p>还有一种类型的定位覆盖——fixed。 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 {{htmlelement("html")}} 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。</p>
 
@@ -448,7 +448,7 @@ p:nth-of-type(1) {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('固定定位', '100%', 400) }}</p>
+<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p>
 
 <div class="note">
 <p><strong>注意：</strong>你可以在这里看到这个例子<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">see source code</a>).</p>
@@ -458,6 +458,7 @@ p:nth-of-type(1) {
 
 <p>还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。</p>
 
+<div id="Sticky_1">
 <div class="hidden">
 <h6 id="Sticky_positioning_example">Sticky positioning example</h6>
 
@@ -491,6 +492,7 @@ p:nth-of-type(1) {
   top: 30px;
   left: 30px;
 }</pre>
+</div>
 
 <p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
 
@@ -539,8 +541,9 @@ p:nth-of-type(1) {
 }
 </pre>
 
+<div id="Sticky_2">
 <div class="hidden">
-<pre class="notranslate">body {
+<pre class="brush:css notranslate">body {
   width: 500px;
   height: 1400px;
   margin: 0 auto;
@@ -557,7 +560,7 @@ dt {
 }
 </pre>
 
-<pre class="notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+<pre class="brush:html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
 
 &lt;dl&gt;
     &lt;dt&gt;A&lt;/dt&gt;
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 3bde7ae492..b615de8b66 100644
--- a/files/zh-cn/learn/css/styling_text/fundamentals/index.html
+++ b/files/zh-cn/learn/css/styling_text/fundamentals/index.html
@@ -65,7 +65,7 @@ occasion such as this that he did.&lt;/p&gt;</pre>
 
 <p>你可以在这找到完成版本 <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">finished example on Github</a> (也可以看源码 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">the source code</a>.)</p>
 
-<h3 id="颜色">颜色</h3>
+<h3 id="Color">颜色</h3>
 
 <p>{{cssxref("color")}} 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 {{cssxref("text-decoration")}} 属性放置在文本下方或上方的线 (underline overline)。</p>
 
@@ -90,7 +90,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare
 occasion such as this that he did.&lt;/p&gt;</pre>
 </div>
 
-<p>{{ EmbedLiveSample('颜色', '100%', 220) }}</p>
+<p>{{ EmbedLiveSample('Color', '100%', 230) }}</p>
 
 <h3 id="字体种类">字体种类</h3>
 
@@ -219,7 +219,7 @@ occasion such as this that he did.&lt;/p&gt;</pre>
 <p><strong>注意</strong>: 有一些字体名称不止一个单词，比如<code>Trebuchet MS</code> ，那么就需要用引号包裹。</p>
 </div>
 
-<h4 id="一个使用_font-family_的例子">一个使用 font-family 的例子</h4>
+<h4 id="A_font-family_example">一个使用 font-family 的例子</h4>
 
 <p>让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。</p>
 
@@ -243,7 +243,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare
 occasion such as this that he did.&lt;/p&gt;</pre>
 </div>
 
-<p>{{ EmbedLiveSample('一个使用_font-family_的例子', '100%', 220) }}</p>
+<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p>
 
 <h3 id="字体大小">字体大小</h3>
 
@@ -264,7 +264,7 @@ occasion such as this that he did.&lt;/p&gt;</pre>
 
 <p>你需要将 em 的值设置为 20/24, 或者 <code>0.83333333em</code>. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。</p>
 
-<h4 id="一个简单的_size_示例">一个简单的 size 示例</h4>
+<h4 id="A_simple_sizing_example">一个简单的 size 示例</h4>
 
 <p>当调整你的文本大小时，将文档(document)的基础  <code>font-size</code> 设置为10px往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有<code>font-size</code>的规则集是一个好主意，这样它们就可以很容易被找到。</p>
 
@@ -298,9 +298,9 @@ p {
   font-family: Helvetica, Arial, sans-serif;
 }</pre>
 
-<p>{{ EmbedLiveSample('字体大小', '100%', 220) }}</p>
+<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 260) }}</p>
 
-<h3 id="字体样式，字体粗细，文本转换和文本装饰">字体样式，字体粗细，文本转换和文本装饰</h3>
+<h3 id="Font_style_font_weight_text_transform_and_text_decoration">字体样式，字体粗细，文本转换和文本装饰</h3>
 
 <p>CSS 提供了 4 种常用的属性来改变文本的样子：</p>
 
@@ -374,7 +374,7 @@ p {
   font-family: Helvetica, Arial, sans-serif;
 }</pre>
 
-<p>{{ EmbedLiveSample('字体样式，字体粗细，文本转换和文本装饰', '100%', 220) }}</p>
+<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 260) }}</p>
 
 <h3 id="文字阴影">文字阴影</h3>
 
@@ -395,7 +395,7 @@ p {
 <p><strong>注意</strong>: 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 <code>-1px -1px</code>.</p>
 </div>
 
-<h4 id="多种阴影">多种阴影</h4>
+<h4 id="Hidden_example1">多种阴影</h4>
 
 <p>您可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：</p>
 
@@ -443,7 +443,7 @@ p {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('多种阴影', '100%', 220) }}</p>
+<p>{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}</p>
 
 <div class="note">
 <p><strong>注意</strong>: 你可以看到更多有趣的关于 <code>text-shadow</code> 使用的示例在 <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
@@ -453,7 +453,7 @@ p {
 
 <p>有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。</p>
 
-<h3 id="文本对齐">文本对齐</h3>
+<h3 id="Text_alignment">文本对齐</h3>
 
 <p> {{cssxref("text-align")}} 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：</p>
 
@@ -504,9 +504,9 @@ p {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('文本对齐', '100%', 220) }}</p>
+<p>{{ EmbedLiveSample('Text_alignment', '100%', 260) }}</p>
 
-<h3 id="行高">行高</h3>
+<h3 id="Hidden_example2">行高</h3>
 
 <p> {{cssxref("line-height")}} 属性设置文本每行之间的高，可以接受大多数单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 {{cssxref("font-size")}} 来获得 <code>line-height</code>。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:</p>
 
@@ -553,9 +553,9 @@ p {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('行高', '100%', 250) }}</p>
+<p>{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}</p>
 
-<h3 id="字母和单词间距">字母和单词间距</h3>
+<h3 id="Letter_and_word_spacing">字母和单词间距</h3>
 
 <p>{{cssxref("letter-spacing")}} 和 {{cssxref("word-spacing")}} 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 <a href="/zh-CN/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p>
 
@@ -612,7 +612,7 @@ p {
 }</pre>
 </div>
 
-<p>{{ EmbedLiveSample('字母和字间距', '100%', 250) }}</p>
+<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}</p>
 
 <h3 id="其他一些值得看一下的属性">其他一些值得看一下的属性</h3>