*文档样式表、外部样式表，比内联样式多了个“表”字
注意 后面会逐渐学习到这些CSS属性，目前没必要每一个都去查询了解，用多了自然就记住了（CSS属性名都是小写）
letter-spacing.word-spacing分别用来设置字母、单词之间（有空格才算一个单词）的间距
默认是0,可以设置为负数
文接上回，继续看 webpack 的插件：这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。
mini-css-extract-plugin作用： 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身，不过前者在 webpack4 算是废了。
安装依赖：
然后引入，配置提出 css 样式，重命名 css 文件。
其中上面的 rules 还可以修改变成这样：
打包出来的 index.css将会插入 index.html 里面的 head 标签里面。
现在如果使用下面的样式：
其中 transform: rotate(45deg) 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理，这个 loader 就叫 postcss-loader 。
安装依赖：
配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。
完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下：
打包之前的 css 样式为：
经过插件处理之后为：
如果你不想新建一个 post.config.js 文件的话可以这样配置：
处理的效果是完全和分开写一样的。
这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效，所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。
安装依赖：
注意： 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode （模式）一定的是 生产模式（production） 。
简单配置就能压缩 css 和 JS 了。还是很有用的，压缩完成明显文件变小了。
友情提示：
CSS简介
CSS是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
选择器的就是根据不同需求把不同标签选出来。
基础选择器由单个选择器组成包括标签选择器，类选择器，id选择器和通配符选择器
标签名{
属性1：属性值1
属性2：属性值2
属性3：属性值3
...
}
.类名{
属性1：属性值1
...
}
多类名使用 在标签class属性中写多个类名用空格隔开
#id名{
属性1：属性值1
...
}
* { //通配符选择器使用"*"定义，表示选取页面中所有的元素(标签)
属性1：属性值1
...
}
文本缩进：
text-indent： 10px/2em
给定缩进长度或em相对单位一个文字的大小
行间距：
line-height: 26px
详情可参考
https://www.runoob.com/ 菜鸟教程
https://www.w3school.com.cn/ w3c
