unslug zh-cn: move

4 files changed, 316 insertions, 0 deletions

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
new file mode 100644
index 0000000000..6ddd1d114b
--- /dev/null
+++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html
@@ -0,0 +1,88 @@
+---
+title: 一个漂亮的盒子
+slug: Learn/CSS/Styling_boxes/A_cool_looking_box
+translation_of: Learn/CSS/Building_blocks/A_cool_looking_box
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件：</th>
+   <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的：</th>
+   <td>测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="起点">起点</h2>
+
+<p>在开始评估之前，你需要：</p>
+
+<ul>
+ <li>复制一份<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a>代码，并在一个新的目录下把它们保存为<code>index.html</code> 和 <code>style.css</code>。</li>
+</ul>
+
+<div class="note">
+<p><strong>提醒</strong>：或者你也可以用<a href="http://jsbin.com/" rel="noopener">JSBin</a>或<a href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<code>&lt;style&gt;</code>元素里就好。</p>
+</div>
+
+<h2 id="项目简介">项目简介</h2>
+
+<p>你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。</p>
+
+<h3 id="一般任务">一般任务</h3>
+
+<ul>
+ <li>把CSS链接到HTML里。</li>
+</ul>
+
+<h3 id="样式化盒子">样式化盒子</h3>
+
+<p>给{{htmlelement("p")}}添加样式：</p>
+
+<ul>
+ <li>一个对于大按钮来说合理的宽度，200像素左右。</li>
+ <li>一个对于大按钮来说合理的高度，并使文本纵向居中。</li>
+ <li>居中文本。</li>
+ <li>用<code>rem</code>使字体稍大一点，大约17-18像素，在注释里说说你的值是怎么算出来的。</li>
+ <li>给你的设计定一个基础颜色，把它作为盒子的背景颜色。</li>
+ <li>把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。</li>
+ <li>一个精巧的圆角边框。</li>
+ <li>一个跟基础颜色相近、1像素宽的实线边框，颜色要稍深一点。</li>
+ <li>一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在30%的处渐变到0.2的不透明度，然后保持相同颜色到最后。</li>
+ <li>多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的3D外观。</li>
+</ul>
+
+<h2 id="范例">范例</h2>
+
+<p>完成之后的盒子可能会像下面的截图这样：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p>
+
+<h2 id="评估">评估</h2>
+
+<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在<a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a>或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p>
+
+<h2 id="在这个模块里">在这个模块里</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap">盒模型概要</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Backgrounds" rel="nofollow">背景</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Borders">边框</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables">样式化表格</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">高级盒效果</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper" rel="nofollow">创建精美的信纸</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box" rel="nofollow">一个漂亮的盒子</a></li>
+</ul>
+
+<p>​​​ </p>
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
new file mode 100644
index 0000000000..692071dfde
--- /dev/null
+++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html
@@ -0,0 +1,101 @@
+---
+title: 创建精美的信纸
+slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper
+translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件：</th>
+   <td>在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。</td>
+  </tr>
+  <tr>
+   <th scope="row">目的：</th>
+   <td>测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="起点">起点</h2>
+
+<p>在开始评估之前，你需要：</p>
+
+<ul>
+ <li>复制一份<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a>和<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a>代码，并在一个新的目录下把它们保存为<code>index.html</code> 和 <code>style.css</code>。</li>
+ <li>在同一个目录下下载这几张图片：<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">顶部</a>、<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">底部</a>和<a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">标志</a>。</li>
+</ul>
+
+<div class="note">
+<p><strong>提醒</strong>：或者你也可以用<a href="http://jsbin.com/">JSBin</a>或<a href="https://thimble.mozilla.org/">Thimble</a>这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<code>&lt;style&gt;</code>元素里就好。</p>
+</div>
+
+<h2 id="项目简介">项目简介</h2>
+
+<p>你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：</p>
+
+<h3 id="信纸主体">信纸主体</h3>
+
+<ul>
+ <li>把CSS链接到HTML文档里。</li>
+ <li>给信纸添加这样一个背景：
+  <ul>
+   <li>把之前下载的顶部图片固定到信纸顶部。</li>
+   <li>把之前下载的底部图片固定到信纸底部。</li>
+   <li>为了给信纸一点纹理，在前面背景的基础上添加一个半透明的渐变，使其在顶部和底部附近稍微变暗，但中间的大部分完全透明。</li>
+  </ul>
+ </li>
+ <li>多添加一个<code>background</code>声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。</li>
+ <li>给信纸添加一个白色的背景颜色。</li>
+ <li>给信纸添加一个1mm的上下实线边框，选一个符合信纸的颜色主题的边框颜色。</li>
+</ul>
+
+<h3 id="标志">标志</h3>
+
+<ul>
+ <li>把之前下载的标志图片添加为{{htmlelement("h1")}}的背景图片。</li>
+ <li>给标志添加一个过滤器，使它有一个隐隐约约的阴影。</li>
+ <li>现在把添加的过滤器注释掉，尝试用其他（更跨浏览器兼容）的方式实现一个相同的阴影，阴影需要同样符合圆形图片的形状。</li>
+</ul>
+
+<h2 id="提示和技巧">提示和技巧</h2>
+
+<ul>
+ <li>记住，你可以这样为较旧的浏览器创建一个后备方案：先写一个较旧的浏览器支持的后备声明，然后再接着写只有较新的浏览器才支持的声明。这样比较旧的浏览器会应用第一个声明而忽略掉第二个不支持的声明，与此同时比较新的浏览器会先应用第一个声明，然后用第二个声明把它覆盖掉。</li>
+ <li>如果想的话你可以随意地用自己的图片来做这个评估。</li>
+</ul>
+
+<h2 id="范例">范例</h2>
+
+<p>完成之后的信纸可能会像下面的截图这样：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p> </p>
+
+<h2 id="评估">评估</h2>
+
+<p>如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 <a href="https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684/1">discussion thread for this exercise</a> 或<a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>的<a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="在这个模块里">在这个模块里</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap">盒模型概要</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Backgrounds">背景</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Borders">边框</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Styling_tables">样式化表格</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">高级盒效果</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">创建精美的信纸</a></li>
+ <li><a href="/zh-CN/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">一个漂亮的盒子</a></li>
+</ul>
+
+<p> </p>
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
new file mode 100644
index 0000000000..b246af87fe
--- /dev/null
+++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html
@@ -0,0 +1,127 @@
+---
+title: 基本的CSS理解
+slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension
+tags:
+  - 初学者
+  - 盒模型
+  - 评估
+  - 选择器
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+
+<p class="summary">你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">学习本章的前提条件:</th>
+   <td>在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标：</th>
+   <td>来测试对 CSS 理论、语法、功能性的基本理解。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="起点">起点</h2>
+
+<p>在开始测验之前，你应该:</p>
+
+<ul>
+ <li>将 <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML file for the exercise</a>, 和 <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">associated image file</a>,拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话，也没有问题，不过需要保证你提供的图像是正方形的。</li>
+ <li>下载 <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS resources text file</a> 到你的本地环境，这个文件包含了一组原始选择器和规则集。你需要学习并将他们组合，这是测验的一部分。</li>
+</ul>
+
+<div class="note">
+<p><strong>注意</strong>: 另外, 你可以使用一个网站比如 <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">this URL</a> 来让 <code>&lt;img&gt;</code> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<code>&lt;style&gt;</code> 元素中。</p>
+</div>
+
+<h2 id="项目概要">项目概要</h2>
+
+<p>我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。</p>
+
+<p>基本设置:</p>
+
+<ul>
+ <li>首先，在你放 HTML 文件和图像文件的目录下，创建一个新的文件，把它命名为类似<code>style.css</code>。</li>
+ <li>通过 <code>&lt;link&gt;</code> 元素来将你的 CSS 链接到 HTML 文件中。</li>
+ <li>我们为你提供的 CSS 资源文本文件中，前两项规则集是我们设置好的，你可以直接使用，所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为测验，用来确认你是否正确链接了你的 CSS 文件到 HTML 中。</li>
+ <li>在以上的两条规则中添加一条 CSS 注释，注释中要包含一些文本来表明这是整体页面的一般样式。你可以在 CSS 文件底部添加 3 个或以上的注释，来明确地表明该样式是应用到卡片的容器，应用到标题和页脚的样式，和名片主要内容的样式。从现在开始，随后在样式表添加的样式都应该有组织地放置在合适的地方。</li>
+</ul>
+
+<p>关注我们为你提供的选择器和规则集：</p>
+
+<ul>
+ <li>接下来, 我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。</li>
+ <li>现在是时候把正确的选择器放在正确的规则集上了！你的 CSS 资源中有四对选择器和规则集需要匹配，现在就开始匹配，并将它们添加到你的 CSS 文件。你需要：
+  <ul>
+   <li>为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。</li>
+   <li>为header提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。</li>
+   <li>为footer提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。</li>
+   <li>将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100% (一个聪明的技巧，来确保它将放大/缩小，与父容器保持同样的高度，不管它变成什么高度。)</li>
+  </ul>
+ </li>
+ <li>注意！提供的规则集中有两个错误。使用你知道的任何技术找到这些错误并修复，然后再继续。</li>
+</ul>
+
+<p>你需要写的新规则：</p>
+
+<ul>
+ <li>编写一个同时面向 card head 和 card footer 的规则集,使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding ）但用 <code>em</code> 来表示。</li>
+ <li>浏览器会为<code>&lt;h2&gt;</code> 和 <code>&lt;p&gt;</code>元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集： margin 设置为 0。</li>
+ <li>为了阻止图像溢出名片的主要内容 ( <code>&lt;article&gt;</code> 元素)，我们需要给它设置一个明确的高度。设置 <code>&lt;article&gt;</code>的高度为 120px，但是使用 <code>em</code>来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。</li>
+ <li>编写一个规则集，使 <code>&lt;h2&gt;</code> 有效的字体大小为 20px (使用 <code>em</code>表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。</li>
+ <li>为页脚中的 <code>&lt;p&gt;</code> 编写一个规则集，使它的有效字体大小为 15px (使用 <code>em</code>表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是30px，你所有需要的数字都已经给你了，所以可以计算出行高。</li>
+ <li>最为最后一步, 为 <code>&lt;article&gt;</code> 中的段落设置一个合适的 padding 值，让它和 <code>&lt;h2&gt;</code> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。</li>
+</ul>
+
+<div class="note">
+<p><strong>注意</strong>: 记住第二条规则集会将 <code>font-size: 10px;</code> 设置在 <code>&lt;html&gt;</code> 元素上 — 这意味着 <code>&lt;html&gt;</code> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 <code>font-size</code> 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <code>&lt;html&gt;</code> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)</p>
+</div>
+
+<p>其他事情要考虑：</p>
+
+<ul>
+ <li>如果你编写的 CSS 有比较好的可读性，并在每行上单独声明，你将得到奖励。</li>
+ <li>你应该在所有规则的选择器中都用 <code>.card</code> 作为开头，这样的好处是：如果将名片放在带有其他内容的页面的情况下，这些规则不会干扰其他元素的样式。</li>
+</ul>
+
+<h2 id="注意和提示">注意和提示</h2>
+
+<ul>
+ <li>你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML 。</li>
+ <li>当使用 <code>em</code> 值代表一些你需要的像素长度的时候，想想 (<code>&lt;html&gt;</code>) 元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你 em 的值，至少在这样一个简单的情况下。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<p>完成的设计应如下图所示：</p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="评估">评估</h2>
+
+<p>如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问  <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, 或在 <a href="irc://irc.mozilla.org/mdn">#mdn</a>的IRC频道 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> 中轻松获得打分指南. 首先尝试练习 - 作弊学不到什么！</p>
+
+<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
+
+<h2 id="在本单元中">在本单元中</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">How CSS works</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS syntax</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Simple selectors</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Attribute selectors</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinators and multiple selectors</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">The box model</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></li>
+</ul>
diff --git a/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html
index f907c93a3c..f907c93a3c 100644
--- a/files/zh-cn/learn/css/building_blocks/处理_不同_方向的_文本/index.html
+++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html