Html 将 .css 链接到另一个文件夹
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27218879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Link a .css on another folder
提问by Bhojendra Rauniyar
I have some questions about how to link things.
我有一些关于如何链接事物的问题。
Imagine that I have a folder "Website" where my files for that website are stored, and another folder with fonts, and that the font folder has more folders for each font. My html and css file is directly on the website folder. My font-face-css file is on the /font folder.
想象一下，我有一个文件夹“网站”，用于存储我的网站文件，另一个文件夹包含字体，并且字体文件夹为每种字体提供更多文件夹。我的 html 和 css 文件直接位于网站文件夹中。我的 font-face-css 文件位于 /font 文件夹中。
I want to link my css file to my html file, so I do this: href="stylesheet.css"
我想将我的 css 文件链接到我的 html 文件，所以我这样做： href="stylesheet.css"
I also want to link my font-face-css file to my html file, so what should I put inside href=""?
我还想将我的 font-face-css 文件链接到我的 html 文件，那么我应该在 href="" 里面放什么？
And I also want to link my fonts, which are in their own folder, which is also inside the font folder which is where the css file is to my font-face-css file, what should I put inside the src:?
而且我还想将我的字体链接到我的 font-face-css 文件中，它们位于它们自己的文件夹中，该文件夹也在字体文件夹中，这是 css 文件所在的位置，我应该在 src 中放什么：？
1 Website folder
1.1 Fonts folder (/fonts)
1.1.1 Font1 folder (/fonts/font1)
1.1.1.1 ttf file (/font/font1/font1.ttf)
1.1.1.2 svg file (/font/font1/font1.svg)
1.1.2 Font2 folder (/fonts/font2)
1.1.2.1 ttf file (/font/font1/font2.ttf)
1.1.2.2 svg file (/font/font1/font2.svg)
1.2 html file (file.html)
1.3 css file (file.css)
Thank you
谢谢
采纳答案by mrahmat
I dont get it clearly, do you want to link an external css as the structure of files you defined above? If yes then just use the link tag :
我不太清楚，你想链接一个外部css作为你上面定义的文件结构吗？如果是，那么只需使用链接标签：
<link rel="stylesheet" type="text/css" href="file.css">
so basically for files that are under your website folder (folder containing your index) you directly call it. For each successive folder use the "/" for example in your case :
所以基本上对于您的网站文件夹（包含您的索引的文件夹）下的文件，您可以直接调用它。对于每个连续的文件夹，例如在您的情况下使用“/”：
<link rel="stylesheet" type="text/css" href="Fonts/Font1/file name">
<link rel="stylesheet" type="text/css" href="Fonts/Font2/file name">
回答by Bhojendra Rauniyar
check this quick reminder of file path
检查这个文件路径的快速提醒
Here is all you need to know about relative file paths:
以下是您需要了解的有关相对文件路径的所有信息：
- Starting with "/" returns to the root directory and starts there
- Starting with "../" moves one directory backwards and starts there
- Starting with "../../" moves two directories backwards and starts there (and so on...)
- To move forward, just start with the first subdirectory and keep moving forward
- 以“/”开头返回根目录并从那里开始
- 以“../”开始向后移动一个目录并从那里开始
- 以“../../”开始向后移动两个目录并从那里开始（依此类推......）
- 要前进，只需从第一个子目录开始并继续前进
回答by Edwin Samuel Jonathan
I think what you want to do is
我想你想做的是
<link rel="stylesheet" type="text/css" href="font/font-face/my-font-face.css">回答by trantuliem
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">.tree-view-com ul li {
position: relative;
list-style: none;
}
.tree-view-com .tree-view-child > li{
padding-bottom: 30px;
}
.tree-view-com .tree-view-child > li:last-of-type{
padding-bottom: 0px;
}
.tree-view-com ul li a .c-icon {
margin-right: 10px;
position: relative;
top: 2px;
}
.tree-view-com ul > li > ul {
margin-top: 20px;
position: relative;
}
.tree-view-com > ul > li:before {
content: "";
border-left: 1px dashed #ccc;
position: absolute;
height: calc(100% - 30px - 5px);
z-index: 1;
left: 8px;
top: 30px;
}
.tree-view-com > ul > li > ul > li:before {
content: "";
border-top: 1px dashed #ccc;
position: absolute;
width: 25px;
left: -32px;
top: 12px;
}<div class="tree-view-com">
<ul class="tree-view-parent">
<li>
<a href=""><i class="fa fa-folder c-icon c-icon-list" aria-hidden="true"></i> folder</a>
<ul class="tree-view-child">
<li>
<a href="" class="document-title">
<i class="fa fa-folder c-icon" aria-hidden="true"></i>
sub folder 1
</a>
</li>
<li>
<a href="" class="document-title">
<i class="fa fa-folder c-icon" aria-hidden="true"></i>
sub folder 2
</a>
</li>
<li>
<a href="" class="document-title">
<i class="fa fa-folder c-icon" aria-hidden="true"></i>
sub folder 3
</a>
</li>
</ul>
</li>
</ul>
</div>