推荐使用标签引入css因其能尽早加载样式，避免页面闪烁；而@import会延迟加载、增加渲染阻塞，影响性能。
在HTML5中，推荐使用
<link>标签引入CSS文件，并且通常放在
<head>标签内。这样做可以确保样式在页面加载初期就生效，提升用户体验。
<link rel="stylesheet" href="styles.css">
使用
<link>标签，并设置
rel属性为
stylesheet，
href属性指向CSS文件的路径。
为什么推荐这种方式？
立即学习“前端免费学习笔记（深入）”；
为什么不推荐使用@import
？
@import是另一种引入CSS的方式，它允许在一个CSS文件中导入其他CSS文件。虽然它在某些情况下很有用，但在HTML5中，
@import通常不如
<link>标签推荐。原因在于
@import会导致浏览器先加载HTML，然后再加载主CSS文件，之后再加载
@import引入的CSS文件。这会增加页面的渲染时间，可能导致页面闪烁或样式延迟加载。
此外，
@import还可能导致CSS文件的加载顺序不确定，尤其是在大型项目中，这会增加调试和维护的难度。
如何优化CSS加载性能？
优化CSS加载性能是提升网站速度的关键。除了使用
<link>标签外，还可以考虑以下几点：
睿拓智能网站系统-网上商城
下载
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
压缩CSS文件： 移除CSS文件中的空格、注释和不必要的字符，可以减小文件大小，加快加载速度。可以使用工具如
cssnano
或UglifyCSS
。合并CSS文件： 将多个CSS文件合并成一个，可以减少HTTP请求的数量。可以使用构建工具如Webpack或Gulp。
使用CDN： 将CSS文件放在CDN上，可以利用CDN的缓存和加速功能，提高加载速度。
内联关键CSS： 将首屏渲染所需的CSS直接内联到HTML中，可以避免阻塞渲染，加快首屏加载速度。
使用HTTP/2： HTTP/2支持多路复用，可以并行加载多个CSS文件，提高加载效率。
除了<link>
标签，还有其他引入CSS的方式吗？
除了
<link>标签和
@import外，还有一种方式是将CSS直接内联到HTML中，使用
<style>标签。
<style>
body {
background-color: #f0f0f0;
}
</style>虽然内联CSS可以减少HTTP请求，但它会增加HTML文件的大小，并且不利于缓存。因此，通常只建议内联关键CSS，用于优化首屏渲染。
另外，还有一些CSS-in-JS的方案，例如Styled Components、Emotion等，它们允许在JavaScript中编写CSS，并将其动态注入到页面中。这些方案在React等前端框架中很受欢迎，但它们也带来了一些额外的复杂性，例如增加了JavaScript的依赖，并且可能影响SEO。
