这是我参与「第四届青训营 」笔记创作活动的第2天
一、什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、认识CSS
1、我们可以用CSS做些什么呢？
- 设置元素位置和大小
- 添加动态效果
- 设置字体颜色
2、在页面中使用CSS的几种方式
- 外链
<link rel="stylesheet" href="/assets/style.css">
优点：
1、HTML页面的大小更小，结构更清晰。
2、加载速度更快。
3、相同的.css文件可以在多个页面上使用。
缺点：
在加载外部CSS之前，页面可能无法正确呈现。
- 嵌入
p {
width: 60px;
height: 30px;
}
</style>
优点：
1、样式表只影响一个页面。
2、内部样式表可以使用类和ID。
3、无需上传多个文件。HTML和CSS可以在同一个文件中。
缺点
1、增加页面加载时间。
2、它只影响一个页面 - 如果要在多个文档上使用相同的CSS，则无用。
- 内联
<p style="width: 60px;height: 30px;>内联CSS举例</p>
优点：
1、如果您想测试和预览更改，则非常有用。
2、对快速修复很有用。
3、降低HTTP请求。
缺点：
内联CSS必须应用于每个元素。
3、那么CSS是如何工作的呢？
让我们先来看一下下面这张图
用白话来理解一下上面这张图
- 首先打开一个浏览器先加载HTML文件
- 然后再将HTML文件解析成一个DOM树
- 浏览器拉取到CSS样式，将每一个DOM节点解析出来从而得到一个所谓的渲染DOM树（计算每个节点的位置在哪里）
- 最后将整个页面渲染出来
4、CSS选择器
- 通配选择器 *
- 标签选择器
p {
width: 60px;
height: 30px;
}
</style>
- id选择器 #
- 类选择器
- 属性选择器
- 伪类选择器
