css 文件显示在 chrome 资源中，但仅在我编辑后才有效答案

【问题标题】：css file shows up in chrome resources but only works after I edit itcss 文件显示在 chrome 资源中，但仅在我编辑后才有效
【发布时间】：2013-12-29 12:56:10
【问题描述】：

我想使用外部 .CSS 文件。当我在 chrome 中加载页面时，我只看到 Html 部分。 CSS 部分似乎被忽略了。

所以我去检查元素并查看源选项卡，那里有 2 个文件。当我打开 html 和 CSS 文件时，它看起来不错。但页面仍未按应有的方式呈现。

只有在 CSS 文件中编辑某些内容时，页面才会重新渲染，一切看起来都很好。

当我将 html 和 css 文件一起保存在本地文件夹中并在浏览器中打开 html 时，一切看起来也很好。

这是html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>server</title>
<link href="server.css" rel="Stylesheet" type="text/css">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a href="/assignment" class="navbar">Assignment</a></li>
<li class="navbar"><a href="/solution" class="navbar">Solution</a></li>
<li class="navbar"><a href="/logout" class="navbar">Logout</a></li>
</ul>
<H1>server</H1>
</body>
</html>

这是 server.css 文件：

body {background-color: #efefef;}
ul.navbar { 
    margin: 0; 
    padding: 5px; 
    list-style-type: none; 
    text-align: center; 
    background-color: #000; 
} 
ul.navbar li.navbar {  
    display: inline; 
} 
ul.navbar li.navbar a.navbar { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #000; 
} 
ul.navbar li.navbar a:hover { 
    color: #000; 
    background-color: #fff; 
}

我尝试搜索 tornado CSS 外部文件并找到有关使用静态目录的提示，但是虽然这两个文件在元素检查中都显示为源，但我认为 tornado 脚本没有任何问题。

编辑——我抛开我的固执，尝试了“静态”的方法。这工作正常。所以我猜想写出一个 .css 文件与传递一个静态 .css 文件是不同的。似乎有一些 HTML 解释正在进行，但我仍然想在这里出现什么问题以及为什么。 -- 潮

这些是我使用的处理程序：

class CSSHandler(BaseHandler):
    @tornado.web.authenticated
    def get(self):
        self.write(file("html/server.css").read())

class MainHandler(BaseHandler):
    @tornado.web.authenticated
    def get(self):
        self.render('html/assignment.html', title="server")

但这部分同样有效。我可以获取 /assignment，也可以获取 /server.css。当我将 css 部分包含在 html 文件标题内的样式标记中时，一切正常。但这不是我想做的。我想在一个文件中为几个 html 页面提供一些基本的 css 内容。

【问题讨论】：

标签： html css tornado

【解决方案1】：

您需要为所有非 html 页面设置适当的内容类型标题。 self.set_header('Content-Type', 'text/css')。

还可以考虑使用StaticFileHandler（只需将static_path 关键字参数设置为Application 构造函数），而不是自己提供静态js/css 文件。它将为您处理内容类型和其他标头并提高可缓存性。

【讨论】：