html怎么导入css

打开一个网页的导入源代码，你总会看到head标签里藏着几行link或者style。导入别被吓到，导入css导入html这事儿，导入本质上就三种玩法。导入

最直接的导入那种，叫外部样式表。导入你写一个单独的导入文件，后缀叫.css，导入里面全是导入样式规则。然后在html的导入head区域写一句：<link rel="stylesheet" href="style.css">。浏览器读到这行，导入就会跑去把那个css文件拉过来，导入套在页面上。导入这方式的导入好处是，一个css文件能管住整个网站的几十个页面。改一处，全站跟着变。我见过不少新手把样式全堆在html里，改个按钮颜色得翻半天——那是自找麻烦。

第二种，内部样式表。直接在html文件的head里写<style>...</style>，样式代码就夹在标签中间。这招适合单页面小玩意儿，比如一个临时用的活动页，或者你只想快速验证某个效果。缺点也明显，页面一多，每个html都得复制一遍样式，改起来能让你怀疑人生。我偶尔会用它来做demo，纯粹因为懒得建新文件。

第三种，行内样式。最暴力，直接在标签上写style="color:red;"。优先级最高，能压过前两种。但你别真拿它写整站——那等于把样式和结构焊死在一起，想复用？没门。代码丑得像用胶带缠的。我见过有些老系统里全是这玩意儿，维护起来跟拆炸弹似的。

优先级这事情，得说清楚。行内样式最高，内部样式和外部样式看谁写在后面。但有个更狠的规则：!important。你写了这个，前面那些优先级全得靠边站。这玩意儿像核武器，偶尔用一次能解决问题，天天用，你的代码就是一团乱麻。

实际操作里还有个细节：link标签的位置。放在head里，页面加载时css先到位，html内容再渲染，用户看到的就是排好版的页面。你要是把link扔到body末尾，页面会先显示一堆没样式的裸html，然后突然“啪”地变好看——那种闪烁感，挺掉价的。

说个我踩过的坑。有一次写页面，外部css死活不生效，检查路径没问题，文件名没错，编码也对。最后发现是href写成了绝对路径，指向了服务器上另一个目录。html导入css，最常用的就是外部文件这条路，但路径这关，新手容易栽跟头。相对路径用熟了，基本就稳了。

还有种骚操作，用@import在css文件里再引另一个css。比如主样式表里写@import url("reset.css")。这方式能让样式文件模块化，但性能上略吃亏，因为浏览器得等第一个css下载完才发现还得再拉一个。除非你有强迫症非得分文件，否则不推荐。

现在回头看看，html和css的关系就像骨架和皮肉。导入方式选对了，后续维护省心一半。我的习惯是：多页面项目一律外部样式表，单页demo用内部样式，行内样式只在调试时临时用。你按这个思路走，基本不会出大错。

最后提醒一句，写完css记得强制刷新浏览器，ctrl+F5。缓存这东西，经常让你以为代码写错了，其实浏览器还在用旧文件。