外部样式列表引用到html文档中,分别有几种方式？

链入外部样式表，简单说，就是创建一个单独的CSS文件，然后在HTML文档的头部通过<link>标签引用它。
这样做的好处是，CSS文件可以独立于HTML文件存在，便于管理和更新。
例子：。

导入外部样式表，就是直接在HTML文档的。
注意，导入的样式表必须在文档的顶部，否则可能不会生效。

两者区别在于，链入是外部文件，导入是内部嵌入。
导入有性能优势，但链入更灵活。

html如何引入外部css

哎，记得刚学前端那会儿，为了给一个按钮加上悬浮效果，折腾了好半天。
那时候连路径都搞不清，把CSS文件放哪儿都行，结果浏览器就是没显示出来。
后来老师一句"你链接的路径对不对？"点醒了我，才明白这看似简单的操作里学问真不少。

说回路径，你发现没？写相对路径的时候，特别容易在子目录里写错层级。
比如一个项目结构是这样的：
project/ ├── css/ │ └── style.css └── index.
在HTML里写<link href="style.css">会报错，得写成<link href="css/style.css">。
但要是你忘了加那个css/，浏览器就傻了，在当前目录里找，当然找不到。

还有个事，我上次用CDN引入Bootstrap，结果公司网络环境限定了HTTPS，那会儿真是急得满头大汗。
最后发现改用自带的，本地开发又慢又卡，但至少能用了。
等等，这引出了个问题——到底是用CDN还是自建CSS库更划算？
现在想想，那些踩过的坑其实都是小细节。
比如合并文件，你看我之前那个例子，写<link href="reset.css">、<link href="theme.css">...浏览器要是一一请求，那速度得多慢？现在都用Webpack处理了，几行代码搞定。
但话说回来，这种优化真的适合所有项目吗？