如何在多个HTML页面中复用同一个CSS文件-css教程-PHP中文网

最简单稳定的方式是用引入外部css，90%失效源于路径错误：相对路径以html文件位置为基准，根相对路径（如/css/common.css）更稳妥；缓存问题需禁用devtools缓存或添加版本号参数（如?v=1.0.3）解决。

如何在多个html页面中复用同一个css文件

直接用 <link rel="stylesheet"> 引入同一份外部 CSS 文件，是最简单、最稳定、浏览器原生支持的做法。其他方式（比如复制代码、@import 嵌套、JS 动态插入）要么维护成本高，要么有加载阻塞或作用域问题。

路径写错是 90% 的“没生效”原因

相对路径的基准永远是当前 HTML 文件所在位置，不是项目根目录，也不是 CSS 文件位置。

如果 index.html 在网站根目录，common.css 放在 css/ 子目录下，就写：href="css/common.css"
如果 pages/about.html 是子目录页，要引用同一个 css/common.css，就得写：href="../css/common.css"（不能写 ./css/common.css，因为 ./ 指的是 pages/ 目录）
更稳妥的方式是统一用根相对路径：href="/css/common.css"——开头带 /，从域名后第一级开始算，不管 HTML 在哪层目录都有效

改了 CSS 但页面没更新？大概率是缓存没清

浏览器对 CSS 文件的缓存比 HTML 更顽固，尤其本地开发时没加版本号，改完根本看不到效果。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

开发阶段：打开 Chrome DevTools → Network 标签页 → 勾选 Disable cache，再刷新
上线前：在 href 后加查询参数，比如：href="/css/common.css?v=1.0.3"，每次发版改这个值即可穿透缓存
别信 Ctrl+F5 ——它只强制重载 HTML，CSS 可能还在磁盘缓存里；看 Network 面板里该文件状态码是不是 304（说明没真加载新内容）

多个页面共用但个别要覆盖样式，别动公共文件

公共 CSS 是基线，不是终点。覆盖逻辑必须靠优先级和作用域控制，而不是删改公共规则。

公共文件里少用 div#header .nav li a 这类高权重选择器，多用语义类名如 .btn-primary、.card-header
需要局部覆盖时，在对应页面自己的 <style></style> 或独立 CSS 中写更高优先级规则，例如：body.about-page .btn-primary { background: #ff6b6b; }
避免在公共文件里加 !important——它会让后续覆盖变得不可控，且难以调试

别用 `@import` 在 CSS 里嵌套引入

@import 会阻塞渲染，且不支持并行下载，现代项目里它只是个性能陷阱。

比如 main.css 里写 @import 'reset.css'; @import 'layout.css';，浏览器必须先下载解析完 main.css，才能发起 reset.css 请求
Network 面板里看到 CSS 请求呈长链路（A → B → C），基本就是 @import 嵌套导致的
构建工具项目中，优先用 JS 的 import 或 Sass 的 @use 替代；纯静态站点，就老老实实每个页面 <link> 一次