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

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

DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段成为树结构的一个 DOM node. 这些节点由它们与其他DOM节点的关系所定. 有的元素是子节点的父亲(父节点) , 有的是子节点的兄弟姐妹.

由于DOM是CSS与文档内容的相遇之处,理解DOM 有助于你设计,调试,维护你的CSS .

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;
}

浏览器会解析HTML并由它而创建DOM,之后解析CSS. 由于只有一个可用的span选择器,这个规则将会应用到这三个<span>的每一个上. 新的输出如下:

如何将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).

文档标签和贡献者

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