什么是 CSS？-CFANZ编程社区

CSS（级联样式表）允许您创建美观的网页，但是它如何在引擎盖下工作？本文通过一个简单的语法示例解释了CSS是什么，并且还介绍了有关该语言的一些关键术语。

先决条件：	基本的计算机知识，安装的基本软件，处理文件的基础知识和HTML基础知识（学习HTML简介。
目的：	了解什么是 CSS。

在 HTML 简介模块中，我们介绍了什么是 HTML 以及如何使用它来标记文档。这些文档在 Web 浏览器中可读。标题看起来比常规文本大，段落会断开到新行上，并且它们之间有空格。链接带有颜色和下划线，以将其与文本的其余部分区分开来。您看到的是浏览器的默认样式 - 非常基本的样式 - 浏览器应用于HTML以确保页面基本上是可读的，即使页面的作者没有指定显式样式。

什么是 CSS？_css

但是，如果所有网站都看起来像这样，网络将是一个无聊的地方。使用CSS，您可以精确控制HTML元素在浏览器中的外观，使用您喜欢的任何设计来呈现您的标记。

有关浏览器/默认样式的更多信息，请观看以下视频：

CSS的用途是什么？

正如我们之前提到的，CSS是一种用于指定如何将文档呈现给用户的语言 - 如何设置文档的样式，布局等。

文档通常是使用标记语言构建的文本文件 — HTML 是最常见的标记语言，但您也可能会遇到其他标记语言，如 SVG 或 XML。

向用户呈现文档意味着将其转换为可供受众使用的表单。浏览器，如 Firefox，Chrome 或 Edge ，旨在直观地呈现文档，例如，在计算机屏幕，投影仪或打印机上。

注意：浏览器有时被称为用户代理，它基本上意味着代表计算机系统内一个人的计算机程序。浏览器是我们在谈论CSS时想到的主要用户代理类型，但是，它们并不是唯一的。还有其他可用的用户代理，例如那些将HTML和CSS文档转换为要打印的PDF的代理。

CSS 可用于非常基本的文档文本样式，例如，用于更改标题和链接的颜色和大小。它可用于创建布局，例如，将单列文本转换为具有主要内容区域和相关信息侧边栏的布局。它甚至可以用于动画等效果。请查看本段中的链接以获取具体示例。

CSS 语法

CSS 是一种基于规则的语言 — 您可以通过指定应应用于网页上特定元素或元素组的样式组来定义规则。

例如，您可以决定将页面上的主标题显示为大红色文本。下面的代码显示了一个非常简单的 CSS 规则，该规则将实现上述样式：

h1 {
    color: red;
    font-size: 5em;
}

复制到剪贴板

在上面的示例中，CSS 规则使用选择器打开。这将选择我们要设置样式的 HTML 元素。在本例中，我们设置了一级标题的样式（<h1>）。
然后我们有一组大括号。{ }
大括号内将有一个或多个声明，其形式为属性和值对。我们在冒号之前指定属性（在上面的示例中），并在冒号之后指定属性的值（在本例中）。colorred
此示例包含两个声明，一个用于，另一个用于。每对指定我们正在选择的元素的属性（在本例中为 <h1>），然后指定我们要为该属性提供的值。colorfont-size

CSS 属性具有不同的允许值，具体取决于要指定的属性。在我们的示例中，我们有属性，它可以采用各种颜色值。我们也有财产。此属性可以采用各种大小的单位作为值。colorfont-size

CSS样式表将包含许多这样的规则，这些规则一个接一个地编写。

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

复制到剪贴板

你会发现你很快就学会了一些价值观，而另一些你需要查找。MDN上的各个属性页面为您提供了一种快速查找属性及其值的方法，当您忘记或想知道还可以使用什么作为值时。

注意：您可以找到指向 MDN CSS 参考中列出的所有 CSS 属性页（以及其他 CSS 功能）的链接。或者，每当您需要查找有关CSS功能的更多信息时，您应该习惯于在您喜欢的搜索引擎中搜索“mdn css-feature-name”。例如，尝试搜索“mdn颜色”和“mdn字体大小”！

CSS 模块

由于您可以使用CSS设置样式的东西太多了，因此该语言被分解为多个模块。在探索 MDN 时，您将看到对这些模块的引用。许多文档页面都是围绕特定模块组织的。例如，您可以查看MDN对背景和边框模块的引用，以了解其用途以及它包含的属性和功能。在该模块中，您还将找到定义该技术的规范链接（另请参阅下面的部分）。

在这个阶段，你不需要太担心CSS的结构;但是，例如，如果您知道某个属性很可能在其他类似事物中找到，因此可能位于同一规范中，则可以更轻松地查找信息。

对于一个具体示例，让我们回到背景和边框模块 — 您可能认为在此模块中定义背景色和边框颜色属性在逻辑上是有意义的。你是对的。

CSS 规范

所有Web标准技术（HTML，CSS，JavaScript等）都定义在称为规范（或“规范”）的巨型文档中，这些文档由标准组织（如W3C，WHATWG，ECMA或Khronos）发布，并精确定义了这些技术应该如何表现。

CSS也不例外——它是由W3C内部一个名为CSS工作组的小组开发的。该小组由浏览器供应商和其他对CSS感兴趣的公司的代表组成。还有其他人，被称为受邀专家，他们充当独立的声音;它们不与成员组织相关联。

新的CSS功能是由CSS工作组开发或指定的 - 有时是因为特定的浏览器对某些功能感兴趣，有时是因为Web设计人员和开发人员要求功能，有时是因为工作组本身已经确定了要求。CSS在不断发展，新功能也随之可用。然而，关于CSS的一个关键问题是，每个人都非常努力地从不以会破坏旧网站的方式改变事情。一个在2000年建立的网站，使用当时有限的CSS，今天应该仍然可以在浏览器中使用！

作为 CSS 的新手，您很可能会发现 CSS 规范势不可挡 — 它们旨在供工程师用于实现对用户代理中功能的支持，而不是 Web 开发人员阅读以了解 CSS。许多有经验的开发人员更愿意参考MDN文档或其他教程。尽管如此，值得知道的是这些规范的存在，并了解您正在使用的CSS，浏览器支持（见下文）和规范之间的关系。

浏览器支持信息

在指定了CSS功能之后，只有当一个或多个浏览器已经实现了该功能时，它才对我们开发网页有用。这意味着已经编写了代码，以将CSS文件中的指令转换为可以输出到屏幕的内容。我们将在CSS如何工作的课程中更多地研究此过程。所有浏览器同时实现一项功能是不寻常的，因此通常存在一个间隙，您可以在其中在某些浏览器中使用CSS的某些部分，而在其他浏览器中则不能。因此，能够检查实现状态非常有用。

浏览器支持状态显示在名为“浏览器兼容性”的每个MDN CSS属性页面上。请参阅该表中的信息，以检查该属性是否可以在您的网站上使用。有关示例，请参阅 CSS 字体系列属性的浏览器兼容性表。

根据您的要求，您可以使用浏览器兼容性表来检查各种浏览器如何支持此属性，或者检查您的特定浏览器和您拥有的版本是否支持该属性，或者对于您正在使用的浏览器和版本，是否有任何注意事项。