Question

我完全不知道为什么这不起作用。由于某些原因，HTML文件似乎无法加载CSS，即使两者都在同一目录中。知道可能是什么问题吗？

的index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>

style.css

body{
    background-color: #F9F9F9;
    background-image: url(images/bg3.png);
    background-position: center top;
    background-repeat: repeat;
    text-shadow: #FFFFFF 0px 1px 0px;
    font-family: "Georgia", "Times", serif;
    -webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

#main{
    margin: 50px auto 50px auto;
    width: 1000px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

以上不起作用。在index.html中添加内联css可以正常工作

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
    body {
        background-color: #F9F9F9;
        background-image: url(images/bg3.png);
        background-position: center top;
        background-repeat: repeat;
        text-shadow: #FFFFFF 0px 1px 0px;
        font-family: "Georgia", "Times", serif;
        -webkit-font-smoothing: antialiased;
    }
    a {
        text-decoration: none;
    }
    #main {
        margin: 50px auto 50px auto;
        width: 1000px;
        min-height: 500px;
        padding: 0px 20px 0px 20px;
    }
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
    <div id="main"> Hello </div>
</body>
</html>

Answer 1

添加

type="text/css"

到你的链接标签

虽然在现代浏览器中可能不再需要这种功能，但HTML4 specification将此声明为必需属性。

type = content-type [CI]

此属性指定元素的样式表语言   内容并覆盖默认样式表语言。风格   工作表语言被指定为内容类型（例如，＆＃34; text / css＆＃34;）。   作者必须为此属性提供值;没有默认值   此属性的值。

Answer 2

检查同一目录中的两个文件然后尝试这个

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

Answer 3

您必须添加type="text/css"，您还可以指定href="./style.css"指定当前目录的.

Answer 4

根据你的说法，你们两个文件都在同一个目录中。 1. index.html和2. style.css

我已经复制了你的代码并在我的本地机器上运行它工作正常没有问题。

根据我的说法，您的浏览器没有刷新文件，因此您可以通过在Windows中为CTR CM + + R按CTRL + F5来刷新/重新加载整个页面。

如果仍然遇到问题请尝试使用，然后您可以使用Firefox的firebug工具对其进行测试。

对于IE8和谷歌浏览器，你可以按F12查看它，你的开发者工具会弹出，你可以看到Html和CSS。

仍有任何问题请发表评论，以便我们为您提供帮助。

Answer 5

我一直在努力解决同样的问题（Ubuntu 16.04，Bluefish编辑器，FireFox，Google Chrome。

解决方案：清除Chrome浏览器中的浏览数据＆＃34;设置＆gt;高级设置＆gt;清除浏览数据＆＃34;，在Firefox中，＆＃34;打开菜单图像右上角的工具栏＆＃39;偏好设置＆＃39; ＆GT;高级＆＃34;，在菜单中查找此图片：缓存的Web内容单击按钮＆＃34;立即清除＆＃34;。浏览器缓存.css文件，如果没有更改，通常不会重新加载它。因此，当您更改.css文件时，请清除此Web缓存，除非您的.css文件中存在问题，否则它应该可以正常工作。和平，斯坦

Answer 6

你可以试试这个：

<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>

确保浏览器实际发出请求并且不返回404.

Answer 7

使用HTML5，您只需要rel，甚至不是type。

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

Answer 8

您的css文件应定义为UTF-8。把它放在你的css文件的第一行。

@charset "UTF-8";

Answer 9

＆＃13;

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

＆＃13;

Answer 10

不确定这是否有价值，但我将其留给他人使用。确保将“匿名身份验证”设置为“已启用”，才能正确加载我的CSS文件。

要在Visual Studio 2019中做到这一点：

选择解决方案的名称，右键单击并单击“属性”
导航到“属性”框架，通常在右下角
确保如下所示将“匿名身份验证”设置为“已启用”

Answer 11

我也有完全相同的问题。我的CSS链接一切正常。 为什么html没有加载CSS文件是由于它的位置（在我的情况下）。

我将我的自定义CSS定义在错误的位置，这就是网页无法访问它的原因。然后我开始测试并将CSS链接放到不同的地方，瞧它对我有用。

我曾在某处读过我们应该在 custom CSS 之后放置 Bootstrap CSS ，所以我做了但是后来却没有加载它。所以我改变了立场并且有效。

希望这有帮助。

谢谢！

Answer 12

我发现自己在这里寻找答案，并发现我的问题是缺少字符-拼写很重要。

<link href="tss_layout.css" rel=styleheet" />

一旦我将s放在样式表的中间-就像一个魅力。

Answer 13

