css文件路径正确，css代码有效，但是不起作用答案

【问题标题】：css file path is right, css code is valid, but it doesn't workcss文件路径正确，css代码有效，但是不起作用
【发布时间】：2010-12-21 01:35:36
【问题描述】：

我有一个奇怪而烦人的问题。我有一个css/ 文件夹和index.html 在根目录。我在标题中加载css文件如下：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>blabla</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="keywords" />
    <meta name="description" content="desc" />

    <!-- style files -->
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
</head>

但css 不起作用：我看到一个普通的index.html。我确定 css 路径是正确的；当我单击“查看源代码”并复制/粘贴 css 文件路径时，它会显示 css 文件。

另外，当我将 css 直接复制到 index.html 时，它可以工作。可能是什么问题？

【问题讨论】：

你试过了吗：“/css/reset.css”
CSS 中是否有错误？我猜一个额外的{ 会导致文件的整个/其余部分无法加载。

标签： html css include stylesheet

【解决方案1】：

可能不用作文本/css。你检查你的服务器配置了吗？

【讨论】：

【解决方案2】：

相对 URL 可能有误。为了进一步帮助您，我们需要了解两件事：

打开 HTML 页面时使用的完整（绝对）URL 是什么？检查浏览器地址栏。
可以在浏览器中单独打开 CSS 文件的完整（绝对）URL 是什么？

一旦你知道了两者，你就可以计算出正确的相对路径以用于link标签。

【讨论】：

【解决方案3】：

试试 Firefox 和 Firebug。查看错误控制台；也许这只是一个小错字。

【讨论】：

嗯，对于 css 文件，它显示“304 未修改”。在 Firebug Net 选项卡上
304 表示浏览器已经在缓存中有 CSS 并且认为它是最新的。尝试清除浏览器缓存。

【解决方案4】：

这可能是 jensgram 建议的错误内容类型标题，或者您提供的相对路径 (css/...) 错误，因为页面本身位于不同的文件夹中。

安装 Firebug 并切换到“net”选项卡。如果文件由于 URL 错误而无法加载，它会显示给您。

【讨论】：

嗯，对于 css 文件，它显示“304 未修改”。在 Firebug Net 选项卡上
嗯。这意味着他们肯定会加载。然后转到 Firefox 错误控制台并让它显示所有消息。如果 CSS 文件的 content-type 标头是错误的（通常是 text/html 而不是 text/css），它会在那里显示。（这可能也可以在萤火虫的某个地方完成，但我不知道在哪里。）

【解决方案5】：

通常这种问题，我会这样做：

在css文件中添加body {border:10px solid red !important;}之类的样式并刷新html文件。
检查路径和文件名是否有错别字，再次检查，必要时使用复制/粘贴名称。
使用版本，例如 ... href="css/reset.css?001" ...
检查服务器上的文件夹和文件权限。
尝试在其他浏览器或“私人模式”上加载它。

希望对你有帮助！

【讨论】：

【解决方案6】：

尝试使用 Firebug/Chrome Web Inspector 并查看文件是否加载。可能是 Web 用户对 CSS 文件没有访问权限，在这种情况下，您应该看到文件无法加载并且它们返回 401 HTTP 状态。在这种情况下，请尝试设置正确的权限（如果是 Unix 服务器，则通过 CHMOD，0644 就足够了）。

【讨论】：

谢谢！当我查看调试控制台时：未加载资源。我看到每个资源的这个错误：ERR_BLOCKED_BY_CLIENT。然后我只需禁用 AdBlock 插件，它就可以正常工作。
如果我不得不猜测，我会说这可能与您的 CSS 文件中引用的某些类/ID 名称有关。如果有时间，请尝试删除所有样式定义并一一添加，以便查看导致 AdBlock 阻止文件的原因。

【解决方案7】：

尝试使用以下格式：
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
等。虽然不应该，但可能是导致它的参数顺序。这是我使用的顺序，它一直对我有用。我还注意到您有三个<!DOCTYPE> 声明，这是必需的吗？这可能是造成这种情况的原因吗？我研究过
found that only one is permitted...

不管是不是原因，希望你早日找到解决办法！

【讨论】：

【解决方案8】：

试试这个

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

或

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

【讨论】：

如果我理解正确，这是 OP 确定是否应用了他的样式表的技巧。那么请这样说。如果这是你的意图，这不是一个答案，只是一个评论。

【解决方案9】：

尝试删除媒体属性。我不知道这是否会影响它，但值得一试。

【讨论】：

【解决方案10】：

如果加载了资源，请查看调试控制台。如果没有，并且您在每个资源中看到此错误：

ERR_BLOCKED_BY_CLIENT

只需禁用 AdBlock 插件。

【讨论】：

【解决方案11】：

如果您使用整个 URL 作为路径，它是否有效？如果是这样，则说明您的路径有问题。尝试通过添加 / href="/css/reset.css" 来使其绝对化

【讨论】：

【解决方案12】：

通过删除媒体和类型属性尝试它，它会工作

【讨论】：

【解决方案13】：

尝试直接访问 css 文件。如果您的网址是http://www.xxxx/com，请尝试http://www.xxxx/com/css/xxxxx.css。检查您是否能够打开css。如果不是，您的路径有问题

【讨论】：

【解决方案14】：

请按照以上截图创建文件夹结构。

我已经更新了所有文件，并且现在可以正常工作了。

index.html
-----------------

    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>blabla</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="keywords" content="keywords" />
        <meta name="description" content="desc" />

        <!-- style files -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="css/global.css" media="screen" />
    </head>
    <body>
    <div id="reset">
        Reset Div
    </div>

    <div id="layout">
        Layout Div
    </div>

    <div id="global">
        global Div

    </div>

    </body>
    </html>

----------
reset.css
----------
#reset{
color:green;
}

----------
global.css
----------

#global{
    color:red;
}

-----------
layout.css
------------

#layout{
color:blue;
}

当我们运行 index.html 文件时，我们会得到下面的输出。

【讨论】：

【解决方案15】：

检查文件权限，您可能没有读取css文件的权限。向所有人授予读取权限。

【讨论】：

【解决方案16】：

一些建议...

根据W3：

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

所以我建议使用/css/reset.css 作为路径。
<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen" />

如果这不起作用，我会尝试添加您网站的整个地址。

http://www.yourweb.com/css/reset.css 有没有向您展示什么？

如果您可以使用 PHP，我建议将此代码添加到您的索引文件中，如下所示：

<?php echo realpath(dirname(__FILE__)); ?>

你会看到你的绝对路径。

您是否还能够在外部测试站点（如 jsfiddle）上使用指向您的 css 的 url 路径复制您的问题？

【讨论】：

【解决方案17】：

此解决方案仅在您尝试在 Web 上部署时才有帮助，而不是在当地环境中，但由于这里缺乏细节，我想指定。

我记得有同样的问题，我修复了它在文件路径之前添加//，因为浏览器需要知道它是从网络加载的。

您可以通过在css 路径之前粘贴带有和不带有// 的url 来轻松验证这一点。

例如

xxx.xxx.xxx.xxx/path/to/css.css

不会被加载

//xxx.xxx.xxx.xxx/path/to/css.css

将被加载。

其他可能性是

权限不正确
错误的路径，也许你错过了什么？尝试在开头使用斜线或绝对路径。

【讨论】：