这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
引用
这篇文章记录的是CSS的入门级的理解：它是什么概念，它对应代码是什么，怎么使用它，它怎么起到作用的？————但很重要，对于整体框架有个清晰的认识，再去补充细节。
一、CSS（cascading style sheet）是什么？
简单理解：html是内容，css是样式，js是行为；生动的例子说明：写了一个文字“牛”，但这只是一个固定的文字，若要设置其位置，大小，颜色，背景，这些则需要样式的加入，也就是CSS，是CSS给予内容静态的多样性。
二、CSS表现为样式规则，其样式代码块如何理解？
如上图所示：整体观察，将花括号前后进行分离，前面的作为一个
元素的选择器，对应于作用对象；后面的为一个样式声明块，作为样式的表现，两个相互结合构成了控制元素的样式规则。
其中局部来看，声明块中以分号隔开的是每个声明，分别是由属性和冒号后面的值构成。
三、CSS在页面中的使用方式？
如上图所示，有以下三种方式使用CSS
外部链接：采用link的html标签，将css样式规则以外部文件的方式引用，推荐，做到了内容与样式分离。
嵌入：将html中添加style标签，在里面写css样式，在组件中比较常见，样式只用于当前组件，做到了样式定制化的作用。
内联样式：直接在元素中作为属性引入样式的方式，不推荐，会导致样式和元素死绑；但是特殊情况，例如要将组件特定样式时，可以使用。
四、CSS是如何运行的？
MDN中的图可以说明，页面渲染首先是加载HTML→解析HTML，结束后，异步进行创建文件流树结构和加载和解析CSS，没完成CSS解析的文件流树结构形成了基本的骨干结构，但每个节点的具体的样式规则需要CSS解析完成后丰富进入CSS的节点中。
生动形象的理解是:只有HTML形成的是人的骨干，等到CSS的加入后，人的每个骨干开始对应长肉，形成一个完整的人，瞎编，自娱自乐，哈哈。
⭐若CSS是错误的，或是浏览器的DOM结构不支持，会怎么处理？ 自动忽略：好处，不会因为兼容性的问题导致整个页面的渲染完全加载不出来，舍小保全的智慧。利用这点可以在兼容不同页面中对于相同的属性采用多条声明，从而能够适配各种浏览器。
