CSS不适用于Flask

Question

我一直在使用flask尝试使css属性工作，但即使包含css文件，属性也不会反映在元素上。

cards.html

<!DOCTYPE html>
<html>
    <head>
        <script src="{{ url_for('static',filename = 'script/checkers.js')}}"></script>
        <script src="{{ url_for('static',filename = 'script/lib/jquery-1.11.0.js')}}">             
     </script>
           <link href="{{ url_for('static',filename = 'checkers.css')}}"/>
    </head>
    <body>
        <div id="board">

        </div>
        <div id="glow">

        </div>
    </body>

</html>

CSS就在那里，但它不起作用。 包含该文件但不显示属性。

CSS：checkers.css

 #board
 {
     height:300px;
     width:300px;
     background-color:black;
 }
 body
 {
     background-color:white;
 }
 div
 {
     background-color:black;
     height:300px;
     width:300px;
 }
 .glow
 {
     border:2px solid blue;
 }

Answer 1

这似乎与Flask无关。

HTML <link标记要求将rel属性设置为stylesheet 。 在你的情况下，浏览器将有一个<link元素它的DOM，但是（缺少rel="stylesheet" ）它将不知道如何处理它。

解决您的问题的方法是：

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='checkers.css')}}"/>

也就是说，你必须将checkers.css文件放在你的烧瓶项目的/static/文件夹中（即/static/checkers.css ）。

Answer 2

试试这个：
使用浏览器打开html页面，如果生成的css文件链接正确，请从源代码中检查。

CSS不适用于Flask

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-06-17 14:43:22

解决方案2
1 2014-06-17 14:20:31

CSS不适用于Flask

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-06-17 14:43:22

解决方案2 1 2014-06-17 14:20:31

解决方案1
3 已采纳 2014-06-17 14:43:22

解决方案2
1 2014-06-17 14:20:31