聊一聊 CSS 样式的导入方式
一、CSS 的导入方式有哪些
1、内联样式，在HTML 元素上使用 style 属性，设置当前标签元素的样式
<p style="color: red;">Hello world!</p>
2、嵌入样式表，直接在head标签内使用style标签定义元素样式
<head>
<style>
p {
color: red;
}
</style>
</head>
3、在HTML中使用Link标签导入外部样式表
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
4、在 CSS 文件中使用 @import 规则导入外部样式表
@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 文件中使用。