我有同样的问题，我总是将“ style.css”更改为“ styles.css”或任何其他名称对我来说很好。

Answer 14

我有类似的问题。我的代码工作正常，但突然CSS表单停止工作..经过一番检测，我发现样式表的MIME从type="text/css"更改为“ text-css”。自从几个小时前代码开始工作以来，我就知道如何更改它们，但是我更改了它，并且效果很好。希望这会有所帮助。

Answer 15

在深入研究这个问题之后，对我来说，约翰内斯在另一个线程上解决了该问题：Local CSS file is not loading from HTML

您的type标记中的link属性带有印刷报价字符：type=“text/css”。尝试将这些更改为“普通”引号像type="text/css"

Answer 16

这是另一个原因，需要添加到此页面上的集合中。在这段代码中...

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

...我拼写错误rel 为ref。

Answer 17

我遇到了类似的问题，但是解决了将Style.css更改为style.css的问题。由于此名称的大写字母“ S”更改，它引发了404错误，我们不会注意到我的系统在进行小改动，但是它在起作用托管在云中，它会引发此错误，请确保将所有内容都上传到云中后

Answer 18

这可能是“特殊”情况，但对这段代码很不满意：

ForceType应用程序/ x-httpd-php SetHandler应用程序/ x-httpd-php

当发生类似问题时，作为无扩展文件处理的快速测试。

此后，某些但不是全部php文件将css文件视为php，因此成功加载了css但未将其作为css处理，因此在检查f12样式编辑器时执行了零规则。

也许其他任何人都可能发生类似的事情，而这个花絮可能会有所帮助。

Answer 19

还要确保您的link标记的media属性具有有效值，以我为例，我使用的是 WordPress CMS ，并传递了布尔值true在媒体领域显示出来就是这样。

<link rel="stylesheet" href="./style.css" media="1">

这就是为什么它给出错误。 CSS样式加载所依赖的三个主要属性。

请确保您的link标签的关系rel属性的值对于css文件（即stylesheet）必须有效。
确保您的link标签的目标href属性值必须指向有效的现有级联样式表文件。就像您的情况一样，是./style.css。

请记住，您可以在href属性的值中同时使用绝对路径和相对路径。这意味着，如果您的文件style.css位于根目录下，即/，那么您也可以在/style.css属性的值中使用href，否则文件也存在于同一目录中HTML文件所在的目录，则可以使用./style.css作为link标签的href属性值中的值。
请确保您的link标签的media属性应为以下属性之一。
1. 对于每种设备，您都可以使用all关键字作为media属性的值。
2. 仅对于PC和笔记本电脑，您可以使用screen作为media属性的值。
3. 对于网页打印，您可以使用print关键字作为media属性的值。请注意，当您按下打印屏幕按钮以捕获屏幕图像时，此方法也适用。
4. 最后，对于屏幕阅读器，您可以使用speech关键字作为“媒体属性”的值。

通过遵循以下规则，您的link标签的HTML结构将成为。

Answer 20

我遇到了类似的问题，并尝试了不同的解决方法。

最后，我了解到我的index.htm文件已使用“Unicode”编码保存（用于在我的页面中使用Farsi字符），而我的.css文件已使用“ANSI保存“格式。

我用记事本将.css文件的编码更改为“Unicode”，问题解决了。

Answer 21

我一直面临同样的问题，

对于Chrome和Firefox，但一切都在互联网资源管理器中运行。我发现制作CSS文件UTF-8使它适用于chrome。

Answer 22

我今天遇到了这个问题，并且作为解决方法（不是最好的）我在下面做了

<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

其中testWeb是我的htdoc目录中的根应用程序文件夹。在windows（使用xampp）或/ var / www / html目录中由于某些原因我还不知道

<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

不在同一目录下的scripts文件夹旁边的html索引文件中加载。

Answer 23

使用以下步骤加载.CSS文件非常简单。

<link rel="stylesheet" href="path_here.css">

注意：1 - ＆gt;不要忘记在rel属性中写“stylesheet”。 2 - ＆GT;使用正确的路径，例如：D：\ folder1 \ forlder2 \ folder3 \ file.css“

现在你所在的目录，你可以加载.css文件你提到的路径。

问候！穆罕默德·马吉德。

Answer 24

HTML 没有加载我的 css，因为我已将 style.css 放在模板文件夹中，而它应该放在 static 文件夹中。将我的文件替换为静态文件夹后，它对我有用

Answer 25

最好的方法是在Mac上按 ctrl + F5 来刷新整个网站，它是 CMD + R

Answer 26

添加type =“text / css” 它对我有用。

HTML没有加载CSS文件

26 个答案: