HTML未加载CSS文件_Css_Html_Stylesheet

HTML未加载CSS文件

css html

HTML未加载CSS文件,css,html,stylesheet,Css,Html,Stylesheet,我完全不明白为什么这不起作用。由于某种原因，HTML文件似乎无法加载CSS，即使两者位于同一目录中。知道有什么问题吗 index.html <!DOCTYPE html> <html> <head> <title>Home Page</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta name="viewport" conten

我完全不明白为什么这不起作用。由于某种原因，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>

上述方法不起作用。不过，在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>


主页
身体{
背景色：#F9F9F9；
背景图片：url（images/bg3.png）；
背景位置：中上；
背景重复：重复；
文本阴影：#FFFFFF 0px 1px 0px；
字体系列：“佐治亚”、“泰晤士报”，衬线；
-webkit字体平滑：抗锯齿；
}
a{
文字装饰：无；
}
#主要{
保证金：50px自动50px自动；
宽度：1000px；
最小高度：500px；
填充：0px 20px 0px 20px；
}
你好

添加

到你的链接标签

虽然这在现代浏览器中可能不再是必需的，但声明这是必需的属性

类型=内容类型[CI]

此属性指定元素的样式表语言内容和替代默认样式表语言。风格工作表语言被指定为内容类型（例如，“文本/css”）。 作者必须为此属性提供一个值；没有默认值此属性的值。

你可以试试这个：

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

确保浏览器确实发出了请求，并且没有返回404

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

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

正如您所说，您的两个文件位于同一目录中。1.index.html和2。style.css

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

据我所知，您的浏览器没有刷新文件，因此您可以在windows for mac CMD+R中按CTRL+F5刷新/重新加载整个页面

如果仍然遇到问题，请尝试使用firefox工具进行测试

对于IE8和Google Chrome，您可以按F12键进行检查，您的开发工具将弹出，您可以看到Html和css

您仍然有任何问题，请发表意见，以便我们可以帮助您。

您必须添加

type=“text/css”

您还可以指定

href=“./style.css”

，其中

指定当前目录使用以下步骤加载.css文件非常简单

注意：1-->不要忘记在rel属性中写入“样式表”。 2-->使用正确的路径，例如：D:\folder1\forlder2\folder3\file.css”

现在，无论您在哪个目录中，都可以按照您提到的路径加载.css文件

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

添加type=“text/css”

这对我来说很有效。

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

解决方案：在Chrome“设置>高级设置>清除浏览数据”中清除浏览数据，在Firefox中，“打开菜单图像右上角工具栏'首选项'>Advanced'，在菜单中查找此图像：缓存的Web内容单击“立即清除”按钮。浏览器缓存.css文件，如果没有更改，通常不会重新加载。因此，当您更改.css文件时，请清除此web缓存，除非.css文件中存在问题，否则它应该可以工作。和平，

Stan

使用HTML5，您所需要的只是

rel

，而不是

类型
我今天面对了这个问题，我在下面做了一些变通（不是最好的）
<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

在同一目录下脚本文件夹旁边的html索引文件未加载。
我也遇到了同样的问题
对于Chrome和Firefox，但在InternetExplorer中，一切都正常工作。我发现，制作CSS文件UTF-8可以让Chrome正常工作。
我遇到了类似的问题，并测试了不同的解决方法
最终我明白了我的index.htm文件是用Unicode“编码保存的（用于在我的页面中使用波斯语字符），而我的.css文件是用ANSI“格式保存的
我用记事本将.css文件的编码改为“Unicode”，问题就解决了。
我也有同样的问题。我的css
链接一切正常。html为什么不加载css
文件是因为它的位置（如我的情况）。
我在错误的位置定义了我的自定义CSS
，这就是网页无法访问它的原因。然后我开始测试并将CSS链接放置到不同的位置，瞧，它对我起了作用
我在某个地方读到，我们应该将自定义CSS放在引导CSS之后，所以我这样做了，但它没有加载它。所以我改变了位置，它工作了
希望这有帮助
谢谢！
还要确保您的链接
标记的媒体
属性有一个有效值，在我的例子中，我使用了WordPress CMS，并在媒体字段中传递了布尔值true
，因此它显示为那样
<link rel="stylesheet" href="./style.css" media="1">



这就是为什么它会出错。
css样式加载依赖于三个主要属性
确保链接
标记的关系

rel属性的值必须对css文件有效，即

样式表

。

确保您的

链接

标记的目标

href

属性的值必须指向现有级联样式表文件的有效值。就像您的情况一样，它是

/style.css

请记住，您可以在

href

属性的值中使用绝对路径和相对路径。这意味着，如果文件

style.css

位于根目录，即

，则您也可以在

href

属性的值中使用

/css

，或者如果文件位于同一目录中，则可以使用

/style.css

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

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

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

@charset "UTF-8";

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

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