html如何引入css文件

把CSS塞进HTML里，何引方法不止一种。文件但真正干活的何引时候，我几乎只用其中一种。文件先说最常用也最省事的何引：<link>标签。

在HTML的文件<head>里写一行<link rel="stylesheet" href="style.css">，浏览器就会去加载那个CSS文件。何引路径可以是文件相对的，比如css/style.css，何引也可以是文件绝对URL。我习惯把CSS文件统一放在一个叫css的何引文件夹里，HTML文件放根目录，文件这样href="css/style.css"清晰明了。何引有个细节：rel="stylesheet"不能省，文件否则浏览器不知道你链接的何引是样式表，这行就白写了。

为什么我偏爱这种方式？因为改版式的时候，你只需要动一个CSS文件，几十个HTML页面全跟着变。去年帮朋友改一个烘焙工作室的网站，他们之前把样式写在每个页面的<style>里，改一个按钮颜色要翻二十几个文件。换成外链CSS后，十分钟搞定。

第二种方式：<style>标签，直接写在HTML的<head>里。比如：

<style> body {  background: #f5f5f5; } h1 {  color: #333; } </style>

这叫内部样式表。适合单页面、样式不多、或者你懒得新建一个文件的情况。但我不推荐在项目里大量用——HTML和CSS混在一起，读起来累，复用也差。偶尔做个活动页，临时写几行，倒也无妨。

第三种：行内样式，直接写在标签的style属性里。像这样：<p style="color: red; font-size: 16px;">文字</p>。这种方式优先级最高，但最难维护。你写十个<p>，就得重复十次。改一个颜色要改十处。除非是用JavaScript动态改某个元素的样式，否则我基本不碰行内样式。

还有第四种：@import。在CSS文件里写@import url("other.css");，或者直接在<style>里用。它的特点是串行加载——浏览器要先下载完当前CSS，解析到@import那行，才会去请求下一个文件。页面渲染会变慢。我见过一些老项目用@import引入字体图标，结果首屏白屏时间明显变长。所以能不用就不用，<link>可以并行加载，性能好得多。

说个实际场景。你写了一个按钮组件，样式写在button.css里。另一个页面想复用，直接<link>进来就行。如果用行内样式，你得复制粘贴，改的时候两边不同步，迟早出bug。这就是为什么团队协作里，外链CSS几乎是默认选择。

另外，<link>还能配合媒体查询做响应式加载。比如<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">，只在手机屏幕下才加载这个文件。桌面端用户不会下载多余的CSS，省带宽。这个技巧在性能优化时挺管用。

顺序也有讲究。如果你同时用了<link>和<style>，后出现的会覆盖前面相同优先级的规则。比如先<link>引入base.css，再写<style>body { background: pink; }</style>，那背景色就是粉色，不是base.css里的颜色。行内样式又比<style>优先级高。记住这个层叠顺序，调试时能少抓头发。

最后提一句路径问题。很多人第一次用<link>，CSS文件死活不生效，打开控制台一看——404。多半是路径写错了。href="style.css"和href="./style.css"效果一样，但href="/style.css"是从网站根目录找。如果你的项目部署在子目录里，比如example.com/blog/，用绝对路径/style.css就会跑到example.com/style.css去，当然找不到。用相对路径更稳妥，或者用<base>标签统一处理。

我自己的习惯：新建项目，先建index.html和css/style.css，在<head>里写好<link>，然后开始写样式。不碰@import，少用行内样式，内部样式只在快速原型阶段用。这样结构清晰，后期改起来不头疼。