CSS 未应用于 HTML答案

【问题标题】：CSS not being applied to HTMLCSS 未应用于 HTML
【发布时间】：2014-05-18 19:19:06
【问题描述】：

我几乎已经设置了最简单的东西，但无论出于何种原因它都拒绝工作。 HTML 文档拒绝接受 CSS。如果您查看源代码并单击第 6 行的 href 属性，它会向我显示文件，因此我知道浏览器可以看到它。我快要疯了。

这是渲染的内容。

这是代码。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/master.css" />
</head>
<body>

<div id="wrapper">
    test
</div>

</body>
</html>

CSS

#wrapper {
    background: orange;
}

我认为可能是服务器问题所以这里是 apache 配置

<VirtualHost *:80>
    ServerName adtest.dev

    DocumentRoot /var/www/adtest.dev/
    <Directory /var/www/adtest.dev/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride all
        Order allow,deny
        Allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/adtest.dev/error.log

    LogLevel warn
    CustomLog ${APACHE_LOG_DIR}/adtest.dev/access.log combined
</VirtualHost>

这是ls -Rn的输出

/var/www/adtest.dev$ ls -Rn
.:
total 8
drwxr-xr-x 2 1000 1000 4096 May 18 19:06 css
-rw-r--r-- 1 1000 1000  204 May 18 19:06 index.html

./css:
total 4
-rw-r--r-- 1 1000 1000 33 May 18 19:06 master.css

我显然错过了一些超级简单的东西，对吧？

在tail -f /var/log/apache2/adtest.dev/access.log 运行时访问该站点。我只有 1 行。

[18/May/2014:19:28:43 +0000] "GET / HTTP/1.1" 200 503 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:26.0) Gecko/20100101 Firefox/26.0"

如果我直接进入css文件，我会得到

[18/May/2014:19:44:58 +0000] "GET /css/master.css HTTP/1.1" 200 314 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:26.0) Gecko/20100101 Firefox/26.0"

错误日志保持为空。

【问题讨论】：

只是我脑海中的一个建议-您是否尝试将href更改为css/master.css？
你确定你的css文件在你的根目录下，而不是web根目录下吗？看起来有人刚刚打败了我！
@AndersG：没有任何变化。 @user2356315：这就是我发布ls 的输出的原因。
你的服务器日志说什么？
另外，纯属猜测，但我刚刚检查了我的一台服务器上的DocumentRoot 指令，它没有尾随/，而你的却有。也许尝试删除它？

标签： html css apache2

【解决方案1】：

这个问题是由 AdBlock 引起的。在默认规则中，他们有/adtest.，它在我的测试域http://adtest.dev 上获取。

从 AdBlock 中删除该规则或将我的测试域重命名为“test.dev”可以解决问题。

【讨论】：

【解决方案2】：

您的 CSS 路径似乎有问题。我刚刚做了一个实验，将它们放在同一个目录中，并将路径更改为 master.css，它工作得非常好，所以 HTML 或 CSS 都没有问题。

使用您当前的路径/css/master.css，您的master.css 必须位于Web 根目录下一个名为css 的目录中。

您应该尝试指定相对路径并查看是否可以解决问题，然后尝试调试绝对路径。

例如，根据您显示的文件结构，并假设index.html 是相关的HTML 文件，只需将路径更改为css/master。即删除前导/。

【讨论】：

将 master.css 移回目录并编辑引用没有任何改变。
@castis，您是否删除了前导 /？
删除前导斜杠没有改变。但是，我仍然能够在浏览器中看到文件的内容。
虽然这并没有最终解决问题，但非常感谢您抽出宝贵时间帮助我解决问题。
@castis，不客气。这是一个很难重现的问题。 :)