HTML与CSS必须结合使用，关键在于正确引入外部样式表、语义化命名class/id、理解层叠规则及添加viewport元标签。常见问题包括路径错误、MIME类型不匹配、class命名不当、权重混淆及缺失viewport导致响应式失效。
HTML 和 CSS 不是“怎么结合”，而是必须结合——单独写 HTML 没样式，单独写 CSS 没作用对象。关键在于用对方式、避开常见错位。
link 标签必须写对 href 且路径可访问
外部 CSS 文件靠 <link> 引入，最容易出问题的是路径错误或 MIME 类型不匹配。
-
href值不能拼错，比如style.css写成stlye.css，浏览器静默失败，无报错但样式不生效 - 相对路径以 HTML 文件为基准，不是以 CSS 文件为基准；
../css/style.css表示上一级目录下的css文件夹 - 服务器返回 CSS 文件时，响应头需含
Content-Type: text/css；用 VS Code Live Server 或 Pythonpython -m http.server通常没问题，但直接双击打开 HTML 会触发file://协议，部分浏览器会拒绝加载 CSS（尤其含@import或字体）
<head> <link rel="stylesheet" href="style.css"> </head>
class 和 id 的命名要能反映语义，别用纯样式名
CSS 选择器生效的前提是 HTML 元素带对的 class 或 id，但起名方式直接影响后期维护成本。
- 避免
class="red-text"或class="float-left"：一旦设计改红色或取消浮动，这个 class 就名不副实，容易误用或废弃 - 优先用功能/内容语义，比如
class="article-title"、class="user-avatar"，再在 CSS 里定义它该长什么样 -
id必须全局唯一，且尽量少用；现代开发中id多用于锚点跳转或 JS 获取元素，CSS 中优先用class
<h1 class="page-title">欢迎页</h1> <p class="page-intro">这是首页导语</p>
样式覆盖顺序：就近原则 + 选择器权重 + !important
同一个元素多个 CSS 规则冲突时，不是“后写的一定生效”，而是按三重机制判断。
立即学习“前端免费学习笔记（深入）”；
- 就近原则：内联样式（
style="..."） > 内部样式（<style>） > 外部样式（<link>） - 选择器权重：
#header（100） >.nav-item（10） >div（1）；组合如nav .menu a是 1+10+1=12 -
!important强制提升优先级，但会破坏层叠逻辑，仅限调试或覆盖第三方库时临时使用
<p class="text" style="color: blue;">这段文字一定是蓝色</p>
<style>
.text { color: red !important; } /* 仍为蓝色，因内联样式权重更高 */
</style>移动端适配从 viewport meta 开始，不是只靠媒体查询
没加 <meta name="viewport">，再精细的 @media 规则也白搭——手机浏览器会默认按 980px 宽度渲染，缩放显示。
- 必须在
<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1"> -
width=device-width让页面宽度匹配设备逻辑像素宽度（如 iPhone 14 的 390px），而非物理像素 - 媒体查询中用
max-width而非max-device-width：后者已过时，且不响应浏览器窗口缩放
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="responsive.css"> </head>
真正卡住人的往往不是语法，而是路径错、meta 缺、class 乱、权重糊——检查这四点，90% 的“CSS 不生效”当场解决。
