在jinja2模板上使用css样式表

I am making a website using html, css, flask and jinja2.

我正在使用html，css，flask和jinja2创建一个网站。

I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.

我有一个页面工作烧瓶服务器，按钮和标签等显示，但我没有加载我的CSS样式表。

How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.

如何将样式表链接到jinja2模板。我在互联网上环顾四周，但无法找到方法。

Here is the css stylesheet link; should I change this, or the python code?

这是css样式表链接;我应该改变这个，还是python代码？

<link rel="stylesheet" type="text/css" href="styles.css">

here is my flask code:

这是我的烧瓶代码：

@app.route('/')
def resultstemplate():
    return render_template('questions.html', head='Welcome!')

here are the locations of the files:

这是文件的位置：

/python-code.py /templates/template.html /templates/styles.css

/python-code.py /templates/template.html /templates/styles.css

3 个解决方案

#1

All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.

应将所有公共文件（未处理的文件，如模板或python文件）放入专用的静态文件夹中。默认情况下，Jinja2有一个名为static的静态文件夹。

This should fix your problem:

这应该可以解决您的问题：

Move /templates/styles.css to /static/styles.css

将/templates/styles.css移动到/static/styles.css
Update your code with following code, that will be translated into correct file location:

使用以下代码更新您的代码，该代码将被转换为正确的文件位置：
```
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
```

More info on static files in Jinja2 is here.

有关Jinja2中静态文件的更多信息，请点击此处。

#2

<link rel="stylesheet" type="text/css" href="styles.css">

href value must be within quotes.

href值必须在引号内。

make sure the file name and path are proper OR try the below

确保文件名和路径正确或尝试以下

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

#3

The order of handler might cause the problems:

处理程序的顺序可能会导致问题：

url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application

will work instead of

会工作而不是

url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets

#1