CSS如何工作

这篇翻译不完整。请帮忙从英语翻译这篇文章

CSS (层叠样式表)允许你创建看起来很棒的网页,但它是如何工作的?这篇文章解释了什么是 CSS,浏览器是怎么把 HTML 转换为文档对象模型  (DOM),如何将 CSS 应用于 DOM 的各个部分,一些基础语法实例和我们的网页实际上包含怎样的 CSS 代码。

Prerequisites: Basic computer literacy, basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.)
Objective: To learn what CSS is, and how it works at a basic level.

什么是 CSS?

CSS是一种用于指定如何向用户呈现文档的语言 —如何指定他们的风格,布局 etc.

一个网页文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 但你依然可以遇见一些其他的标记语言,比如SVG或者XML| SVG or XML.

Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.

CSS如何影响HTML??

Web浏览器将CSS规则应用于文档以影响它们的显示方式。 CSS规则由以下形成:

  • 一组 属性 的集合,它的内容表示 HTML 的内容如何呈现。比如,我想让元素的宽度是其父元素的50%,元素背景是红色。
  • 一个 选择器,它选择了要应用这些属性值的元素。比如,我想要应用我的CSS规则到HTML文档中的所有段落。

样式表中包含的一组CSS规则确定了网页的外观,你将在下一篇文章中了解更多关于CSS语法的内容 — CSS Syntax.

一个基础CSS示例

上面的描述可能意义不明确,所以让我们通过提出一个快速示例来确保清楚描述的。首先,我们使用一个简单的HTML文档,包含一个 <h1> 元素和一个 <p> 元素((注意到,使用 <link> 元素将样式表应用到 HTML):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

现在让我们看一个非常简单的CSS示例,其中包含两个规则:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

第一条规则使用 h1 选择器开始,这意味着它将其属性值应用到 <h1> 元素,它包含三个属性及其值(每个属性/值对称为声明):

  1. 第一个声明设置文本的颜色是蓝色;
  2. 第二个声明将背景颜色设置为黄色;
  3. 第三个声明在标题周围放置一个1像素宽的边框,实线(不是虚线、点线等),边框颜色是黑色。

第二个规则从 p 选择器开始,这意味着规则仅仅对 <p> 元素生效。它包含一条设置字体颜色为红色的声明。

在Web浏览器中,上面的代码将产生以下输出:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

这不怎么好看,但是说明了 CSS 是如何工作的。

主动学习:编写第一个CSS

现在我们给你一个机会来编写自己的一点CSS。你可以使用下面的实时可编辑示例的输入区域,有一些简单的HTML元素和一些CSS属性,用类似于上面看到的方式,试着添加一些简单的样式声明到你的CSS,来定义 HTML 的样式。

如果写错了,你可以随时点击 “重置” 按钮重置。如果你真的不知道怎么写,点击显示结果按钮看到一个可行的回答。

CSS实际上如何工作?

当浏览器显示文档时,它将文档的内容与其样式信息组合。它分两个阶段处理文档:

  1. 浏览器转化 HTMLCSS 成 DOM文档对象模型). DOM表示计算机内存中的文档。它把文档的样式和内容融合在一起。
  2. 浏览器展现 DOM 的内容。

关于 DOM

A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.

DOM representation

没有漫长而无聊的解释,让我们通过一个例子来看 DOM 和 CSS 如何在一起工作。

我们假设有下面一段代码:

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

在该 DOM 中,<p> 元素对应的节点是父节点。它的子节点是一个文本节点和 <span> 元素对应的节点。SPAN 结点也是父节点,文本节点作为它们的子节点:

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

This is how a browser interprets the previous HTML snippet —it renders the above DOM tree and then outputs it in the browser like so:

应用 CSS 到 DOM

Let's say we added some CSS to our document, to style it. Again, the HTML is as follows:

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

If we apply the following CSS to it:

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

The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:

如何将CSS应用到HTML

有三种不同的方式将CSS应用于HTML文档,有的方式比其他方式更有用。在这里,我们将简要回顾一下每一种方式:

外部样式表

你已经在这篇文章看到了外部样式表,但是并不知道它的名字。外部样式表是你的CSS写在一个单独的扩展名为.css的文件中,并从HTML <link> 元素中引用它,此时 HTML 文件看起来像这样:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

增加以下 CSS 文件

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

这种方法是最好的,因为你可以使用一个样式表来设置多个文档的样式,并且更新的时候只需要在一个地方更新CSS。

内部样式表

内部样式表是指不使用外部 CSS 文件,而是将你的 CSS 放置在包含在 HTML head 内的 <style> 元素中。此时HTML看起来像这样:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

这在某些情况下很有用(也许你正在使用一个内容管理系统,不能直接修改CSS文件),但它不如外部样式表高效,在网站中,CSS将需要在每个页面重复,并且更新的时候需要更改的多个页面。

内联样式

内联样式是仅影响一个元素的CSS声明,被 style 属性包括着:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

在非必要的情况下不要这么做,这样很难维护(你可能在每个文档的多个地方需要更新多次同样的信息),并且它将 CSS 的样式和 HTML 结构混合在一起,使CSS难以阅读和理解。保持不同类型的代码分离和纯净使得开发和维护代码更为容易。

您唯一使用内联样式是当您的工作环境是受限制性的(也许您的CMS只允许您编辑HTML主体)。

下一步

到了这里你应该理解了 CSS 的基本工作原理和你的浏览器如何处理 CSS。接下来你将会学习 CSS 语法 (CSS syntax).

文档标签和贡献者

 此页面的贡献者: keifergu, ziyunfei, tcatche, funnyChinese
 最后编辑者: keifergu,