1 CSS 相关定义
CSS（Cascading Style Sheets 层叠样式表）：用来控制 HTML 的表现。 CSS 决定页面好不好看、动画效果酷不酷炫。
HTML+CSS 是一个静态页面的基本组成。就好比一个女生在有基本的身体五官（HTML）后，又对自己打扮了下：化了妆、梳了发型、穿了好看的衣服（CSS）。
2 CSS 工作原理
- 首先，当我们在浏览器上输入一个 URL 并回车后，浏览器向服务器发了一个请求，服务器就把相应的数据——HTML 返回给浏览器。
- 然后，浏览器拿到这个数据后就加载这个页面，去解析这个 HTML。怎样去解析呢：浏览器得到的字符串，它会对其做一些编码等的分析，把字符串解析成“树状”的结构，创建一个 DOM，叫 DOM 树（因为它是一个文档结构，类似“树”这样一个效果）。
- 接着，在解析 HTML 的过程中，浏览器会去加载相应的 CSS。比如，当解析到以下框选的代码时：
浏览器会再次去向服务器发请求，去获取这个
style.css 文件。
-
继而，同步的这个 CSS 文件就下载下来了。下载下来之后，浏览器同时去解析这个 CSS 文件，让他变成一个 “CSS 树”。然后浏览器再去做一个计算，把 “DOM 树”和“CSS 树”对应起来，最终得到一个新的“树”。 这个“树”里有两个节点，一个是它的元素是什么东西；另一个是这个元素的具体参数：宽、高、位置、大小、边框等。
-
浏览器得到这个“树”之后，再去“渲染”。 相当于我们得到一个很丰富的数据，这个数据告诉了我们页面上每个元素的位置、每个元素之间的关系——父子、邻居等。这个时候，我就可以拿块画板进行“绘制”。
-
最后，一个色彩丰富的页面就展现在了我们面前
3 CSS 在 HTML 中的引入方式
3.1 外部样式表：通过 <link> “链入” CSS（如上例）
在 <head> </head> 里边，紧接着 <title> 标签下边加 <link> 标签。
<link>标签中，rel="stylesheet"，“rel 属性”指定了 HTML 文件与所链接的文件的关系，这里指我们要链接一个“样式表”——stylesheet。- 样式表放入这个 href（Hypertext Reference）——这里可以用相对链接（上例用的一个
.css文件，此文件将所有与之相关的 CSS 全部包含在里边，这里注意文件路径要写对），也可以用一个完整的 URL。
3.2内联样式：直接写在元素开始标签的 style 属性中
<p style="background: yellow; font-family: sans-serif;">Oli 是个好人!</p>
复制代码
注：
- 这种写法注意分号、前后的引号；
- 一般不推荐使用，在特定情况下使用。
3.1内部样式表：放在 head 元素内的 <style> 标签中
如上篇文章的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 表单</title>
<style>
#txa {
width: 300px;
height: 200px;
margin-left: -12px;
}
</style>
</head>
<body>
……
🏆总结：一般情况下推荐使用 <link> “链入” CSS。
4 CSS 选择器初识
CSS 选择器用于“定位”我们想要给予“样式”、“规则”的 HTML 元素。
对于 CSS 的“样式”、“规则”，我们可以拆分理解：
h1 {color: red; background: yellow;}
4.1 元素选择器
p {
color: yellow;
}
div {
background: yellow;
}
p, div {
font-family: sans-serif;
}
