Question

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

所以我去检查元素并查看sources选项卡，有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; 
}

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

编辑 - 我抛弃了我的固执并尝试了“静态”方法。这很好用。所以我想写出.css文件不同于提供静态的.css文件。似乎有一些HTML解释正在进行，但我仍然想在这里出现问题和原因。 - tidE

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

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")

但这一部分再次起作用。我可以GET /赋值，我可以GET /server.css。当我将CSS部分包含在html文件头部内的样式标记中时，一切正常。但这不是我想要做的。我想在几个html页面的一个文件中提供一些基本的CSS。

Answer 1

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

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

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

1 个答案: