html中引入css的方式有几种？

<div style="height:200px"></div>

<style type="text/css">
  .content {
    height:50px;
    background-color:red;
  }
</style>

<div class="content"></div>

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

<style type="text/css">
  @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
</style>

使用@import来导入外部css文件

link属于html，通过link标签中的href来链接外部css文件；而@import属于css范畴，需要写在css文件中，而且导入语句必须写在文件头部。
@import是css2.1才出现的规范，低版本浏览器可能有兼容问题
link方式导入的css文件，下载过程是并行的，不会阻塞dom树的构建；而使用@import方式引入的文件则需要等dom树构建好之后才会去下载和执行，也就是DOMContentLoaded事件触发之后才会下载和执行css文件。

所以在导入外部的css文件的时候，尽量使用link的方式。使用@import的方式添加样式的时机比较晚，可能会造成页面抖动。

# html中引入css的方式有几种？