CSS学习一：CSS如何工作

CSS学习一：CSS如何工作

1.什么是CSS

CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。

文档通常是用标记语言结构化的文本文件 — HTML 是最常用的标记语言, 但也有其他的标记语言，比如 SVG 或者 XML。

呈现文档给用户意味着将其转换为用户可用的形式。浏览器，比如 Firefox, Chrome 或者 Internet Explorer，被设计用于可视化呈现文档。

2. CSS如何影响HTML

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

一组属性，属性的值更新了 HTML 的内容的显示方式。比如，我想让元素的宽度是其父元素的50％，或者元素背景变为红色。
一个选择器，它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。比如，我想将我的CSS规则应用到我HTML文档中的所有段落上。

样式表中的一组CSS规则确定了网页如何显示。

一个CSS示例

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是标题元素）边框（border）设置为：1像素宽、实线（不是虚线、点线等）、颜色黑色。

第二个规则从 p 选择器开始，这意味着它将其属性值应用到 “ 元素上。它包含一条声明，该声明设置字体颜色为红色。

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

这里写图片描述

3. CSS实际上如何工作

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
浏览器显示 DOM 的内容。

DOM

DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。

由于 DOM 是 CSS 与文档内容的相遇之处，理解 DOM 有助于设计，调试和维护 CSS 文件。

DOM的表示

先看一段HTML代码：

<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"

这就是浏览器解释先前的HTML片段的过程 —它渲染上述的DOM树，之后在浏览器中像这样输出它。

应用CSS到DOM

如果将下面CSS应用到上面HTML上：

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

浏览器会解析 HTML 并通过它创建 DOM，之后解析 CSS。由于 CSS 只有一个可用的规则，该规则有一个span选择器，它会将这个规则应用到这三个<span>的每一个上。更新后的输出如下所示：

这里写图片描述

## 4. 将 CSS 应用到 HTML 上

4.1 外部样式表

将 CSS 保存在一个独立的扩展名为 .css 的文件中，并从HTML的 “中引用它，即CSS与HTML是两个文件。

4.2 内部样式表

将你的 CSS 放置在

<!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 将需要在每个页面重复，并且需要更新时要更改的多个位置。

4.3 内联样式

内联样式是仅影响一个元素的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 难以阅读和理解。