path: root/files/zh-cn/learn/css/building_blocks/index.html

---
title: CSS构建
slug: Learn/CSS/Building_blocks
translation_of: Learn/CSS/Building_blocks
---
<div>{{LearnSidebar}}</div>

<p class="summary">这个模块承接<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>——即你对(CSS)语言和其语法已经足够熟悉、并且有了一些基本的使用经验，该是稍微深入点学习的时候了。这个模块着眼于级联和继承，所有可供使用的选择器类型，单位，尺寸，背景、边框样式，调试，等等等等。</p>

<p class="summary">本文目标是，在你进一步了解 <a href="/zh-CN/docs/Learn/CSS/为文本添加样式">为文本添加样式</a>和<a href="/zh_CN/docs/Learn/CSS/CSS_layout">CSS布局</a>之前，为你提供一个助你写出合格CSS和理解所有基本理论的工具箱。</p>

<h2 id="先决条件">先决条件</h2>

<p>在开始本模块之前，你应该已经掌握：</p>

<ol>
 <li>使用计算机的基本知识，能够被动使用网络（也就是查看网页的内容）。</li>
 <li>建立基本工作环境（详见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a>），知道如何建立和管理文档（详见<a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a>）。</li>
 <li>HTML基础知识（参见<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML介绍</a>模块）。</li>
 <li>CSS基础知识（参见<a href="/zh-CN/docs/Learn/CSS/First_steps">学习CSS 第一步</a>模块）。</li>
</ol>

<div class="note">
<p><strong>注意：</strong>如果你此刻正使用一台电脑/笔记本/其他设备，而你无法创建自己的文件，那你可以在诸如JSBin或Thimble等网络编辑程序上尝试（多数）程序案例。 </p>
</div>

<h2 id="指南">指南</h2>

<p>本模块包含以下文章，这些文章覆盖了绝大部分CSS语言基础。在学习这些文章的过程中，会有很多练习题供你检验自己的理解程度。</p>

<dl>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠与继承 </a></dt>
 <dd>本节目标是帮你建立对——层叠、优先级和继承——这三个最基本的CSS概念的理解。这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></dt>
 <dd>有各种类型的CSS选择器，以供我们精确选出要添加样式的元素。在本文及其子文章中，我们会详细过一遍不同类型的选择器，以此窥探CSS选择器的运行机理。子文章包括了：</dd>
 <dd>
 <ul>
  <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类以及ID选择器</a></li>
  <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li>
  <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类与伪元素</a></li>
  <li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li>
 </ul>
 </dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></dt>
 <dd>所有CSS都是包在盒子里的，那么理解这些盒子就是让我们能够创建CSS布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务，本节我们会认真看看<em>CSS盒模型</em>，了解其原理及相关术语。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框 </a></dt>
 <dd>在这一节课中，我们将会看一下你可以用CSS对背景和边框进行哪些创新。通过添加渐变、背景图片和圆角，背景和边框可以解决许多CSS中的样式问题。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同的文本方向</a></dt>
 <dd>最近几年来，CSS进行了演化，以更好地支持不同方向的内容，既包括自左至右，又包括自上至下（如日语）的内容——这些不同的排布方向被称作书写模式。随着你在这部分学习中不断前进并开始设计网页布局，理解书写模式将会非常有帮助，因此我们会在本文中进行介绍。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></dt>
 <dd>这一节我们会关注CSS中的另一个重要的概念——溢出。溢出发生在一个盒子中包含了过多内容以致超出适当的范围时。在这篇指南中，你将学到什么是溢出以及如何处理它。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">值和单位</a></dt>
 <dd>CSS中每一个属性都有一个取值或者一系列合理的取值。这一节，我们将了解一些最常用的取值和单位。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在CSS中调整大小</a></dt>
 <dd>通过目前为止的一系列课程，你已经了解了许多使用CSS调整网页项目大小的方法。了解你所设计的不同特性将呈现的大小很重要，我们将在这节课中总结使用CSS调整大小的不同方法，并定义几个有关尺寸的术语，这将对你有所帮助。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图片、媒体和表单元素</a></dt>
 <dd>在这一节，我们会了解CSS是如何处理一些特殊元素的。与常规的盒子相比，图片、其他媒体和表格元素对你使用CSS设置样式的能力提出了不同的要求。理解什么能够实现和什么不能够实现将会免去你一些沮丧，这节课会突出一些你需要了解的主要问题。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></dt>
 <dd>设计HTML表格的样式并不是多么美妙的工作，但有时却是我们都需要去做的。这篇文章通过突出一些特定的表格样式技巧，为设计好看的HTML表格提供了一份指南。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试CSS</a></dt>
 <dd>有时在编写CSS的过程中，你会遇到这样一个问题：你的CSS并没有实现你想要的效果。这篇文章将为你提供指导，教你如何调试CSS问题，以及如何使用所有现代浏览器带有的开发者工具找到问题所在。</dd>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织CSS</a></dt>
 <dd>当你开始处理更大的样式表和项目时，你将会发现维护一个庞大的样式表非常具有挑战性。在这篇文章中，我们将会简要了解使得CSS易于维护的最佳做法，以及其他人所使用的一些有助于增进可维护性的解决方案。</dd>
</dl>

<h2 id="评估">评估</h2>

<p>想要测试一下你的CSS技能吗？下面这些评估将测试你对以上那些指南中的CSS技能的掌握。</p>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">CSS基本了解</a></p>

<p>这项评估测试你对基本语法、选择器、特异性、盒子模型的掌握。</p>

<p><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">设计漂亮的信头信笺</a></p>

<p>如果你想留下良好的印象，用一张漂亮的信头信笺写一封信一定是个好的开始。在这一评估中，你将挑战创建这样一个漂亮的网络样板。</p>

<p><a href="/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box">一个炫酷的盒子</a></p>

<p>在这里，你将练习使用背景和边距来创建一个吸引眼球的盒子。</p>

<h2 id="另见">另见</h2>

<dl>
 <dt><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">高级区块效果</a></dt>
 <dd>这篇文章展示了盒子的小技巧，提供了一些高级特性的介绍，这些特性不适合其他类别的样式，比如盒子阴影、混合模式和滤镜。</dd>
</dl>