如何在扩展页面中使用style.css?

时间:2017-08-08 13:31:24

标签: html css flask jinja2

我的应用中存在样式问题。我已将style.css文件放入静态文件夹,但放入代码时:

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

我的主页(body2.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

HERE IS BOOTSTRAP CDN

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

<header>
HERE IS MY NAVBAR CODE
</header>

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

<body>
{% block content %}
HERE IS MY PAGE WHICH I EXTEND
{% endblock %}
</body>

</html>

我想要扩展的页面

    {% extends "body2.html" %}
    {% import "bootstrap/wtf.html" as wtf %}
    {% block content %}


HERE IS LOTS OF CODE :)    

    {% endblock %}

问题是我没有看到我的背景

的style.css

    body, html {
    height: 200%;
    background-repeat: no-repeat;
      background: -webkit-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */

}

1 个答案:

答案 0 :(得分:1)

您正在链接外部样式表,不应将该链接放在样式标记中。 另外一个好的做法是在头部加载外部文件,因此在加载页面之前已知元素的样式。