CSS 构建块

本模块延续了 CSS 第一步 的内容 - 现在您已经熟悉了语言及其语法,并获得了一些使用它的基本经验,现在是时候深入了解了。本模块将探讨级联和继承、我们可用的所有选择器类型、单位、大小、样式化背景和边框、调试等等。

这里的目标是为您提供编写合格 CSS 的工具包,并帮助您了解所有基本理论,然后再继续学习更具体的学科,如 文本样式CSS 布局.

先决条件

在开始本模块之前,您应该具备

  1. 使用计算机和被动使用 Web(即只是查看它,消费内容)的基本熟悉程度。
  2. 安装基本软件 中所述,设置基本的工作环境,以及了解如何创建和管理文件,如 处理文件 中所述。
  3. 对 HTML 的基本熟悉程度,如 HTML 简介 模块中所述。
  4. 了解 CSS 的基础知识,如 CSS 第一步 模块中所述。

注意:如果您在没有创建自己文件的计算机/平板电脑/其他设备上工作,可以尝试在在线编码程序中(大多数)尝试代码示例,例如 JSBinGlitch.

指南

本模块包含以下文章,涵盖了 CSS 语言最基本的部分。在学习过程中,您会遇到许多练习,让您测试您的理解程度。

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 以使其易于维护的最佳实践,以及您在其他人使用的一些解决方案,以帮助提高可维护性。

评估

以下评估将测试您对上面指南中所述 CSS 的理解。

CSS 基础理解

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

创建漂亮的信头纸

如果您想给别人留下好印象,在漂亮的信纸上写一封信是一个很好的开始。在本评估中,我们将挑战您创建一个在线模板来实现这样的外观。

一个看起来很酷的盒子

在这里,您将练习使用背景和边框样式创建引人注目的盒子。