理解CSS|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第1天

一、 CSS介绍

CSS(Cascading Style Sheet)层叠样式表,HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

CSS 是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”

下面这段代码使用非常简单的 CSS 规则实现了之前提到的效果：

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

语法由一个选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题<h1> (en-US)）添加样式。

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性 (properties) (en-US)对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多[颜色值]；还有 font-size 属性，它可以接收许多 [size units]值。

一个 CSS 样式表可以包含很多个规则。

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

p {
    color: black;
}

你可以通过 CSS 为许多东西添加样式，CSS 由许多模块 (modules) 构成。你可以在 MDN 上浏览这些模块的参考内容 (MDN reference)，许多模块都被组织在自己单独的文档页面。了解它是用来做什么的、它还包括什么属性、它还有什么其它特性等。

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

浏览器载入 HTML 文件（比如从网络上获取）。
将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。
接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。
浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
网页展示在屏幕上（这一步被称为着色）。

HTML和CSS是一对离不开的兄弟。单纯HTML方法控制元素样式的缺点：

CSS拥有更专业的样式修饰方法，不需要改一处动全局，更简便的样式修饰方法，更简约的布局方法