Question

第一次在Stack Overflow上。在过去几个月左右，我一直在自学网页设计。我刚开始另一个网站只是为了练习，但CSS似乎并不想加载。

我一直在使用Brackets练习，当我在Chrome中预览页面时，它只加载了默认样式。

到目前为止，这是我的代码：

＆＃13;

<!DOCTYPE html>

<html lan="en">

<head>
<title>Monster Mash | Home</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
    
<body>

<header>
    
    <h1>Monster Mash | Home</h1>
    <ul>
        <li>Home</li>
        <li>Classical</li>
        <li>Movies</li>
        <li>Mythological</li>
        <li>Contact Us</li>
    </ul>

</header>

<h2>Welcome</h2>    
<p>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
    
</body>
    
</html>

＆＃13;

我目前链接到该页面的唯一CSS是：

p {
    background-color: green;
}

这是一个名为＆＃34; styles.css＆＃34;

的单独文件

所以我不确定为什么造型没有加载。

Answer 1

也许您的css文件位于其他文件夹中，例如： [css文件夹] - ＆gt; [styles.css的] 如果是，则必须将路径更改为css / styles.css 我认为没有其他原因你的CSS没有加载

Answer 2

对我来说它运作正常。也许css文件不在正确的位置。根据你的代码，它应该与html文件在同一个文件夹中。如果它在某个其他目录中，请将其链接到正确的目录。

很抱歉，但它适用于IE，Chrome和Firefox。无法理解你的问题。如果您能提供更多信息，我们可以提供帮助。

可能只有一个命名错误。看看吧。

Answer 3

你的.html和你的.css都需要在同一个文件夹中才能工作。假设您的服务器是http://localhost，这是.html文件所在的位置，如果您转到http://localhost/styles.css，您应该会看到样式表的内容。

确保清除浏览器缓存以始终获取当前版本。

Answer 4

我尝试复制你的HTML＆amp; CSS。完全按照你所描述的一切。

结果证明CSS工作正常。

以下是一种快速查看styles.css是否正确关联的方法。打开HTML文件，右键单击并选择类似于查看页面源。在那里，点击styles.css。如果它工作正常，则样式表正确链接。

然后可能存在浏览器问题。尝试在其他浏览器中打开该文件。

Answer 5

如果样式表位于同一文件夹中（并且名称正确），那么您应该将其完全称为：

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

在文件名前加上 /

请注意：

这仅适用于您的网页在互联网而不是本地的情况，感谢IkoTikashi。

我会继续这样做，向您展示当文档在线时，引用它们而不使用前面的斜杠 - / - 将搜索同一目录，而使用斜杠将搜索网站的基本目录。

另请注意，您的<html lang='en'>元素缺少字母'g'，这可能会导致各种浏览器错误。

Answer 6

检查样式表是否与html文档位于同一位置，样式表的名称是否正确。

如果样式表位于另一个文件夹中，则路径必须相对于您尝试将其链接到的文档。

e.g。如果你有

的结构

 - index.html
 - style
      - styles.css

然后你需要使用：

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

Answer 7

好的，我想我已经解决了我的问题。

<!-- CSS -->

p {
    background-color: green;
}

我搞砸了我的CSS顶部的评论，我把它拿出来，现在它可以工作了。我想我的HTML和CSS评论的语法混淆了。感谢所有人的帮助:)）

CSS未在页面上加载

7 个答案:

请注意：