如何把CSS代码放进HTML中

上周有个客人问我，怎么把CSS代码放进HTML里啊？我给他解释了两种常见的方法。

第一种是外部样式表。
你只需要创建一个单独的CSS文件，比如叫style.css，然后把你的CSS代码都写进去。
然后在HTML文件的头部（也就是<head>部分），用<link>标签引用这个CSS文件。
代码大概长这样：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
这种方法的好处是，如果你的网站有多个页面，样式可以复用，维护起来也方便。

第二种是内部样式表。
你直接在HTML文件的<head>部分用 </head>
这两种方法各有各的用处。
外部样式表适合大型项目，内部样式表适合小项目或者临时调整。
根据你的实际需求来选择吧。
反正你看着办。
我还在想这个问题，毕竟每个人的需求都不一样。

HTML外部样式表怎么引入_HTML外部CSS样式引入方法

直接用< link >标签引CSS，性能高，不卡页。
@import导入CSS，性能差，慎用。
路径要准，不然样式不亮。
< link >放<head>，页面不闪。
按顺序排CSS，先基础后组件。
文件名要规范，一看就懂。
生产环境，CSS合起来，快。
你自己掂量。

怎样在HTML中插入外部CSS文件？ 外部CSS引入方法

这就是坑：不要忽略CSS文件路径设置错误。

别信：路径错误可能导致样式不加载。

别这么干：检查文件权限前，先确认CSS文件路径正确。

HTML怎么引入CSS文件_HTML link标签外部CSS引入方法

说实话，当年我刚开始搞前端的时候，对这玩意儿也是摸了很久。
你说的这些点都挺实在的，我给你唠唠我自己的体会。

先说路径这事儿。
我记得刚开始用绝对路径的时候，服务器老出问题，后来发现CDN好多了，尤其是用那种现成的库，比如你例子里的Bootstrap，直接引用CDN地址，加载速度确实快。
但要注意一点，有时候国内访问国外CDN慢，这种情况下自己托管或者用国内CDN会更好。

你提到的FOUC现象，我遇到过。
有次我把样式表放body里了，结果一打开网页先是个空白的，等CSS加载完才显示样式，用户体验直接拉胯。
后来改回head里，就好了。
所以啊，这个顺序千万不能错。

多个CSS文件叠加，我有个踩坑的经历。
有次引入了两个CSS，后一个文件里有特别重的样式，结果整个页面卡了很久。
后来学乖了，把基础样式、主题样式、布局样式分开加载，顺序也排好了。
这个顺序很重要，基础样式肯定要先加载。

说到代码复用，我之前做项目有个经验，就是把通用的样式单独抽出来一个CSS，比如字体、颜色变量、按钮基础样式这些，多个页面都能用。
这样改的时候，一个文件改了所有页面都跟着变，省事多了。

排查问题的时候，我有个习惯，先看网络请求。
浏览器开发者工具里看Network，CSS有没有加载成功一目了然。
没加载成功，多半是路径错了，或者服务器那边文件没了。
语法错误这个更坑，有时候一个分号漏了，或者引号不匹配，浏览器直接给你无视，你得一个个看。

不过话说回来，现在前端框架这么卷，直接用框架的CSS模块、Sass预处理器，这种手写link标签的活儿反而少了。
但基础还是要懂，尤其是那种纯静态页面，或者做老网站维护的时候，这可是基本功。