将.css链接到另一个文件夹

时间:2014-11-30 22:12:41

标签: html css fonts

我对如何链接事物有一些疑问。

想象一下,我有一个文件夹“Website”,其中存储了我的网站文件,另一个文件夹包含字体,并且字体文件夹中每个字体都有更多文件夹。我的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)

谢谢

4 个答案:

答案 0 :(得分:32)

检查此quick reminder of file path

以下是您需要了解的相关文件路径:

  • 以" /&#34开头;返回根目录并从那里开始
  • 以" ../"开头;向后移动一个目录并从那里开始
  • 以" ../../&# 34开头;向后移动两个目录并启动 那里(等等......)
  • 要继续前进,只需从第一个子目录开始并保持 前进

答案 1 :(得分:11)

我不清楚,你想将外部css链接为上面定义的文件结构吗?如果是,那么只需使用链接标记:

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

所以基本上对于您网站文件夹下的文件(包含索引的文件夹),您可以直接调用它。对于每个连续的文件夹,使用&#34; /&#34;例如在你的情况下:

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

答案 2 :(得分:1)

我认为你想要做的是

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

答案 3 :(得分:0)

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