html怎么引入css文件

直接说结论：css文件引入html有三种主流方式，引入link标签、引入style标签、引入内联style属性。引入其中link标签引入外部css是引入生产环境最常用的，没有之一。引入

先看最标准的引入写法。在html的引入head区域放一行：

<link rel="stylesheet" href="style.css"> 

这行代码告诉浏览器：去加载style.css这个文件，并把它当作样式表解析。引入href里写路径，引入相对路径、引入绝对路径都行。引入我自己做项目时，引入习惯把css文件放在项目根目录下的引入css文件夹里，所以href通常写成"css/style.css"。引入

link标签的好处是彻底的分离。html只管结构，css只管样式。改样式时不用翻html文件，维护成本低一大截。而且浏览器会缓存css文件，用户第二次访问时，样式文件直接从本地缓存读取，加载速度明显快。

第二种方式是style标签，直接写在html文件内部：

<style> body {  background: #f0f0f0; } .title {  color: #333; } </style> 

这种写法的场景很明确：单页面小工具、邮件模板、或者临时调试样式。style标签放在head里比较规范，但有些人习惯放在body末尾，其实浏览器对style标签的位置容忍度很高，不过为了可读性，还是放head里吧。

第三种方式最直接，也最容易被滥用——内联style属性：

<div style="color: red; font-size: 14px;">文字</div> 

这种写法优先级最高，会覆盖外部css和内部style里的同名规则。所以用的时候要小心。我见过一些新手，为了改一个按钮颜色，直接在内联style里写死，结果后面想统一调整主题色，只能一个个去改html，哭都来不及。

实际开发中，我推荐的做法是：全局样式用外部css文件，页面特有的少量样式用style标签，杜绝内联style（除非是动态生成的元素，用js临时设置）。拿我自己最近做的一个博客系统举例，整个站点的排版、颜色、字体统一放在global.css里，首页有个轮播图，只有首页用，就单独写了个index.css，通过link引入。首页里那个轮播图内部某个小图标需要动态换颜色，才偶尔用js去设置style属性。

还有个细节容易踩坑——css文件的加载顺序。link标签写在后面的，优先级会高一些（相同特异性情况下）。所以如果你有两个css文件，a.css和b.css，b.css写在a.css后面，那b.css里同名class的样式会覆盖a.css。这个特性有时候能利用，比如做主题切换，把主题文件放在最后加载。

另外，有些人会问，@import能不能用来引入css？能，但我不推荐。@import写在style标签或css文件内部，比如：

@import url("reset.css"); 

为什么不用它？因为@import是同步阻塞的，浏览器要等它下载完才能继续渲染，而link标签是异步的。页面性能上，@import明显拖后腿。以前老项目里见过这么写的，后来全部改成link了。

最后说个冷知识。link标签除了rel="stylesheet"，还能加media属性，比如media="print"表示只在打印时生效，media="(max-width: 600px)"表示在窄屏设备上才加载。这个特性做响应式设计时很好用，可以把不同断点的样式拆成独立文件，按需加载。不过要注意，浏览器实际还是会下载所有css文件，只是应用时按条件来，所以别指望用这个减少文件下载量。

写到这里，三种方式都讲清楚了。如果你刚开始学，就记住一个原则：外部文件用link，页面内小段样式用style，能不用内联就不用内联。照着这个规范写，代码不会乱。