html - 样式表的相对链接在本地机器上不起作用,在线工作。为什么是这样?

标签 html css stylesheet rel

我正在尝试将我的样式表 (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>

样式.css:

主体 {color:blue;}

Working HTML and CSS on BitBalloon

最佳答案

您的在线根目录在标准设置中设置为 public_html(或 www)。

第一部分:

/css/styles.css

说明是查看元素“/”的根目录并从那里开始。在您的计算机上,它使用“/”作为计算机的根目录。

如果 css 文件夹与包含您的 html 文件的目录相同,则仅使用“css/styles.css”可能会起作用。

否则,您可以运行本地 Web 服务器,例如 WAMP这将允许您在本地计算机上拥有一个 public_html 文件夹作为根目录。

关于html - 样式表的相对链接在本地机器上不起作用,在线工作。为什么是这样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26963048/

相关文章:

html - 已访问链接属性覆盖当前页面元素

jquery - 对表中的特定行进行排序 + HTML + jQuery

html - 使 div 扩展到包含 span 的宽度

stylesheet - 重构文本样式

javascript - 根据h1动态更新一个html元素值

Javascript地理定位找不到位置信息

html - 文本对齐在我有一列后不起作用

javascript - 在按钮拖动上拖动父 div

css - 清除样式表中 img 的左/右

javascript - 在以下情况下,为什么下拉菜单没有根据从选择框中选择的值隐藏和显示?