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

Posted 2023-03-15

【中文标题】将 .css 链接到另一个文件夹

【英文标题】：Link a .css on another folder

【发布时间】：2015-01-28 21:31:31

【问题描述】：

我有一些关于如何链接事物的问题。

想象一下，我有一个“网站”文件夹，用于存储该网站的文件，还有另一个包含字体的文件夹，并且字体文件夹中每种字体都有更多文件夹。我的 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】：

检查这个quick reminder of file path

以下是您需要了解的有关相对文件路径的所有信息：

以“/”开头返回根目录并从那里开始 以“../”开头的目录向后移动一个目录并从那里开始 以“../../”开始向后移动两个目录并开始 那里（等等...） 要继续前进，只需从第一个子目录开始并保持 前进

【讨论】：

你是用www根还是文件系统根/

【参考方案2】：

我不明白，你想链接一个外部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">

【讨论】：

我这样做了： fontface.css 在字体内部，在网站内部。尽管我在 .css 文件中分配了它们，但它并没有改变我的文本字体。我做错了什么？

您是否将字体应用于文本？还是你只是导入它而不做任何其他事情？

【参考方案3】：

我想你想做的是

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

【参考方案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>

【讨论】：

仅代码的答案在本网站上通常不受欢迎。您能否编辑您的答案以包含一些 cmets 或对您的代码的解释？解释应该回答这样的问题：它有什么作用？它是如何做到的？它去哪儿了？它如何解决OP的问题？见：How to anwser。谢谢！