聊一聊 CSS 样式的导入方式

一、CSS 的导入方式有哪些

1、内联样式，在HTML 元素上使用 style 属性，设置当前标签元素的样式

html 复制代码

<p style="color: red;">Hello world!</p>

2、嵌入样式表，直接在head标签内使用style标签定义元素样式

html 复制代码

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3、在HTML中使用Link标签导入外部样式表

html 复制代码

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

4、在 CSS 文件中使用 @import 规则导入外部样式表

css 复制代码

@import url("styles.css");

其中，内联样式和 style 标签的样式定义直接写在HTML文件中，而使用 Link 和 @import 导入外部样式表需要将样式定义单独写在CSS文件中。外部样式表和导入样式表的优势在于可以在多个HTML文件中共享同一套样式。

二、Link 标签的特点

可以同时导入多个样式表。
可以指定样式表的媒体类型，例如screen、print、all等，以根据不同的媒体类型应用不同的样式。
页面加载时会同时加载样式表，不会阻塞页面的渲染。
可以使用rel属性指定样式表的关系，如stylesheet表示样式表。
可以使用href属性指定样式表的URL。

三、@import 规则的特点

@import规则是CSS的一种规则，用于在样式表中导入其他样式表。它必须写在样式表的最前面。
只能导入一个样式表，不能同时导入多个样式表。
不支持指定样式表的媒体类型。
页面加载时会依次加载样式表，每个样式表加载完后再加载下一个，可能会阻塞页面的渲染。
可以在样式表中使用@import规则导入其他样式表，也可以在导入的样式表中使用@import规则继续导入其他样式表。

四、CSS之link导入和@import导入的区别

首先，link是一个标签，不仅可以引入css样式表，还可以处理RSS 等，@import是css中的规则，只能用于引入css。

link载入css是和页面同时载入的，但是@import是在页面加载完之后加载的。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

link支持使用Javascript控制DOM去改变样式；而@import不支持。

link的权重比@import高（有争议，但是更相信这种说法）。

link 标签可以在HTML的标签中进行导入，也可以在 body 标签中进行导入，而 @import 规则只能在 CSS 文件中使用。