Verknüpfen Sie eine .css-Datei in einem anderen Ordner

Question 1

Stellen Sie sich vor, ich habe einen Ordner „Website“, in dem meine Dateien für diese Website gespeichert sind, und einen weiteren Ordner mit Schriftarten, und dass der Schriftartenordner mehr Ordner für jede Schriftart enthält. Meine HTML- und CSS-Datei befindet sich direkt im Website-Ordner. Meine Font-Face-CSS-Datei befindet sich im /font-Ordner.

Ich möchte meine CSS-Datei mit meiner HTML-Datei verknüpfen, also mache ich das: href=”stylesheet.css”

Ich möchte auch meine Font-Face-CSS-Datei mit meiner HTML-Datei verknüpfen, also was soll ich in href=”” einfügen?

Und ich möchte auch meine Schriftarten, die sich in einem eigenen Ordner befinden, der sich auch im Schriftartenordner befindet, in dem sich die CSS-Datei befindet, mit meiner Font-Face-CSS-Datei verknüpfen. Was soll ich in die src: einfügen?

 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)

Question 2

Überprüfen Sie dies schnelle Erinnerung an den Dateipfad

Hier ist alles, was Sie über relative Dateipfade wissen müssen:

Beginnend mit “https://stackoverflow.com/” kehrt zum Stammverzeichnis zurück und startet dort

Beginnend mit “../” springt ein Verzeichnis zurück und beginnt dort
Beginnend mit “.././” bewegt sich zwei Verzeichnisse rückwärts und beginnt dort (und so weiter …)
Um voranzukommen, beginnen Sie einfach mit dem ersten Unterverzeichnis und bewegen Sie sich weiter vorwärts

Question 3

Ich verstehe es nicht klar, möchten Sie ein externes CSS als die oben definierte Dateistruktur verknüpfen? Wenn ja, dann verwenden Sie einfach das Link-Tag:

    <link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/27218879/file.css">

Also im Grunde für Dateien, die sich unter Ihrem Website-Ordner (Ordner mit Ihrem Index) befinden, rufen Sie ihn direkt auf. Verwenden Sie für jeden nachfolgenden Ordner in Ihrem Fall beispielsweise “https://stackoverflow.com/”:

    <link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/27218879/Fonts/Font1/file%20name">
    <link rel="stylesheet" type="text/css" href="Fonts/Font2/file%20name">

Question 4

Ich denke, was Sie tun möchten, ist

<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/27218879/font/font-face/my-font-face.css">

Question 5

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