CSS 样式基础

预备知识

在开始本模块之前，您应该已经设置好基本的工作环境（详见安装基本软件），并了解如何创建和管理文件（详见处理文件）。您还应该熟悉 HTML（如果不熟悉，请学习我们的使用 HTML 结构化内容模块）。

教程与挑战

什么是 CSS？

CSS 允许您创建美观的网页，但它在底层是如何工作的呢？本文将解释什么是 CSS，基本语法是什么样的，以及您的浏览器如何将 CSS 应用到 HTML 以进行样式设置。

CSS 入门

在本文中，我们将使用一个简单的 HTML 文档并对其应用 CSS，在此过程中学习该语言的一些实用细节。我们还将回顾您尚未了解的 CSS 语法特性。

样式化个人简介页面 ^挑战

在此挑战中，您将样式化一个简单的个人简介页面，测试您在过去几课中学习到的一些技能，包括编写选择器、设置背景颜色和文本样式。我们还将邀请您查阅一些我们尚未涵盖的基本 CSS 功能，以测试您的研究能力。

基本 CSS 选择器

在本文中，我们将回顾一些选择器基础知识，包括基本的类型、类和 ID 选择器。

属性选择器

正如您从 HTML 学习中了解到的，元素可以具有属性，这些属性提供有关正在标记的元素的更多详细信息。在 CSS 中，您可以使用属性选择器来定位具有特定属性的元素。本课程将向您展示如何使用这些非常有用的选择器。

伪类和伪元素

我们将要了解的下一组选择器被称为伪类和伪元素。它们的数量很多，而且通常服务于非常特定的目的。一旦您知道如何使用它们，您就可以浏览不同的类型，看看是否有适合您正在尝试完成的任务的东西。

组合器

我们将要了解的最后选择器称为组合器。组合器用于以一种方式组合其他选择器，使我们能够根据元素在 DOM 中相对于其他元素的位置（例如，子元素或兄弟元素）来选择元素。

盒模型

CSS 中的所有内容周围都有一个框，理解这些框是使用 CSS 创建更复杂布局或将项目与其他项目对齐的关键。在本课程中，我们将了解 CSS 盒模型。您将了解它的工作原理以及与之相关的术语。

处理冲突

本课程的目的是加深您对 CSS 最基本概念的理解 — 层叠、特异性和继承 — 这些概念控制着 CSS 如何应用于 HTML 以及如何解决样式声明之间的冲突。

修复博客页面样式 ^挑战

在此挑战中，我们为您提供了一个部分样式化的基本博客页面示例。我们需要您解决现有 CSS 的一些问题并添加一些样式来完成它。在此过程中，我们将测试您对选择器、盒模型和冲突/层叠的知识。

值和单位

CSS 规则包含声明，声明又由属性和值组成。CSS 中使用的每个属性都有一个值类型，它描述了它允许拥有哪种类型的值。在本课程中，我们将了解一些最常用的值类型、它们是什么以及它们如何工作。

CSS 中的尺寸调整元素

了解设计中不同功能的大小非常重要。在本课程中，我们将总结元素通过 CSS 获取大小的各种方式，并定义一些有关大小的术语，这些术语将来会对您有所帮助。

背景和边框

在本课程中，我们将了解您可以使用 CSS 背景和边框做的一些创意事情。从添加渐变、背景图像和圆角，背景和边框是 CSS 中许多样式问题的答案。

挑战：调整和装饰内容面板 ^挑战

在此挑战中，您将获得一个轻度样式化的页面结构，该结构呈现一个内容面板，顶部有一个标题，底部有一个按钮栏。我们希望您按照说明调整和装饰它，从而产生一个有趣的布局。在此过程中，我们将测试您对 CSS 值和单位、大小以及背景和边框的知识。

溢出内容

溢出是指内容过多而无法容纳在元素框内的情况。在本课程中，您将学习如何使用 CSS 管理溢出。

图片、媒体和表单元素

在本课程中，我们将了解 CSS 中某些特殊元素的处理方式。图像、其他媒体和表单元素在您使用 CSS 设置样式方面的行为与普通盒子略有不同。了解哪些可能哪些不可能可以节省一些挫败感，本课程将强调您需要了解的一些主要事项。

表格样式

样式化 HTML 表格并不是世界上最迷人的工作，但有时我们都必须这样做。本文解释了如何使 HTML 表格看起来美观，并突出显示了一些特定的表格样式技术。

调试 CSS

本文将指导您如何调试 CSS 问题，并向您展示所有现代浏览器中包含的开发者工具如何帮助您找出问题所在。

检验你的技能

您会在教程文章之间找到“测试您的技能”文章，以检查您是否在继续之前保留了最重要的信息。如果您想一起探索所有这些，您可以在测试您的技能：CSS 样式基础中找到它们。

附加教程

这些教程不属于学习路径，但它们仍然很有趣——您应该将这些视为进阶目标，在完成主要的“核心”文章后可选择学习。

高级样式效果

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

层叠层

本课程旨在向您介绍层叠层，这是一个更高级的功能，它建立在CSS 层叠和CSS 特异性的基本概念之上。

处理不同的文本方向

近年来，CSS 已经发展，以更好地支持不同的内容方向性，包括从右到左以及从上到下的内容（例如日语）— 这些不同的方向性称为书写模式。随着您学习的深入并开始处理布局，理解书写模式将对您非常有帮助，因此我们将在本文中介绍它们。

组织 CSS

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

另见

学习 HTML 和 CSS, Scrimba ^{MDN 学习合作伙伴}

Scrimba 的《学习 HTML 和 CSS》课程通过构建和部署五个精彩项目，以及由知识渊博的老师教授的有趣互动课程和挑战，教您 HTML 和 CSS。

编写您的第一行 CSS！，Scrimba ^{MDN 学习伙伴}

本互动课程提供了对 CSS 语法的有用介绍。

• 概述：核心学习模块
• 下一页