Question

我遇到链接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小时内搜索了很多，但找不到错误的位置。

Answer 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>

Answer 2

确保style.css位于您的根网址目录中，因为您可以从

中调用它

Answer 3

不要将/置于styles.css前面并确保它们位于同一文件夹中。

Answer 4

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

Answer 5

请改为尝试：

<!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>

Answer 6

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

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

也就是说，index.html文件夹与CSS文件夹位于同一级别。如果您想将index.html放在HTML文件夹中，要链接到CSS文件夹，首先必须通过链接href="../css/stylesheet.css"来退出。 ".."将提升您的水平。

Answer 7

如果其他建议不起作用，则可以尝试重新保存具有“ UTF-8”编码的HTML和CSS表格，并在<head>下以{{1 }}

Answer 8

如果以上所有方法均无效：

1-确保没有内联/内部CSS>从HTML页面删除所有样式代码（这将阻止外部CSS 链接）

Answer 9

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

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

Answer 10

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

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

Answer 11

我的话说，我遇到了同样的问题，并且快要结束这一切了。

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

html没有链接css

11 个答案: