css引入方式有几种？link和@import有什么区别

风与烈酒2024-03-19 20:30

在HTML中，有两种主要的方式可以引入CSS样式表：使用<link>标签和使用@import规则。它们之间有一些区别。

<link>标签：可以使用<link>标签在HTML文件中引入外部CSS样式表。它必须放在<head>标签中，并使用rel属性指定为stylesheet，使用href属性指定CSS文件的路径。

html 复制代码

<link rel="stylesheet" href="styles.css">

@import规则：可以使用@import规则在CSS文件中引入其他CSS文件。它必须放在CSS文件的顶部，并使用url()函数指定引入的CSS文件的路径。

css 复制代码

@import url("styles.css");

区别：

加载顺序：<link>标签在页面加载时同时加载CSS样式表，而@import规则会在页面加载完毕后异步加载CSS样式表。
兼容性：<link>标签被所有浏览器支持，并且可以用于引入其他类型的文件，例如图标和字体。而@import规则在旧版本的Internet Explorer（IE）中不被完全支持。
语法：<link>标签使用HTML语法，而@import规则使用CSS语法。
多次引入：<link>标签可以多次使用，引入多个CSS文件，而@import规则只能在CSS文件中使用一次，引入一个CSS文件。