[英]I can't link my CSS file to my HTML file. But it is working fine with Live Server. What's wrong?
I had a CSS and a HTML file in the same folder on the desktop.我在桌面上的同一个文件夹中有一个 CSS 和一个 HTML 文件。 Earlier
<link rel="stylesheet" type="text/css" href="style.css" />
was working fine.早些时候
<link rel="stylesheet" type="text/css" href="style.css" />
工作正常。 Now I've made two folders HTML and CSS to separate the files.现在我已经创建了两个文件夹 HTML 和 CSS 来分隔文件。 So, now I use
<link rel="stylesheet" type="text/css" href="/CSS/style.css" />
.所以,现在我使用
<link rel="stylesheet" type="text/css" href="/CSS/style.css" />
。 It works perfectly fine on Live Server in VS Code but when I open index.html normally in a browser, the CSS file does not link, neither do the images which are in the img folder now.它在 VS Code 中的 Live Server 上运行良好,但是当我在浏览器中正常打开 index.html 时,CSS 文件没有链接,现在 img 文件夹中的图像也没有链接。 I've tried
href = "./CSS/style.css"
, href="/style.css"
.我试过
href = "./CSS/style.css"
, href="/style.css"
。 It works ONLY IN LIVE SERVER!!!它仅适用于实时服务器!!! HELP!
帮助!
Let's say you have one main directory that has three sub-directories假设您有一个包含三个子目录的主目录
-MainDirectory
-HTML
-CSS
-Images
Now each file lives inside it's directory...现在每个文件都位于它的目录中......
-MainDirectory
-HTML
-index.html
-CSS
-style.css
-Images
image1.jpg
image2.jpg
The path for accessing the site is MainDirectory/HTML/index.html访问站点的路径是 MainDirectory/HTML/index.html
Now, the main file (index.html) needs to use the stylesheet placed in MainDirectory/CSS and the way to achieve this is by manipulating the path to go one directory backwards and from there navigate to css so the code would look like this现在,主文件 (index.html) 需要使用放置在 MainDirectory/CSS 中的样式表,实现这一点的方法是操纵路径向后移动一个目录,然后从那里导航到 css,因此代码如下所示
<link rel="stylesheet" type="text/css" href="../CSS/style.css" />
What the code does now is that it navigates from HTML to MainDirectory and from there it goes to CSS where it reads the data written in style.css.代码现在所做的是从 HTML 导航到 MainDirectory,然后从那里转到 CSS,在那里它读取写入 style.css 的数据。
The same happens with the images, if you want to access an image you will have to pull the data from ../Images/image1.jpg"
图像也会发生同样的情况,如果您想访问图像,则必须从
../Images/image1.jpg"
提取数据../Images/image1.jpg"
Another way to navigate through the directories is to use a slash /
as a starting point so for an example if you are using MainDirectory as your starting point, you can also access the stylesheet like this /CSS/style.css
... This tells the code to start from the very first folder that exists in this path (in our case it is MainDirectory) and from there navigate to where you need to go...浏览目录的另一种方法是使用斜杠
/
作为起点,例如,如果您使用 MainDirectory 作为起点,您还可以像这样访问样式表/CSS/style.css
... 这告诉代码从此路径中存在的第一个文件夹开始(在我们的例子中是 MainDirectory),然后从那里导航到你需要去的地方......
Understand this by creating hyperlinks...通过创建超链接来理解这一点...
<a href="/style.css">Hover Me!</a>
Place this code in your index.html
, then open index.html
in your browser and hover over the link.将此代码放在
index.html
,然后在浏览器中打开index.html
并将鼠标悬停在链接上。
The path to where this clickable item goes will show in the bottom-left corner of the browser and by being able to see the path you can easily manipulate it... You can see it's starting point and see if you need to go a directory up or not, you can see where you are and where you need to go, play with it, change it until you understand the logic behind it此可点击项的路径将显示在浏览器的左下角,通过查看路径,您可以轻松操作它...您可以看到它的起点,并查看是否需要转到目录向上与否,你可以看到你在哪里,你需要去哪里,玩它,改变它,直到你理解它背后的逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.