7

我在链接 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 个小时里，我进行了很多搜索，但找不到错误在哪里。

4

12 回答 12

10

我邀请您阅读这篇文章绝对路径和相对路径

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

<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>
于 2013-08-24T23:30:12.387 回答
3

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

于 2019-11-14T17:44:15.567 回答
1

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

于 2013-08-24T20:51:43.700 回答
1

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

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

也就是说，该index.html文件夹与 CSS 文件夹处于同一级别。如果要放入index.htmlHTML 文件夹，要链接到 CSS 文件夹，您必须先通过链接href="../css/stylesheet.css". 这".."将带你上一个层次。

于 2016-01-20T20:53:14.090 回答
1

只需尝试在 style.css 前面处理 /

于 2021-11-04T23:58:39.300 回答
0

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

于 2013-08-24T20:48:04.600 回答
0

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

于 2013-08-24T20:49:15.880 回答
0

试试这个：

<!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>
于 2013-08-24T20:57:02.970 回答
0

如果以上所有方法都不起作用：

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

于 2020-01-11T17:59:40.903 回答
0

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

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

于 2021-08-04T19:39:50.960 回答
0

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

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

于 2021-01-03T11:33:35.023 回答
0

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

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

于 2021-03-14T23:27:35.840 回答