html5怎么加css样式_html5引入css样式的三种方式【指南】

link 标签引入外部 css 是最常用也最推荐的方式

浏览器能并行下载、支持缓存、不影响渲染阻塞（配合 rel="stylesheet"），而且便于维护。别用 @import 在 CSS 里套 CSS，它会串行加载，拖慢首屏。

• 必须写在 里，否则可能触发重绘或 FOUC（内容闪动）
• rel="stylesheet" 不能漏，少了就当普通链接处理，样式不生效
• 路径写错时浏览器控制台报 Failed to load Resource: net::ERR_ABORTED，检查 href 是否拼错或路径不对（比如少了个 ./ 或多了一层 ../）
• 如果用构建工具（如 Vite/webpack），link 仍可用，但通常走 js 动态注入，此时实际是 JS 控制加载时机，不是纯 html 行为

style 标签写内联 CSS 适合小项目或临时调试

直接把 CSS 写进 HTML 的 <style></style> 里，不用发额外请求，但无法复用、不好维护，也不利于浏览器缓存。

• 必须放在 ，放 底部可能导致样式延迟应用，尤其页面内容多时明显
• 注意不要和外部 CSS 冲突：同名选择器下，<style></style> 里的规则优先级等同于外部文件，靠“后定义胜出”
• 如果用了 CSS-in-JS 或框架（如 React），<style></style> 里写全局样式容易污染，慎用

style 属性写行内样式只该用于动态覆盖，别当主力

style 属性写在标签上，比如 <div style="color: red; margin: 0">，它的优先级最高，但可维护性最差，而且没法写伪类、媒体查询这些。 <ul> <li>JS 操作 dom 时动态改样式，用 <code>element.style.xxx = "value" 是合理的；但手写大量 style="..." 就是在给自己埋雷

遇到样式不生效？先查这三件事

不是代码写错了，就是加载或优先级没理清。别急着重写，按顺序快速验证。

立即学习“前端免费学习笔记（深入）”；

• 打开浏览器开发者工具，看 Elements 面板里目标元素上有没有你写的样式——没有？说明选择器没匹配上，或 CSS 根本没加载（检查 Network 选项卡里 CSS 文件状态码是不是 404）
• 样式显示为灰色带横线？说明被更高优先级的规则覆盖了，点开旁边的“Computed”面板，看最终生效的是哪条
• 改了 CSS 文件但页面没变？可能是缓存，试试硬刷新（Ctrl+Shift+R 或 Cmd+Shift+R），或者给 <link> 加个版本参数：href="style.css?v=1.0.1"

CSS 的加载顺序、选择器权重、是否被 JS 覆盖，这几个点混在一起时最容易卡住。很多人调半天发现只是 link 标签少了个 rel，或者路径里大小写错了——html5 不区分标签大小写，但文件系统可能区分。