HTML 与 CSS 必须结合使用，关键在于正确引入外部样式表、语义化命名 class/id、理解层叠规则及添加 viewport 元标签。常见问题包括路径错误、MIME 类型不匹配、class 命名不当、权重混淆及缺失 viewport 导致响应式失效。

HTML 和 CSS 不是“怎么结合”，而是必须结合——单独写 HTML 没样式，单独写 CSS 没作用对象。关键在于用对方式、避开常见错位。

link 标签必须写对 href 且路径可访问

外部 CSS 文件靠 引入，最容易出问题的是路径错误或 MIME 类型不匹配。

• href 值不能拼错，比如 style.css 写成 stlye.css，浏览器 静默失败，无报错但样式不生效
• 相对路径以 HTML 文件为基准，不是以 CSS 文件为基准；../css/style.css 表示上一级目录下的 css 文件夹
• 服务器返回 CSS 文件时，响应头需含 Content-Type: text/css；用 VS Code Live Server 或 Python python -m http.server 通常没问题，但直接双击打开 HTML 会触发 file:// 协议，部分浏览器会拒绝加载 CSS（尤其含 @import 或字体）

class 和 id 的命名要能反映语义，别用纯样式名

CSS 选择器生效的前提是 HTML 元素带对的 class 或 id，但起名方式直接影响后期维护成本。

• 避免 class="tuc-ac48c05b-81ae56-0 red-text tuc-ac48c05b-81ae56-0" 或 class="tuc-ac48c05b-81ae56-0 float-left tuc-ac48c05b-81ae56-0"：一旦设计改红色或取消浮动，这个 class 就名不副实，容易误用或废弃
• 优先用功能 / 内容语义，比如 class="tuc-ac48c05b-81ae56-0 article-title tuc-ac48c05b-81ae56-0"、class="tuc-ac48c05b-81ae56-0 user-avatar tuc-ac48c05b-81ae56-0"，再在 CSS 里定义它该长什么样
• id 必须全局唯一，且尽量少用；现代开发中 id 多用于锚点跳转或 JS 获取元素，CSS 中优先用 class

欢迎页 
 
 这是首页导语

样式覆盖顺序：就近原则 + 选择器权重 + !important

同一个元素多个 CSS 规则冲突时，不是“后写的一定生效”，而是按三重机制判断。

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

• 就近原则：内联样式（style="……"）> 内部样式（


  ）> 外部样式（）

• 选择器权重：#header（100）> .nav-item（10）> div（1）；组合如 nav .menu a 是 1+10+1=12
• !important 强制提升优先级，但会破坏层叠逻辑，仅限调试或覆盖第三方库时临时使用

这段文字一定是蓝色
 

移动端适配 从 viewport meta 开始，不是只靠媒体查询

没加 ，再精细的 @media 规则也白搭——手机浏览器会默认按 980px 宽度渲染，缩放显示。

• 必须在 中加入：
• width=device-width 让页面宽度匹配设备逻辑像素宽度（如 iPhone 14 的 390px），而非物理像素
• 媒体查询中用 max-width 而非 max-device-width：后者已过时，且不响应浏览器窗口缩放

真正卡住人的往往不是语法，而是路径错、meta 缺、class 乱、权重糊——检查这四点，90% 的“CSS 不生效”当场解决。