Ссылка на .css на другую папку

У меня есть некоторые вопросы о том, как связать вещи.

Представьте, что у меня есть папка "Веб-сайт", где хранятся мои файлы для этого веб-сайта, а также другая папка с шрифтами и что папка шрифта имеет больше папок для каждого шрифта. Мой файл html и css находится непосредственно в папке веб-сайта. Мой файл font-face-css находится в папке /font.

Я хочу связать свой файл css с моим html файлом, поэтому я делаю это: href= "stylesheet.css"

Я также хочу связать свой файл font-face-css с моим html файлом, так что я должен помещать внутри href=""?

И я также хочу связать свои шрифты, которые находятся в их собственной папке, которая также находится внутри папки шрифтов, где находится файл css для моего файла font-face-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)

Спасибо

Ответ 1

Я не понимаю это, вы хотите связать внешний CSS как структуру файлов, которые вы определили выше? Если да, то просто используйте тег ссылки:

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

так что в основном для файлов, находящихся под папкой вашего веб-сайта (папка, содержащая ваш индекс), вы вызываете ее напрямую. Для каждой последующей папки используйте "/", например, в вашем случае:

    <link rel="stylesheet" type="text/css" href="Fonts/Font1/file name">
    <link rel="stylesheet" type="text/css" href="Fonts/Font2/file name">

Ответ 2

проверьте это быстрое напоминание о пути к файлу

Вот все, что вам нужно знать об относительных путях файлов:

Начиная с "/" возвращается в корневой каталог и начинается там
Начиная с "../" перемещает один каталог назад и начинает там
Начиная с "../../" перемещает две директории назад и запускает там (и так далее...)
Чтобы двигаться вперед, просто начните с первого подкаталога и продолжайте движение вперед

Ответ 3

Я думаю, что вы хотите сделать

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

Ответ 4

<link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'; return false;">

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