我无法将我的 CSS 文件链接到我的 HTML 文件。 但它在 Live Server 上运行良好。 怎么了？

Question

我在桌面上的同一个文件夹中有一个 CSS 和一个 HTML 文件。 早些时候<link rel="stylesheet" type="text/css" href="style.css" />工作正常。 现在我已经创建了两个文件夹 HTML 和 CSS 来分隔文件。 所以，现在我使用<link rel="stylesheet" type="text/css" href="/CSS/style.css" /> 。 它在 VS Code 中的 Live Server 上运行良好，但是当我在浏览器中正常打开 index.html 时，CSS 文件没有链接，现在 img 文件夹中的图像也没有链接。 我试过href = "./CSS/style.css" , href="/style.css" 。 它仅适用于实时服务器！！！ 帮助！

Answer 1

假设您有一个包含三个子目录的主目录

-MainDirectory
    -HTML
    -CSS
    -Images

现在每个文件都位于它的目录中......

-MainDirectory
    -HTML
        -index.html
    -CSS
        -style.css
    -Images
        image1.jpg
        image2.jpg

访问站点的路径是 MainDirectory/HTML/index.html

现在，主文件 (index.html) 需要使用放置在 MainDirectory/CSS 中的样式表，实现这一点的方法是操纵路径向后移动一个目录，然后从那里导航到 css，因此代码如下所示

<link rel="stylesheet" type="text/css" href="../CSS/style.css" />

代码现在所做的是从 HTML 导航到 MainDirectory，然后从那里转到 CSS，在那里它读取写入 style.css 的数据。

图像也会发生同样的情况，如果您想访问图像，则必须从../Images/image1.jpg"提取数据../Images/image1.jpg"

浏览目录的另一种方法是使用斜杠/作为起点，例如，如果您使用 MainDirectory 作为起点，您还可以像这样访问样式表/CSS/style.css ... 这告诉代码从此路径中存在的第一个文件夹开始（在我们的例子中是 MainDirectory），然后从那里导航到你需要去的地方......

通过创建超链接来理解这一点...

<a href="/style.css">Hover Me!</a>

将此代码放在index.html ，然后在浏览器中打开index.html并将鼠标悬停在链接上。

此可点击项的路径将显示在浏览器的左下角，通过查看路径，您可以轻松操作它...您可以看到它的起点，并查看是否需要转到目录向上与否，你可以看到你在哪里，你需要去哪里，玩它，改变它，直到你理解它背后的逻辑