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 回答