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

一、本堂课重点内容：

CSS代码构成
CSS使用方法
CSS流程之选择器组、文本渲染
调试CSS

二、详细知识点介绍：

CSS是什么

小结：CSS（Cascading Style Sheets）是一种用来描述网页样式的语言。它可以用来设置字体、颜色、布局等多种样式，使网页具有美观和一致性。

CSS是如何工作的

下图很好的描述了CSS的工作原理：

接下来我用通俗的语言来描述一下：

当浏览器加载 HTML 文档时，它首先对文档进行解析。解析器会读取 HTML 代码并将其转换成一个多层嵌套的结构，这个结构被称为 DOM (Document Object Model) 树。每个 HTML 元素都会在 DOM 树中对应一个节点。

在解析 HTML 文档时，浏览器会自动寻找 CSS 样式表文件，并加载它们。CSS 文件会被解析并转换成一组规则。每个规则都由一组选择器和一组声明组成。选择器指定了哪些 DOM 节点会被应用这组声明。

浏览器会按照 CSS 规则的优先级，将样式应用到 DOM 树上对应的节点上。这些样式会覆盖元素的默认样式。同时，浏览器会考虑继承和层叠的概念，来确定最终样式。

最后，浏览器会使用渲染引擎来渲染 DOM 树上的节点，生成最终的页面。这个页面会被显示在浏览器窗口中，并且可以被用户查看和交互。

选择器Selector

CSS 选择器是 CSS 中用来选取 HTML 元素的工具。选择器可以根据元素的标签名、类名、ID、属性和其它特征来选取元素。

常用的选择器有：

标签选择器：可以选择所有指定标签的元素。比如说，选择器 "p" 会选择所有的段落元素。
类选择器：可以选择所有具有指定类名的元素。比如说，选择器 ".my-class" 会选择所有 class 属性值为 "my-class" 的元素。
ID 选择器：可以选择所有具有指定 ID 的元素。比如说，选择器 "#my-id" 会选择所有 id 属性值为 "my-id" 的元素。
属性选择器：可以选择所有具有指定属性的元素。比如说，选择器 "[href='www.example.com']" 会选择所有 href 属性值为 "www.example.com" 的元素。
伪类选择器：可以选择所有具有指定状态的元素。比如说，选择器 "a:hover" 会选择所有鼠标悬停在其上的链接元素。

CSS 还提供了一些组合选择器，可以用来选择复杂的元素。比如说：

后代组合：可以选择所有在指定元素之下的元素。比如说，选择器 "div p" 会选择所有在 div 元素下的 p 元素。
相邻选择器：可以选择所有紧跟在指定元素之后的兄弟元素。比如说，选择器 "p + span" 会选择所有紧跟在 p 元素后面的 span 元素。
亲子组合：可以选择所有直接属于指定元素的子元素。比如说，选择器 "div > p" 会选择所有直接属于 div 元素的 p 元素。

总之，选择器是 CSS 中非常重要的一部分，它决定了 CSS 规则应用到哪些元素上。通过组合不同的选择器，可以实现非常复杂的样式效果。

颜色

CSS 中的颜色可以使用多种格式来表示：

十六进制颜色值：使用 "#" 开头，后面紧跟 6 位十六进制数字表示颜色。比如说，"#ff0000" 表示红色，"#00ff00" 表示绿色，"#0000ff" 表示蓝色。
RGB 颜色值：使用 "rgb(" 开头，后面紧跟三个数字，分别表示红、绿、蓝三个颜色通道的值。比如说，"rgb(255, 0, 0)" 表示红色，"rgb(0, 255, 0)" 表示绿色，"rgb(0, 0, 255)" 表示蓝色。
HSL 颜色值：使用 "hsl(" 开头，后面紧跟三个数字，分别表示色相、饱和度、亮度。
CSS 也支持使用预定义的颜色名称，比如"red"、"green"、"blue" 等。

调试CSS

右键点击页面，选择「检查」
使用快捷键:
- Ctrl+Shift+I (Windows)
- Cmd+Opt+I (Mac)

三、实践练习例子：

font-family的使用

在 CSS 中，可以使用 "font-family" 属性来设置文本的字体。

例如，下面的代码使用 "font-family" 属性来设置所有段落元素的字体为 Arial：

p {
    font-family: Arial;
}

你可以指定多个字体，浏览器会尝试使用第一个可用的字体，如果不可用就会使用下一个:

p {
    font-family: Arial, sans-serif;
}

这样设置的话，如果 Arial 不可用，就会使用默认的 sans-serif 字体。

还可以使用自定义字体，需要在页面中引用字体文件:

@font-face {
  font-family: "My Custom Font";
  src: url("path/to/my-custom-font.ttf") format("truetype"); }

p { 
    font-family: "My Custom Font", Arial, sans-serif; 
}

这样设置的话，首先会尝试使用 "My Custom Font" 字体，如果不可用就会尝试使用 Arial 字体，如果 Arial 也不可用，就会使用默认的 sans-serif 字体。

要注意，不同的浏览器可能支持的字体有所不同，因此最好指定多个字体，以确保页面在各个浏览器中的可见性。

建议：

字体列表最后写上通用字体族
英文字体放在中文字体前面

四、课后个人总结：

学习了 CSS 的基本概念，包括它是如何工作的，选择器的用法，颜色的表示方式，以及 font-family 的用法。同时也了解了如何使用浏览器的开发者工具来调试 CSS 代码。总的来说，CSS 是一门非常重要的前端技能，能够帮助我们创建美观、响应式的网页。值得我们继续努力学习并练习，提高自己的 CSS 技能。

五、引用参考：

走进前端技术栈-CSS

走进前端技术栈-CSS | 青训营笔记