当我在谷歌浏览器上加载我的 html 文件时，我的 CSS 样式不适用答案

【问题标题】：My CSS STYLLING Don't Apply when i load my html file on google chrome当我在谷歌浏览器上加载我的 html 文件时，我的 CSS 样式不适用
【发布时间】：2022-12-09 15:33:00
【问题描述】：

我建立了一个 Edge Ledger 网站，使用 vs 代码做了 html 和 css 样式，当我在实时服务器上运行它时它工作正常，我所做的 css 样式已经实现但是如果我只是转到根文件夹并打开 index.html文件而不使用 vs 代码来运行它，它只显示没有样式的 html 元素。谁能帮忙？

i tried opening the index file without vs code, it just loads the html file without the css.

when i run this with live server on VS code the css styling i did is applied to the index html page

可能是什么问题呢？

【问题讨论】：

问题是您的 CSS href 以“/”开头，当您通过 file:// 协议查看文件时，浏览器会在根目录中查找 css 文件夹。解决方案是删除前导斜杠。
谢谢，你的回答很有帮助。

标签： javascript html css google-chrome web

【解决方案1】：

解释

直接打开 HTML 文件的问题在于，现在您的计算机自己的硬盘驱动器是提供文件的“服务器”。因此，浏览器向您的计算机询问目录/css 中的 CSS 文件，/ 表示整个文件系统的根目录。

对于您的计算机，这有几个问题。以/ 开头的路由通常用于基于 UNIX 的系统（想想 MacOS 或 Linux 发行版，如 Ubuntu），但由于您使用的是 Windows，因此该类型的目录或路径不会解析为任何内容。即使您使用的是 MacOS 或 Linux，您也很可能不会将 CSS 文件放在/ 中，因为这就像将它们放在 Windows 中的C:/ 中一样。

这就是为什么在适当的服务器上提供 HTML 文件时，/ 路径被正确解析的原因，因为 / 表示 Web 服务器目录的根目录，而不是文件系统的根目录。

解决方案 A - 本地文件服务器

如果你想保持你的代码原样，并且你的机器上本地安装了 Python 或 Node.js，你可以使用它们中的任何一个来启动一个轻量级的 HTTP 服务器来充当静态文件服务器。

# Python 2.x
python -m SimpleHTTPServer

# Python 3.x
python3 -m http.server

# Node.js with npm
npx serve

现在访问 http://localhost:8080（或您的终端告诉您的任何端口），应该提供您的 HTML 文件和正确解析 CSS 资源路径。

你可以在这里找到大量不同语言的其他静态服务器：https://gist.github.com/willurd/5720255

解决方案 B - 相对文件路径

另一种解决方案是从资产路径中删除 / 前缀，使它们成为 index.html 文件的相对路径。请注意，这可能会在未来导致其他意外情况，例如，如果您的 index.html 文件也用于 /about 页面，则 CSS 资源路径现在将解析为 /about/css 而不是 /css（如css/... 路径现在是相对的到当前路径并将附加到它）。因此，尽管这是一种廉价且快速的本地修复方法，但它并不被认为是最佳实践。

【讨论】：