前端理解 CSS | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第 2 天。（第二篇笔记）本节课依旧是比较基

这是我参与「第四届青训营」笔记创作活动的第 2 天。（第二篇笔记）

本节课依旧是比较基础，讲解 CSS 的概念、工作原理、CSS 的选择器、CSS 的盒模型以及常用的布局方式。

在这里先贴上在看本次课程中记录下的相关内容，然后再贴上我此前学习 CSS 时写下的笔记的相关链接（分别对应上面的内容），如果有修改和补充，就在我原来的笔记上修改和补充了。

CSS

CSS （Cascading Style Sheet）层叠样式表。渲染 Web 应用每一层的 HTML 结构，生成渲染 render 树，最终完成页面的渲染给用户。也就是说 CSS 用来完成页面结构中元素的渲染，定义其大小、位置、背景、颜色等样式。

CSS 的编写规则语法：
- CSS 规则通常包含两部分： 选择器和一条或者多条声明；
  - 每条声明由一个属性和一个值组成；
  - 属性值和单位之间不能留有空格： 20px
  - 每条声明以分号 ; 结束；
  - 总声明以大括号 {} 包含；
CSS 的注释方法：
- 使用斜杠➕星号的方法： /* example */
三个 CSS 插入的方法：
- 外部样式表：在 HTML 文档的头部使用 <link> 标签引入。
- 内部样式表：同样在 HTML 文档中的头部，使用 <style> 标签定义内部样式表。
- 内部样式 / inline style：在相关的标签内使用 style 属性，可以包含任意的 CSS 属性；
CSS 样式的优先级：
- 内联样式 Inline style > 内部样式 Internal style sheet > 外部样式 External style sheet > 浏览器默认样式
- CSS 选择器权重关系
- 内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器。
- 【避免使用 important 】使用 !important 声明样式会覆盖任何其他的声明，改变了原来的规则。

包含各种 CSS 的选择器：

选择器的权重问题。

本次学习 CSS 的课程又回顾整理了一下之前学习 CSS 的笔记，和 CSS 基本的学习内容框架，但是其中的概念理解还得随着应用熟记于心啊。