Question

我正在尝试将样式表（styles.css）链接到index.html。当我使用Chrome的Sublime Text构建功能执行此操作时，HTML会很好，但不会链接到样式表（文本不是蓝色）。当我将这个完全相同的代码（在相同的文件夹结构中）上传到BitBalloon时，链接可以正常工作。为什么这样，以及如何在两种情况下使链接工作？

的index.html：

<!DOCTYPE HTML>
<html>
<head>
    <title>I think I'm doing this right!</title>
    <link rel="stylesheet" type="text/css" href="/css/styles.css" />
</heaod>
<body>
    <div class="jumbotron">
      <div class="container">
        <h1>CareerFoundry Template</h1>
        <p style="background-color: red;">This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more &nbsp;&amp;&nbsp; unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>
</body>
</html>

styles.css的：

body {color:blue;}

Working HTML and CSS on BitBalloon

Answer 1

您的在线根目录在标准设置上设置为public_html（或www）。

第一部分：

/css/styles.css

告诉我们要看项目的根源＆＃34; /＆＃34;从那里开始在您的计算机上，它正在使用＆＃34; /＆＃34;作为您计算机的根目录。

只使用＆＃34; css / styles.css＆＃34;如果css文件夹与包含html文件的目录相同，则可能会有效。

否则，您可以运行本地Web服务器，例如WAMP，这样您就可以在本地计算机上以root用户身份拥有一个public_html文件夹。

Answer 2

当您使用 / 开始 / 这样的 /css/styles.css 时，您告诉浏览器查看您正在查看的网址，取其基础部分并附加 /css/styles.css

当您的网站托管在BitBalloon上时，您网址的基础是 shopkeeper-cnythia-30345.bitballoon.com ，并且样式表的完整路径变为 http://shopkeeper-cnythia-30345.bitballoon.com/css/styles.css < /强>

当您在本地查看文件时，URL可能类似于 file：/// Users / mbc / Documents / html-sites / html5up-aeria l - 在这种情况下没有基本域名，因此您的浏览器最终会查找该文件： file：//css/styles.css 并且不存在。

有两种解决方法。

使用真正的相对路径，例如 css / styles.css 。这会告诉浏览器获取您所在的目录并附加 css / styles 。这样做的缺点是，如果您在 /about/index.html 这样的子页面上，您必须小心 - 从那时起，浏览器将尝试获取 / about / css /styles.css ，你需要链接到 ../ css / styles.css 来解决这个问题

使用绝对路径并运行本地Web服务器。这是一个非常好的一行列表将允许您从目录中的命令行启动一个简单的Web服务器：https://gist.github.com/willurd/5720255，这可以保证您在本地查看站点并将其部署到BitBalloon时，您的站点的行为方式相同。 / LI>
我建议习惯运行本地Web服务器。一旦你开始玩Javascript，Ajax请求等，它就变成了必需品。

样式表的相对链接在本地计算机上不起作用，在线工作。为什么是这样？

2 个答案: