CSS 的加载及加载顺序简介

当网页加载时，浏览器需要加载 HTML 文件、JavaScript 文件和 CSS 文件。CSS 文件控制样式和布局。在浏览器加载 CSS 文件时，会遵循以下顺序：

1. 首先，浏览器会发出 HTTP 请求，请求加载 CSS 文件。

2. 加载 CSS 文件后，浏览器首先解析 CSS 文件中的 @import 语句。如果发现 @import 语句，则会按照 @import 语句指定的顺序加载其他 CSS 文件。

示例代码：

/* index.css */
@import "normalize.css";
body {
  background-color: #f1f1f1;
}

/* normalize.css */
body {
  margin: 0;
  padding: 0;
}

在这个示例中，index.css 文件中的 @import 语句告诉浏览器要先加载 normalize.css 文件。因此，浏览器将加载 normalize.css 文件中的样式，然后再加载 index.css 文件中的样式。

1. 加载完所有 CSS 文件后，浏览器将解析所有 CSS 样式。在解析时，按照以下顺序：

2. 解析所有 @import 语句

3. 解析所有规则（包括媒体查询规则）

4. 解析所有带有 !important 标记的规则

示例代码：

/* index.css */
body {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

在这个示例中，当浏览器窗口宽度大于等于 768px 时，body 的字体大小将变成 18px。

总结：

了解 CSS 的加载及加载顺序是很重要的，因为这可以让我们更好地控制网页的样式和布局。在编写 CSS 代码时，要尽量避免使用 @import 语句，并尽量避免使用 !important 标记，以避免对 CSS 加载和解析速度的影响。