这是我参与「第五届青训营 」伴学笔记创作活动的第2天
CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。通过培训对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读，建立对 CSS 的全面而深刻的认知。
1.CSS是什么
在前端技术栈中，将JavaScripts，CSS，html，称为前端三件套，JS负责行为，CSS负责样式，HTML负责内容。 CSS（Cascading Style Sheets），层叠样式表，是用来定义页面的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS 规则比较简单易懂,语法由一个 选择器 (selector)起头。它 选择 (selects) 了我们将要用来添加样式的 HTML 元素。在这个例子中我们为一级标题（主标题[
<h1>]添加样式。接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value); 的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。
2.如何在页面中使用CSS
有三种方式，外部样式表、内部样式表，内联样式
3.CSS工作流程
4.CSS 选择器种类
4.1类型、类、ID选择器
这个选择器组，第一个是指向了所有 HTML 元素 <h1>。
h1 { }
Copy to Clipboard
它也包含了一个 class 的选择器：
.box { }
Copy to Clipboard
亦或，一个 id 选择器：
#unique { }
4.2标签属性选择器
这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：
a[title] { }
Copy to Clipboard
或者根据一个有特定值的标签属性是否存在来选择：
a[href="https://example.com"] { }
4.3 伪类与伪元素
这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：
a:hover { }
Copy to Clipboard
它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。
p::first-line { }
4.4 运算符
最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。
article > p { }
5.组合规则
总结思考
CSS在前端技术栈中至关重要，在培训中知道了很多在初次学习中没注意到的细节，很有收获。
