什么是CSS？
CSS（Cascading Style Sheets），层叠样式表，是一种用于描述如何显示HTML或XML等文档的语言。通过 CSS，我们可以控制文档的字体、大小、颜色、布局以及其它效果。使用 CSS 可以将内容从其表现中分离出来，使内容和表现互不干扰。
CSS采用样式规则来指定文档中的元素应该如何被呈现，这些样式规则通常被写在CSS文件中，然后在HTML文件中引用这个CSS文件。在多数情况下，我们是在HTML文件中将CSS文件与HTML文件一同加载的，而不是将CSS文件内联到HTML文件中。在下面我们来详细介绍一下如何加载 CSS 文件。
如何加载CSS文件？
1. 内联样式表
内联样式是指在 HTML 标签中直接添加样式信息。例如：
<p style="color: red; font-size: 16px;">这是一个内联样式示例</p>
内联样式表的优点是方便快捷，不需要额外的文件下载，但是不利于样式的维护与管理。
2. 嵌入式样式表
嵌入式样式表是指在 HTML 文件的 head 标签中添加样式信息。例如：
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个嵌入式样式示例</p>
</body>
嵌入式样式表的优点是方便管理、易于修改，但是不利于样式的复用和维护。
3. 外部样式表
外部样式表是指将 CSS 样式信息单独放置在一个 .css 文件中，然后在 HTML 文件中通过 link 标签引用这个 CSS 文件。例如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个外部样式示例</p>
</body>
外部样式表的优点是方便管理、易于修改，可以实现样式的复用和维护。同时，也可以有效地分离 HTML 结构和样式信息，提高页面加载速度。
4. 导入式样式表
导入式样式表是指在一个 CSS 文件中通过 @import 关键字引入其它的 CSS 文件，例如：
/* styles.css */
@import url("print.css") print;
导入式样式表的缺点是不太好维护和管理，同时也会影响页面加载速度。所以，一般情况下建议使用外部样式表。
如何优化CSS文件的加载速度？
1. 将外部样式表放在 head 标签内
将外部样式表放在 head 标签内的好处是在页面加载过程中先加载 CSS 文件，从而提高页面渲染速度。
2. 合并CSS文件
将多个 CSS 文件合并成一个可以减少 HTTP 请求次数，从而提高页面加载速度。
3. 压缩CSS文件
删除 CSS 文件中的所有不必要的空格、注释、换行符等可以减少 CSS 文件的体积，从而提高页面加载速度。
4. 使用CDN加速
可以使用 CDN（内容分发网络）加速器来加速 CSS 文件的下载速度，从而提高页面加载速度。CDN 加速器通过缓存来加快页面加载速度，并且可以提供全球分布的节点，让用户可以从距离自己最近的服务器上下载页面文件。
总结
CSS 文件的加载方式有多种，不同的方式适用于不同的场景。为了提高页面加载速度，我们可以采用多种策略来优化 CSS 文件的加载，例如将外部样式表放在 head 标签内、合并 CSS 文件、压缩 CSS 文件、使用 CDN 加速等方式。