在另一个文件夹中链接 a.css 文件

Question

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.

I want to link my css file to my html file, so I do this: href="stylesheet.css"

I also want to link my font-face-css file to my html file, so what should I put inside 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:?

 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)

Answer 1

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

Answer 2

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 :

    <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">

Answer 3

我想你想做的是

 <link rel="stylesheet" type="text/css" href="font/font-face/my-font-face.css"> 

Answer 4

 <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> 

Answer 5

Update for everyone who can't find answer for linking css to html when css is in different folder. You need just put.(dot) before everything in href. I have like this href="./public/css/styles.css", but main html index.html i have in main folder where is everything. That's how it works for me at least.