这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
前言：CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用
课程重点
- CSS 代码构成
- CSS 使用方法
- CSS 流程之选择器组、文本渲染
- 调试 CSS
CSS的作用
CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。
CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。
CSS的语法表示
语法由一个选择器开头。选择了我们将要用来添加样式的 HTML 元素。 例如：
h1 {
color: red;
font-size: 10em;
}
p {
font-size: 8em;
color: black;
}
在HTML中应用CSS
外部样式表
将外部样式表链接到页面。这是最常见和最有用的方法，可以将 CSS 链接到多个页面，从而用相同的样式表设置所有页面的样式。例如：
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/general/style.css">
<link rel="stylesheet" href="../styles/style.css">
内部样式表
不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件 head 标签里的 style 标签之中。 例如：
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
color: red;
background-color: yellow;
}
p {
color: black;
}
</style>
</head>
内联样式
直接写在于 HTML 元素的 style 属性之中，每个 CSS 表只影响一个元素。例如：
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">Hello World!</p>
CSS选择器
类型、类和 ID 选择器
这个选择器组，第一个是指向了所有 HTML 元素 <h1>。
h1 { }
标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] { }
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"] { }
伪类与伪元素
这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：
a:hover { }
运算符
最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。
article > p { }
