「第四届青训营 -前端基础场」笔记创作活动的第2篇笔记（一切内容仅供参考）
1.CSS是什么？
上一节提到前端技术栈---->JavaScript（行为）、CSS（样式）、HTML（内容）。CSS即（Cascading Style Sheets），用来定义页面元素的样式，包括如下几个方面：
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
2.CSS选择器
选择器是什么？
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
选择器的种类
-
类型、类和ID选择器
这个选择器组，第一个是指向了所有 HTML 元素<h1>。
h1 { }
它也包含了一个 class 的选择器：
.box { }
亦或，一个 id 选择器：
#unique { }
-
标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] { }
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"] { }
-
伪类与伪元素
这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：
a:hover { }
它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。
p::first-line { }
-
运算符
最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。
article > p { }
选择器参考列表
| 选择器 | 示例 | 学习 CSS 的教程 |
|---|---|---|
| 类型选择器 | h1 { } | 类型选择器 |
| 通配选择器 | * { } | 通配选择器 |
| 类选择器 | .box { } | 类选择器 |
| ID 选择器 | #unique { } | ID 选择器 |
| 标签属性选择器 | a[title] { } | 标签属性选择器 |
| 伪类选择器 | p:first-child { } | 伪类 |
| 伪元素选择器 | p::first-line { } | 伪元素 |
| 后代选择器 | article p | 后代运算符 |
| 子代选择器 | article > p | 子代选择器 |
| 相邻兄弟选择器 | h1 + p | 相邻兄弟 |
| 通用兄弟选择器 | h1 ~ p | 通用兄弟 |
3.在页面中使用CSS
-
行内样式
行内样式就是把 CSS 样式直接放在代码行内的标签中，一般都是放入标签的style属性中，由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>
-
内嵌样式
内嵌样式通过将 CSS 写在网页源文件的头部，即在 <head> 和<head>之间，通过使用 HTML 标签中的 <style> 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进2个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
margin-bottom: 20px; /*段落下边距 20 像素*/
}
</style>
</head>
<body>
<p>在百度那次更换 LOGO 的计划中，百度给出的 3 个新 LOGO 设计方案在网民的投票下，全部被否决，更多的网民将选票投给了原有的熊掌标志。</p>
<p>此次更换 LOGO 的行动共进行了 3 轮投票，直到第 2 轮投票结束，新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时，原有的熊掌标志却戏剧性地获得了最多的网民选票，从而把 3 个新 LOGO 方案彻底否决。</p>
</body>
</html>
-
外链式
链接式通过 HTML 的 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的，楼下的你呢？？</p>
<h3>楼上的，<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>
4.CSS是如何工作的？
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，但是下面的步骤基本都会出现：
-
浏览器载入HTML文件（比如从网络上获取）。
-
将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。
-
接着，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。
-
浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
-
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
-
网页展示在屏幕上（这一步被称为着色）。
如图所示更形象
