为什么样式表不起作用？答案

【问题标题】：Why stylesheet doesn't work?为什么样式表不起作用？
【发布时间】：2014-01-29 17:50:32
【问题描述】：

我有一个简单的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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test title</title>
 <link href="style.css" rel="stylesheet" type="text/css" />

 </head>
 <body>
     <span class="test">Test</span>
 </body>
 </html>

style.css 如下：

.test{
 color:yellow;
}

我怀疑输出是黄色测试，但它是黑色的。

如果我使用此链接：

http://url/style.css

我可以看到 CSS 的内容，所以我相信客户端可以阅读它。

我在嵌入式系统上使用 thttpd 作为 Web 服务器。

IE 开发者显示的屏幕截图：

这表明html和css都是通过IE获取的。

【问题讨论】：

尝试使用href="/style.css"。使用 Web 控制台查找失败的 Web 请求
你能在 chrome 开发工具或类似工具中进行检查，看看它应用了哪些样式
使用chrome developer tools 或firebug for firefox 看看CSS 是否真的在加载，是否有错误。
您的代码有效。您确定您的 style.css 与您的 html 文件位于同一文件夹中吗？
@bwheeler96 做了但没有效果

标签： html css thttpd

【解决方案1】：

您说您在嵌入式系统上使用 thttpd。鉴于您的代码没问题，我预计您的样式会被 IE 忽略，因为您的 Web 服务器没有为它们提供正确的内容类型。

来自 MSDN 上的MIME types and stylesheets：

从 IE9 标准模式开始，样式表将被忽略（不应用），除非它们以“text/css”MIME 类型提供。

所以，我建议查看您的 thttpd 配置，看看您是否可以添加说明以将“text/css”MIME 类型应用于 .css 文件。

更新：我可以从您的屏幕截图中看到样式表是用“text/html”提供的，这几乎证实了我的诊断。 CSS 文件应作为“text/css”提供。

thttpd 的文档建议您只能在编译时更改它支持的 MIME 类型，因此要解决此问题，您需要重新编译。

我可以看到的 thttpd 的最新版本 2.25b 在其 mime_types.txt 中将 CSS 文件正确标记为 text/css，因此您可以获取最新版本并使用它。

或者，添加行

css text/css

复制到现有版本的 mime_types.txt，如果您是从源代码编译的，然后重新编译。 thttpd Makefile 使用该文本文件将每个文件扩展名的正确 MIME 类型编译到二进制文件中。（请注意，文件格式需要在文件扩展名和 MIME 类型之间使用制表符。）

（鉴于嵌入式系统通常不能很好地处理多个连接，您也可以将您的样式嵌入到 HTML 文档标题中的 <style> 元素中，这将 (a) 与您当前的设置一起使用，并且 (b) 保存第二次请求以获取单独的 CSS 文件。）

【讨论】：

html 已经有了它：... type="text/css" 我应该在其他地方添加它吗？
基本上，问题在于 thttpd 发回的标头。您的安装似乎正在为带有“text/html”标头的 css 文件提供服务，这将导致 IE 忽略它。最近版本的 thttpd 似乎支持将 .css 文件标记为“text/css”，这将起作用——我刚刚检查了最新版本的源代码，在“mime_types.txt”中它列出了 CSS 文件并说它会将它们作为“文本/css”提供。
另外：this looks like a decent introduction to HTTP headers，如果您以前没有太多经验的话。
谢谢。你知道如何将新的 mime 类型添加到 thttpd 吗？如果我知道如何向其中添加新的 mime 类型，我可以编译它。
它的最新版本似乎内置支持将 .css 文件作为 text/css 提供。当然，我刚刚从他们的homepage 中获取了 2.25b，它在mime_types.txt 中列出。你现在用的是什么版本？

【解决方案2】：

您的 HTML 页面或 css 没有任何问题，所以我认为您的浏览器要么无法获取 css（可能是 URL 错误？），要么它正在使用 css 的缓存版本。（如果使用 IE 则尝试 CTRL+f5）

如果这没有帮助，那么根据您使用的浏览器，我建议您打开开发者工具并跟踪返回的网络调用和状态代码。例如，对于 Internet Explorer，按 F12，切换到网络选项卡并启用“开始捕获”。要更详细地了解幕后发生的事情，Fiddler 是一个很棒的工具。

【讨论】：

请看屏幕截图
啊，现在我们可以看到您的 css 具有 text/html 的 MIME 类型。见上面马特的回答。
你怎么看？从哪里来？