css引入方式有哪几种？css引入的三种方式全拆解

干前端开发数年，敢说90%的新手，刚接触CSS都会在“引入方式”上踩坑。要么写的样式不生效，要么后期维护得发疯，甚至把三种方式混着用，最后调试到深夜，真的太折磨人。
其实CSS就三种引入方式，没有高低之分，全看开发场景，吃透它们的区别，能省不少麻烦。先从最省事，但最不推荐长期用的说起——行内样式。
行内样式就是直接写在HTML标签里，用style属性，比如<div style="color: red;">。应急改单个元素样式超方便，比如临时调整某个按钮颜色，不用找单独的CSS文件。但缺点也致命，写得多了，HTML和CSS混在一起，后期想批量修改，得一个个找，能把人逼疯，除非应急，平时千万别多用。
然后是内部样式，把CSS写在HTML的head标签里，用style标签包裹。比行内样式规整，能统一控制当前页面的所有元素，不用切换文件，适合做简单页面、单个页面的开发。但它也有短板，只能作用于当前页面，多页面开发时，样式不能复用，重复写代码，纯属浪费时间。
最后是外部样式，也是工作中最常用、最推荐的方式。单独建一个.css文件，比如style.css，然后在HTML里用link标签引入。好处太多了，样式和HTML完全分离，多页面能复用同一个CSS文件，后期维护只改一个文件就行，团队协作也方便。唯一要注意的是，link标签的路径别写错，不然样式加载失败，排查起来很麻烦。
补充个关键知识点，三种方式有优先级：行内样式>内部样式>外部样式，同级样式后面写的会覆盖前面的，新手很容易因为这个搞混，踩过一次就记住了。
小编建议，简单页面、应急用行内或内部，多页面、长期维护必用外部。别混着用太多，不然样式冲突，调试起来真的头大，练熟一种，再灵活搭配就够了。