CSS引言/语法

CSS(层叠样式表)用于对web页面进行样式设计和布局——**例如，更改内容的字体、颜色、大小和间距，将其分割成多个列，或者添加动画和其他装饰功能。**本模块让您开始掌握CSS的基本知识，包括选择器和属性、编写CSS规则、将CSS应用于HTML、如何在CSS中指定长度、颜色和其他单元、级联和继承以及调试CSS。

要求

在开始这个模块之前，您应该:

1. 基本熟悉电脑的使用，以及被动地使用网络(也就是说，只是看着它，消费内容)。
2. 在安装基本软件时建立的基本工作环境，以及在处理文件时详细了解如何创建和管理文件。
3. 基本熟悉HTML，如HTML模块介绍中所述。

**注意:**如果您使用的计算机/平板电脑/其他设备无法创建自己的文件，那么您可以在JSBin或Thimble之类的在线编码程序中尝试(大多数)代码示例。

向导

本模块包含以下文章，将带您了解CSS的所有基本理论，并为您提供充分的机会来测试一些技能。

CSS是如何工作的

在这个模块中,我们从理论基础开始,看看什么是CSS,浏览器如何HTML变成一个DOM , CSS是如何应用于部分DOM,一些非常基本的语法示例,代码实际上是用来包含我们的CSS网页。

什么是CSS?
CSS(层叠样式表)允许你创建漂亮的网页，但是它是如何工作的呢?本文解释了什么是CSS，浏览器如何将HTML转换为文档对象模型(DOM)， CSS如何应用于DOM的某些部分，一些非常基本的语法示例，以及在web页面中实际包含CSS的代码。

css是如何工作的
当浏览器显示文档时，它必须将文档的内容与其样式信息结合起来。它分两个阶段处理文件:

1. 浏览器将HTML和CSS转换成DOM(文档对象模型)。DOM表示计算机内存中的文档。它将文档的内容与其样式相结合。
2. 浏览器显示DOM的内容。
   
   解析 html /css 称为DOM ，然后显示。

关于DOM
DOM具有类似树的结构。**标记语言中的每个元素、属性和文本片段都成为树结构中的DOM节点。**节点由它们与其他DOM节点的关系定义。有些元素是子节点的父节点，子节点有兄弟节点。

理解DOM有助于设计、调试和维护CSS，因为DOM是CSS和文档内容相遇的地方。

DOM表示
让我们通过一个例子来了解DOM和CSS是如何协同工作的，而不是冗长乏味的解释。
让我们假设以下HTML代码:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

在DOM中，与

元素对应的节点是父节点。它的子节点是一个文本节点和对应于我们的元素的节点。SPAN节点也是父节点，文本节点作为子节点:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

应用CSS到DOM

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

应用下面的css:

span {
  border: 1px solid black;
  background-color: lime;
}

浏览器将解析HTML并从中创建DOM，然后解析CSS。因为CSS中唯一可用的规则有一个span选择器，所以它将把这个规则应用到三个span中的每一个。

如何应用css到html

将CSS应用于HTML文档有三种不同的方法，您通常会遇到，其中一些比其他的更有用。在这里，我们将简要回顾每一个。
外部/内联/内部

CSS语法

接下来，我们将更详细地研究CSS语法，看看属性及其值如何形成声明，多个声明如何形成声明块，以及声明块和选择器如何形成完整的CSS规则。我们通过查看其他CSS语法特性(如注释和空格)来结束本文。

注意: CSS是一种声明性语言，这使得它的语法相当容易理解。此外，它还有一个非常好的错误恢复系统，允许您在不破坏一切的情况下犯错误——例如，不理解的声明通常会被忽略。缺点是很难理解错误从何而来。继续读下去，一切终将明了。

一些词汇
选择器 属性/值。

css声明：

**重要提示:**如果属性未知或值对给定属性无效，则声明将被视为无效，并被浏览器的CSS引擎完全忽略。

**重要提示:**在CSS(和其他web标准)中，美国拼写已经被公认为是坚持不确定性产生的标准。例如，color应该总是拼写为color。颜色不能工作。

CSS声明块
声明以块的形式进行分组，每组声明由一个左大括号({)和一个右括号(})封装。
声明块中包含的每个声明都必须用分号(;)分隔，否则代码将无法工作(或者至少会产生意想不到的结果)。块的最后一个声明不需要用分号结束，尽管这样做通常被认为是一种很好的风格，因为它可以防止在用另一个声明扩展块时忘记添加分号。

**重要提示:**如果链或组中的单个基本选择器无效，比如使用未知伪元素或伪类时，选择器组仍然有效，但会忽略无效的选择器。

CSS语句
CSS规则是样式表的主要构建块—**CSS中最常见的块。**但还有其他类型的块，你偶尔会遇到- CSS规则是所谓的CSS语句的一种类型。其他类型如下:

• At-rules在CSS中用于传递元数据、条件信息或其他描述性信息。它们以at 符号(@)开头 ，后面跟着一个标识符，表示它是哪种规则，然后是某种语法块，以分号(;)结尾。由标识符定义的每种at-rule类型都有自己的内部语法和语义。例子包括:
  • @charset和@import(元数据)
  • @media或@document(条件信息，也称为嵌套语句，参见下面)。
  • @font-face(描述性信息)

@import 'custom.css';

这个at-rule将另一个CSS文件导入到当前CSS中。

• Nested statements是at-rule的一个特定子集，它的语法是一个嵌套的CSS规则块，只有在特定条件匹配时才会应用到文档中:

• @media at-rule内容仅当运行浏览器的设备符合所述条件时才应用;
• @supports at-rule内容只有在浏览器实际支持测试特性时才会应用;
• @document at-rule内容仅在当前页面匹配某些条件时才应用。

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

**重要提示:**任何不是规则集、at-rule或嵌套语句的语句都是无效的，因此将被忽略。

超越语法：让CSS可读
正如您所看到的，CSS语法并不难编写:您编写了一些规则，如果您编写错误，它们将被忽略。然而，即使这样做有效，也有一些值得了解的最佳实践可以使CSS代码更易于使用和维护。

空白格
空白表示实际的空格、制表符和新行。您可以添加空白以使样式表更具可读性。

与HTML一样，浏览器往往会忽略CSS中的大部分空白;很多空白只是为了提高可读性。在我们下面的第一个例子中，**每个声明(和规则开始/结束)**都在自己的行上——这可以说是一种编写CSS的好方法，因为它易于维护和理解:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

你可以像这样写完全一样的CSS，去掉大部分空格——这和第一个例子在功能上是一样的，但我相信你会同意这有点难读:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

您选择的代码布局通常是个人偏好，尽管当您开始在团队中工作时，您可能会发现现有的团队有自己的样式指南，其中指定了要遵循的约定。

注释： /* */

速记：
一些属性，如字体、背景、填充、边框和边距，被称为简写属性——这是因为它们允许您在一行中设置多个属性值，从而节省时间，并使您的代码更整洁。
例如，这一行:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left (the same order as an analog clock). There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

然而这一行：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;