我无法将我的 CSS 文件链接到我的 HTML 文件。但它在实时服务器上工作正常。怎么了？

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"中提取数据

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

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

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

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

这个可点击项目的路径将显示在浏览器的左下角，通过查看路径，你可以轻松地操作它……你可以看到它的起点，看看你是否需要上一个目录，你可以看到你在哪里，你需要去哪里，玩它，更改它，直到你理解它背后的逻辑