# link @import
有 4 种方式可以在 HTML 中引入 CSS。
- 内联方式
<div style="background: red"></div>
- 嵌入方式
嵌入方式指的是在 HTML 头部中的
<style>标签下书写 CSS 代码。
<head>
<style>
.content {
background: red;
}
</style>
</head>
- 链接方式
链接方式指的是使用 HTML 头部的
<head>标签引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- 导入方式 导入方式指的是使用 CSS 规则引入外部 CSS 文件。
<style>
@import url(style.css);
</style>
# 两者区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS,定义rel连接属性等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Example</title>
<link id="myStyles" rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
var link = document.getElementById('myStyles');
link.href = 'new-styles.css'; // 更改链接到新的CSS文件
}
</script>
</body>
</html>
// @import 不可直接修改，只能借助style标签额外处理
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '@import url("new-styles.css");';
document.getElementsByTagName('head')[0].appendChild(style);
@import 在原生 CSS 和预处理器中的使用确实在某些场景下可能存在性能问题，主要是因为它可能导致额外的 HTTP 请求或影响编译性能。但在 Vue 项目中，特别是在单文件组件（.vue 文件）中使用 <style> 标签内的 @import 语句来引入 CSS 文件，情况有所不同。
在 Vue 的单文件组件中，当您使用 <style> 标签内的 @import 语句时，构建工具（如 Webpack）会处理这些导入，并在最终的构建输出中将 CSS 内容嵌入到主 JS bundle 或作为单独的 CSS 文件提取出来。这意味着在运行时，不会有额外的 HTTP 请求来加载这些样式，因此不会受到传统 @import 在原生 CSS 中的性能问题影响。