CSS 构建块

本模块从 CSS 第一步 结束的地方继续进行 - 现在你已经熟悉了该语言及其语法,并获得了一些使用它的基本经验,是时候更深入地研究了。该模块着眼于级联和继承、我们可用的所有选择器类型、单位、大小、背景和边框样式、调试等等。

¥This module carries on where CSS first steps left off — now that you've gained familiarity with the language and its syntax, and got some basic experience using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

这里的目的是为你提供一个用于编写合格 CSS 的工具包,并帮助你在继续学习 文本样式CSS 布局 等更具体的学科之前理解所有基本理论。

¥The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

先决条件

¥Prerequisites

在开始本模块之前,你应该:

¥Before starting this module, you should have:

  1. 基本熟悉使用计算机和被动使用网络(即只是查看、消费内容)。
  2. 建立基本工作环境(如 安装基本软件 中详述),并了解如何创建和管理文件(如 处理文件 中详述)。
  3. 基本熟悉 HTML,如 HTML 简介 模块中所述。
  4. 了解 CSS 基础知识,如 CSS 第一步 模块中所述。

注意:如果你正在使用无法创建自己的文件的计算机/平板电脑/其他设备,你可以尝试在线编码程序(例如 JSBinGlitch)中的(大部分)代码示例。

¥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 Glitch.

指南

¥Guides

本模块包含以下文章,涵盖 CSS 语言最重要的部分。在此过程中,你会遇到大量练习来测试你的理解程度。

¥This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.

CSS 选择器

有多种可用的 CSS 选择器,可以在选择要设置样式的元素时实现细粒度的精度。在本文及其子文章中,我们将详细介绍不同的类型,看看它们是如何工作的。各分条如下:

级联、特异性和继承

本课程的目的是加深你对 CSS 一些最基本概念(级联、特异性和继承)的理解,这些概念控制着 CSS 如何应用于 HTML 以及如何解决冲突。

级联层

本课程旨在向你介绍 级联层,这是一项基于 CSS 级联CSS 特异性 基本概念构建的更高级功能。

盒子模型

CSS 中的所有内容都有一个框围绕着它,理解这些框是能够使用 CSS 创建布局或将项目与其他项目对齐的关键。在本课程中,我们将正确了解 CSS 盒模型,以便你能够在了解其工作原理以及与其相关的术语的情况下继续执行更复杂的布局任务。

背景和边框

在本课中,我们将了解一些可以使用 CSS 背景和边框进行的创造性操作。通过添加渐变、背景图片和圆角、背景和边框,可以解决 CSS 中的许多样式问题。

处理不同的文本方向

近年来,CSS 不断发展,以便更好地支持不同的内容方向性,包括从右到左以及从上到下的内容(例如日语) - 这些不同的方向性称为书写模式。随着你学习的进步并开始使用布局,了解写作模式将对你非常有帮助,因此我们将在本文中介绍它们。

内容溢出

在本课中,我们将了解 CSS 中的另一个重要概念 - 溢出。当盒子里的内容太多而无法轻松容纳时,就会发生溢出。在本指南中,你将了解它是什么以及如何管理它。

CSS 值和单位

CSS 中使用的每个属性都有一个或一组该属性允许的值。在本课程中,我们将了解一些最常用的值和单位。

在 CSS 中调整项目大小

在到目前为止的各种课程中,你已经遇到了多种使用 CSS 调整网页上项目大小的方法。了解设计中不同功能的大小非常重要,在本课中,我们将总结元素通过 CSS 获取大小的各种方式,并定义一些有关大小的术语,这将在将来对你有所帮助。

图片、媒体和表单元素

在本课中,我们将了解 CSS 中如何处理某些特殊元素。就使用 CSS 设置样式的能力而言,图片、其他媒体和表单元素的行为与常规框略有不同。了解什么是可能的、什么是不可能的可以避免一些挫败感,本课程将重点介绍你需要了解的一些主要内容。

样式表

设计 HTML 表格的样式并不是世界上最迷人的工作,但有时我们都必须这样做。本文提供了使 HTML 表格看起来更美观的指南,并重点介绍了一些特定的表格样式技术。

调试 CSS

有时,在编写 CSS 时,你会遇到 CSS 似乎没有达到你预期的效果的问题。本文将指导你如何调试 CSS 问题,并向你展示所有现代浏览器中包含的 DevTools 如何帮助你找出正在发生的情况。

组织你的 CSS

当你开始处理更大的样式表和大型项目时,你会发现维护巨大的 CSS 文件可能具有挑战性。在本文中,我们将简要介绍一些编写 CSS 使其易于维护的最佳实践,以及你会发现其他人正在使用的一些解决方案,以帮助提高可维护性。

评估

¥Assessments

以下评估将测试你对上述指南中涵盖的 CSS 的理解。

¥The following assessments will test your understanding of the CSS covered in the guides above.

基本的 CSS 理解

此评估测试你对基本语法、选择器、特异性、盒模型等的理解。

制作精美的信头纸

如果你想给人留下正确的印象,在漂亮的信头纸上写一封信可能是一个很好的开始。在此评估中,我们将要求你创建一个在线模板来实现这样的外观。

一个看起来很酷的盒子

在这里,你将获得一些使用背景和边框样式来创建引人注目的框的练习。

也可以看看

¥See also

高级样式效果

本文充当技巧盒,介绍了一些有趣的高级样式功能,例如框阴影、混合模式和滤镜。