CSS引入的方式有哪些? link和@import的区别是?

参考答案：

CSS (Cascading Style Sheets) 的引入主要有三种方式：

内联样式（Inline Styles）：直接在 HTML 元素中使用 style 属性来添加 CSS 样式。例如：<p style="color:red;">这是一段红色的文字。</p>。这种方式的优点是方便快捷，但缺点是难以复用和维护，且不适合大型项目。
内部样式表（Internal Stylesheet）：在 HTML 文档的 <head> 部分使用 <style> 标签来包含 CSS 规则。例如：

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>

内部样式表适用于单个 HTML 文档，但不适用于多个文档之间的样式复用。 3. 外部样式表（External Stylesheet）：通过 <link> 标签在 HTML 文档中引入外部的 CSS 文件。例如：<link rel="stylesheet" type="text/css" href="styles.css">。这是最常用的一种方式，因为它可以实现样式的复用，便于管理和维护。

关于 link 和 @import 的区别：

语法和使用方式：<link> 是一个 HTML 元素，通常放在 HTML 文档的 <head> 部分，用于链接外部 CSS 文件。而 @import 是一个 CSS 规则，通常放在 CSS 文件的开头，用于导入其他 CSS 文件。
加载顺序和性能：<link> 是 HTML 的一部分，当浏览器解析到 <link> 标签时，会立即并行下载 CSS 文件，不会阻塞 HTML 的解析。而 @import 是 CSS 的一部分，当浏览器解析到 @import 规则时，会暂停 CSS 的解析，等待被导入的 CSS 文件下载完成后再继续解析。因此，使用 @import 可能会导致页面渲染延迟。
兼容性：<link> 是 HTML 的标准元素，所有现代浏览器都支持。而 @import 是 CSS 的规则，虽然大多数现代浏览器都支持，但在一些较旧的浏览器中可能不被支持。
动态性：@import 可以在运行时根据某些条件动态地导入不同的 CSS 文件，而 <link> 则无法实现这种动态性。

综上所述，通常推荐使用 <link> 来引入外部 CSS 文件，因为它具有更好的性能和兼容性，并且更易于管理和维护。在需要动态导入 CSS 的情况下，可以考虑使用 @import。