CSS 加载方式有几种？

题干

CSS 加载方式

题解

CSS 加载方式大致有以下四种：

内联方式：就是直接在 HTML 标签中的 style 属性中添加 CSS 代码。

🌰：

html

<div style="background: red"></div>

这种方式的优点是简单方便，不需要额外的文件请求，但是缺点是只能改变当前标签的样式，不能复用，也不利于维护和修改。¹

嵌入方式：就是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

🌰：

css

<head>
  <style>
    .content {
      background: red;
    }
  </style>
</head>

这种方式的优点是可以对当前网页有效，也比较集中，方便查看 HTML 结构和 CSS 样式，但是缺点是只对当前页面有效，不能复用，如果多个页面需要引入相同的 CSS 代码，就会导致代码冗余。

链接方式：就是使用 HTML 头部的 <link> 标签引入外部的 CSS 文件。

🌰：

html

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

这种方式是最常见的也是最推荐的引入 CSS 的方式。它的优点是所有的 CSS 代码只存在于单独的 CSS 文件中，具有良好的可维护性，而且可以被多个页面复用，也可以利用浏览器缓存提高加载速度。它的缺点是需要额外的文件请求，可能会增加网络开销。

导入方式：就是使用 CSS 规则引入外部 CSS 文件。

🌰：

css

<style>
  @import url(style.css);
</style>

这种方式和链接方式类似，都是引入外部的 CSS 文件，但是它有一些不同之处和缺点。¹首先，它属于 CSS 规则，所以导入语句应写在 CSS 中，并且应写在样式表的开头，否则无法正确导入外部文件；其次，它是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；最后，它会等页面全部下载完毕再被加载，所以会影响网页的渲染速度。

应尽量使用链接方式导入外部 CSS 文件，避免或者少用使用其他三种方式。

贡献者

isboyjc

CSS 加载方式有几种？ ​

题干 ​

题解 ​

相关 ​

贡献者 ​

CSS 加载方式有几种？

题干

题解

相关

贡献者