CSS building blocks

Translation in progress.

这个模块承接CSS first steps——即你对(CSS)语言和其语法已经足够熟悉、并且有了一些基本的使用经验,该是稍微深入点学习的时候了。这个模块着眼于级联和继承,所有可供使用的选择器类型,单位,尺寸,背景、边框样式,调试,等等等等。

本文目标是,在你进一步了解 text stylingCSS layout之前,为你提供一个助你写出合格CSS和理解所有基本理论的工具箱。

Prerequisites

Before starting this module, you should have:

  1. Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)
  2. A basic work environment set up as detailed in Installing basic software, and an understanding of how to create and manage files, as detailed in Dealing with files.
  3. Basic familiarity with HTML, as discussed in the Introduction to HTML module.
  4. An understanding of the basics of CSS, as discussed in the CSS first steps module.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

Guides

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

层叠和继承
本节目标是帮你建立对——层叠、优先级和继承——这三个最基本的CSS概念的理解。这些概念控制着CSS如何应用于HTML以及应用时的优先顺序。
CSS选择器
有各种类型的CSS选择器,以供我们精确选出要添加样式的元素。在本文及其子文章中,我们会详细过一遍不同类型的选择器,以此窥探CSS选择器的运行机理。子文章包括:
The box model 盒模型
所有CSS都是包在盒子里的,那么理解这些盒子就是让我们能够创建CSS布局或排列元素的关键点了。为了接下来能完成编写复杂布局的任务,本节我们会认真看看CSS盒模型,了解其原理及相关术语。
Backgrounds and borders
In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.
Handling different text directions
In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.
Overflowing content
In this lesson we will look at another important concept in CSS — overflow. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.
Values and units
Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.
Sizing items in CSS
In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.
Images, media, and form elements
In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
Styling tables
Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.
Debugging CSS
Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.
Organizing your CSS
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.

See also

Advanced styling effects
This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.