Question

我有一个奇怪的，恼人的问题。我在根目录下有一个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时，它可以工作。可能是什么问题？

Answer 1

可能不作为text / css。你检查了服务器配置吗？

Answer 2

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

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

一旦你知道了这两个，你可以做数学计算以获得在link标签中使用的正确相对路径。

Answer 3

尝试使用Firefox和Firebug。看看错误控制台;也许这只是一个小错字。

Answer 4

这是jensgram建议的错误的内容类型标题，或者你给出的相对路径（css / ...）是错误的，因为页面本身位于不同的文件夹中。

安装Firebug并切换到“net”选项卡。它会显示文件是否由于错误的URL而无法加载。

Answer 5

尝试使用以下格式：
<link rel="stylesheet" href="/css/file_name_here.css" type="text/css" media="screen">
等。虽然它不应该，但它可能是引起它的参数的顺序。这是我使用的订单，它一直对我有用。 ~~我还注意到你有三个<!DOCTYPE>声明，这是否是这个necassery并且可能是它的原因？我已经研究过了found that only one is permitted ......~~

无论他们是否是原因，我希望你能尽快找到答案！

Answer 6

通常对于这类问题，我会这样做：

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

希望它有所帮助！

Answer 7

试试这个

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

或

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

Answer 8

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

Answer 9

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

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

您可以通过在url路径之前使用//粘贴css来轻松验证这一点。

例如

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

时不会加载

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

将被加载。

其他可能性是

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

Answer 10

一些建议......

根据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__)); ?>

你会看到你的绝对路径。

你是否能够使用你的css的url路径在jsfiddle外部测试网站上复制你的问题？

Answer 11

检查文件权限，您可能无权阅读css文件。为每个人提供读取权限。

Answer 12

enter image description here

请按照上面的屏幕截图创建文件夹结构。

我已经更新了所有文件及其正常工作。

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文件时，我们将得到以下输出。

enter image description here

Answer 13

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

Answer 14

通过删除媒体和类型属性来尝试它，它可以正常工作

Answer 15

如果您将整个网址用作路径，它是否有效？如果确实如此，那么您的路径就会出现问题。尝试通过添加/ href =＆＃34; /css/reset.css"

来使其绝对

Answer 16

在调试控制台中查看是否已加载资源。如果没有，如果您看到每个资源的错误：

ERR_BLOCKED_BY_CLIENT

只需停用AdBlock插件。

Answer 17

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

css文件路径是对的，css代码是有效的，但它不起作用

17 个答案: