html没有链接css答案

【问题标题】：html not linking csshtml没有链接css
【发布时间】：2013-08-27 16:39:35
【问题描述】：

我在链接 html 和 Css 时遇到问题，不知道为什么。我正在做书和教程所说的一切。但是，我不会做 css 的外部配置。

这是代码（只是一个测试）：

<!DOCTYPE html>
<html lang = "eng">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <title>title</title>
        <meta name="description" content="">
        <meta name="keywords" content="">

        <link rel="stylesheets" type="text/css" href="/styles.css">
    </head>

    <body>
        <h1>test</h1>
    </body>
</html>

和 CSS：

body {
    background-color:#CCCCCC;
}

h1 {
    color:#0000EE;
}

也许我错过了一些东西，因为当我执行内部 css（在我的 html 代码中）时，一切正常，并且网络浏览器能够读取它。似乎html没有与css链接，但它甚至在同一个文件夹中，所以路径不应该是问题。

我正在使用 Linux 和 Aptana Studio。

过去 2 小时我搜索了很多，但找不到错误所在。

【问题讨论】：

styles.css 文件旁边有 html 文件吗？并且有 css 内容？

标签： html css hyperlink

【解决方案1】：

我邀请您阅读这篇文章Absolute and Relative Paths

然后我们传递给你的代码：

<link rel="stylesheets" type="text/css" href="/styles.css">

应该是：

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

您的styles.css 应与您的 html 文件位于同一文件夹中。

要验证您是否有错误，请检查浏览器的控制台，您会发现您的文件不存在（404 错误）。

另一种让你的css工作的方法是将它集成到你的页面中而不分离：

示例：

 <style type='text/css'>

    body {
        background-color:#CCCCCC;
   }

    h1 {
        color:#0000EE;
    }
</style>

【讨论】：

【解决方案2】：

如果其他建议不起作用，您可以尝试使用“UTF-8”编码重新保存 HTML 和 CSS 工作表，并在 HTML 中的 <head> 下使用 <meta charset="utf-8>" 声明 UTF-8 编码

【讨论】：

这是做什么的？？这确实为我节省了数小时的研究时间！谢谢
希望我能告诉你大声笑，可能与某些字符在 UTF 编码之间被“翻译”不同。如果你有兴趣，你应该阅读一些文章：smashingmagazine.com/2012/06/…我找不到那个我读回来了，但这应该就足够了。我记得在我发布解决方案时在教程视频中看到了这个解决方法。很高兴我能提供帮助:)
帮助解决了这个问题。我以为我要疯了。亲爱的，祝你好运！

【解决方案3】：

rel 属性应该只包含样式表，单数而不是复数

【讨论】：

感谢您的关注。这当然对我有帮助，但问题实际上是路径之前的 /。

【解决方案4】：

我遇到了同样的问题，正确的目录结构解决了我的问题。这是关于如何组织目录结构的一个很好的可视化。

http://rosebusch.net/jeff/miscellaneous/tree.html

也就是说，index.html 文件夹与 CSS 文件夹处于同一级别。如果您想将index.html 放在HTML 文件夹中，要链接到CSS 文件夹，您必须先通过链接href="../css/stylesheet.css" 退出。 ".." 将带你上一层楼。

【讨论】：

【解决方案5】：

试着把 style.css 前面的 / 去掉

【讨论】：

【解决方案6】：

确保style.css 位于您的网络根目录中，因为这是您调用它的位置

【讨论】：

【解决方案7】：

不要把/放在styles.css前面，确保它们在同一个文件夹中。

【讨论】：

【解决方案8】：

试试这个：

<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <title>title</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
        <link rel="stylesheet" type="text/css" href="./styles.css">
    </head>

    <body>
        <h1>test</h1>
    </body>
</html>

【讨论】：

仅此而已？您不解释一下为什么添加那个点会有所帮助吗？

【解决方案9】：

如果以上都不起作用：

1- 确保你没有内联/内部 CSS > 从 Html 页面中删除所有样式代码（它会阻止 external css 链接）

【讨论】：

【解决方案10】：

如果您的 CSS 文件位于另一个 文件夹，则使用

<link rel="stylesheet" type="text/css" href="folder-name/styles.css">

【讨论】：

【解决方案11】：

我在使用 Visual Studio Code 并添加引号时发现它会自动引用。因此，当我加上引号并查看索引的 index.html 时，它引用了引号（坏消息）。试试链接 <href=FILENAME.css rel=stylesheet type=text/css />

希望这行得通！此外，如果您想要多个 CSS 文件，请将它们组织在一个文件夹中，如果您在 FILENAME 中这样做，请将 /FOLDERNAME/FILENAME.css 但请确保它位于您的索引所在的主文件夹下！

【讨论】：

【解决方案12】：

我的话，我遇到了同样的问题，并且即将结束这一切。

问题在于它是 rel="stylesheet" 而不是 "stylesheets"

【讨论】：

欢迎来到 SO。请在发布前查看其他答案。当您决定回答时，请努力完整地回答问题并解释为什么您的解决方案有效/为什么您的解决方案比现有解决方案更好。祝你好运