无法将 css 样式表链接到 html答案

【问题标题】：Trouble linking css stylesheet to html无法将 css 样式表链接到 html
【发布时间】：2018-04-19 14:32:56
【问题描述】：

我无法将我的 css 样式表链接到我的 html 文件。我相信所有内容的格式都正确，当我在 finder 中打开 html 文件时，它会给出正确的输出，但是当我运行在本地打开它的 webapp 时它不起作用。我正在使用 sublime 进行编辑。

这是我的 index.html 文件和我的 css 文件的一部分。

index.html:

<html>
<head>
    <title>Attack On Purdue Login</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="init_div">
        <h1>ATTTACK ON PURDUE</h1>
        <div>
            <p style="display: inline">Username:  </p>
            <input type="username">
        </div>
        <div>
            <p style="display: inline">Password:  </p>
            <input type="password">
        </div>

        <button onclick="login()">Login</button>
    </div>
    ...

styles.css：

#init_div {
    width:800px;
    height:600px;
    background-color:red;
}

编辑：实际上，我认为这与我如何运行它有关。我正在使用节点来运行我的 index.js 文件并快速打开 index.html

这是link 和我的文件路径：

【问题讨论】：

例如您的网站位于localhost/test/ 然后尝试访问localhost/test/styles.css，是否加载了样式？
应该可以。你确定你的styles.css和你index.html在同一个目录吗？
styles.css 和 index.html 是否在同一个目录下。如果没有，您将需要提供 styles.css 的相对路径
是的，它们在同一个目录中
应该可以工作，仔细检查文件名。

标签： html css node.js express

【解决方案1】：

确保您在 href 标记中设置了正确的 css 文件路径。你可以在你的 head 标签中设置你的 CSS：

<link href="/css/example.css" rel="stylesheet">

【讨论】：

但是如果我的 css 文件与我的 html 位于同一目录中，我不需要包含任何路径，尽管只需 href="styles.css" 就可以了？
如果它们在同一个目录中，则不必包含路径
@Yash Joshi，我认为您不应该包含第一个斜线。这将使它成为一条绝对路径。您应该使用相对路径，这样当您将站点从测试移动到产品时，如果路径发生更改，您就不必更新路径；)

【解决方案2】：

包含您的 css 文件的相对路径：

<link rel="stylesheet" type="text/css" href="path/to/css/folder/styles.css">

【讨论】：