Python Flask未读取CSS文件_Python_Html_Css_Flask

Python Flask未读取CSS文件

python html css flask

Python Flask未读取CSS文件,python,html,css,flask,Python,Html,Css,Flask,我已经搜索了一个打字错误，并尝试了一些我在这个网站上发现的修复方法，但我的风格仍然没有被应用。目录结构如下： ResumeSite ----/static --------/img ------------img1.jpg ------------img2.jpg --------style.css ----/templates --------index.html app.py /* CSS Variables */ :root { --primary: #ddd; --

我已经搜索了一个打字错误，并尝试了一些我在这个网站上发现的修复方法，但我的风格仍然没有被应用。目录结构如下：

ResumeSite
----/static
--------/img
------------img1.jpg
------------img2.jpg
--------style.css
----/templates
--------index.html
app.py

/* CSS Variables */

:root {
    --primary: #ddd;
    --dark: #333;
    --light: #fff;
    --shadow: 0 1px 5x rgba(104, 104, 104, 0.8);
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}

body {
    background: #ccc;
    margin: 30px 50px;
    line-height: 1.4;
}

.btn {
    background-color: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;

}

.showcase h1 {
    color: red;
}

CSS文件如下所示：

ResumeSite
----/static
--------/img
------------img1.jpg
------------img2.jpg
--------style.css
----/templates
--------index.html
app.py

/* CSS Variables */

:root {
    --primary: #ddd;
    --dark: #333;
    --light: #fff;
    --shadow: 0 1px 5x rgba(104, 104, 104, 0.8);
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}

body {
    background: #ccc;
    margin: 30px 50px;
    line-height: 1.4;
}

.btn {
    background-color: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;

}

.showcase h1 {
    color: red;
}

在index.html文件中，我使用Jinja语法正确链接了样式表：

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

我相信200意味着成功，但是无论我到目前为止尝试了什么，都没有应用任何风格

我无法从您发布的代码中分辨出来，但是如果您使用的是Boostrap，请确保您对

style.css

文件的引用是在对

bootstrap.css

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

否则，您的更改将被默认引导样式覆盖。问题只是CSS文件位于静态目录的顶层，而不在名为“CSS”的子文件夹中。感谢@Manish Mahendru提到这一点，我将来必须提醒自己烧瓶应用程序的正确结构。

您使用的是Windows系统吗？如果是这样的话，您可能已经将styles.css保存为styles.css.css而没有意识到。是的，我正在使用Windows和VSCode，我直接从编辑器目录创建了该文件，并且它的名称正确。当我运行服务器时，命令行没有声明任何错误，如果文件名称不正确，它将输出404错误，并显示类似style.css.css not found的内容创建一个目录结构为“static/css/style.css”。因为flask从“static/css”中查找内部的css文件。希望它能工作。您是否正在运行调试模式？您应该会在中看到一行，如

“GET/static/style.css HTTP/1.1”200-

console@PRMoureu是的，我处于调试模式，这是我在服务器运行或刷新时在终端中得到的一行。我以后可以尝试时，我将不得不尝试这一行。我从未想过这一点，因为我在整个html中使用字体Awesome CDN作为图标。这可以解释为什么没有错误，因为对我的样式的引用只是被覆盖了。我不知道我是如何订购引用的，因为我目前没有代码，但我会在稍后尝试此修复后编辑此代码。