<code>标签无样式因浏览器仅默认设等宽字体，需CSS显式定义；外部样式失效主因是<link>未置<head>、rel="stylesheet"缺失或拼错、href路径计算错误（以HTML文件URL为基准）。
<code> 标签本身只是语义化标记一段计算机代码，它不自带样式，也不影响外部 CSS 的加载逻辑——真正需要关注的是如何让外部样式表正确作用于 <code> 及其父容器（比如 <pre>），以及常见失效原因。
为什么 <code> 看起来没样式？
浏览器对 <code> 的默认渲染只是等宽字体（font-family: monospace），没有背景、边框、内边距或行高优化。如果你期望类似开发者工具里那种带灰底、圆角、紧凑排版的效果，必须靠 CSS 显式定义。
- 外部样式表未成功加载（检查浏览器 DevTools 的 Network 选项卡，看
style.css是否返回 200） -
<code>被包裹在<pre>中时，若 CSS 只写了code { }却没处理pre的默认margin和white-space，视觉会错乱 - 路径写错：比如 HTML 在
/blog/post.html，但href="css/style.css"实际应为href="../css/style.css"
link 标签必须放在 <head> 里吗？
是的，必须放在 <head> 内，且建议在 <meta> 和 <title> 之后、<body> 之前。否则可能出现 FOUC（Flash of Unstyled Content）：页面先以无样式状态闪现，再突然套上样式。
- 错误位置：
<body><link rel="stylesheet" href="style.css"></body>→ 样式可能延迟应用或被忽略 - 正确写法：
<head><link rel="stylesheet" href="style.css"></head> - 如果用
media="print"或onload动态加载，另当别论，但日常开发不推荐
怎么给 <code> 写可复用的 CSS 规则？
不要只写 code { }，要兼顾嵌套场景和可维护性。典型组合是 pre code，因为实际代码块几乎都用 <pre><code>...</code></pre> 包裹。
立即学习“前端免费学习笔记（深入）”；
- 基础规则示例：
pre { background: #f6f8fa; padding: 1rem; border-radius: 4px; overflow-x: auto; } code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace; font-size: 0.9em; } pre code { display: block; padding: 0; background: none; color: inherit; } - 注意
pre默认有上下margin，若想紧贴段落，需重置：pre { margin: 0.5rem 0; } - 避免用
!important覆盖浏览器默认样式；优先用更具体的选择器，比如article pre code
最容易被忽略的是路径大小写和文件编码：Windows 下不敏感，但部署到 Linux 服务器时，Style.CSS 和 style.css 是两个文件；CSS 文件必须保存为 UTF-8 无 BOM，否则中文注释或字符可能乱码，导致整条规则失效。
