CSS在Flask中无法使用

3 投票

2 回答

3453 浏览

提问于 2025-04-18 10:05

我一直在使用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;
 }

2 个回答

试试这个：
用浏览器打开这个html页面，然后查看源代码，看看生成的css文件链接是否正确。

回答于 2025-04-18 由 Python大师

分享举报

这看起来跟Flask没什么关系。

一个HTML的<link标签需要设置rel属性为stylesheet。在你的情况下，浏览器会在它的DOM中有一个<link元素，但因为缺少rel="stylesheet"，浏览器就不知道该怎么处理它。

解决你这个问题的方法是：

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

也就是说，你需要把checkers.css文件放在你的Flask项目的/static/文件夹里（也就是/static/checkers.css）。

回答于 2025-04-18 由 Python大师

分享举报

CSS在Flask中无法使用

2 个回答

撰写回答