为什么我的 CSS 样式表没有链接到我的 HTML 模板?



扩展layout.html模板的一个HTML模板有一个CSS文件链接到它,但是当我试图通过CSS文件样式HTML内容时,即使在重新加载后也没有发生任何事情。已经有一个CSS文件链接到layout.html文件,但它也不样式页面。

我如何使style.css文件样式的new.html文件(应该样式的页面)?或者我应该做一个新的CSS文件样式的new.html文件?

layout.html:

{% load static %}
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'encyclopedia/styles.css' %}" rel="stylesheet">
{% block style %}{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>

new.html:

{% extends "encyclopedia/layout.html" %}
{% load static %}
{% block title %}
New Entry
{% endblock %}
{% block style %}
<link href="{% static 'encyclopedia/new.css' %}" rel="stylesheet">
{% endblock %}
{% block body %}
<form action="">
<input type="text" name="title" class="title" placeholder="Title">
<textarea name="content" class="content" cols="30" rows="10" placeholder="Enter Content"></textarea>
<input type="submit" value="Save" class="save">
</form>
{% endblock %}

style.css:

/* styling for the layout page */
body {
margin: 0;
background-color: white;
}
code {
white-space: pre;
}
h1 {
margin-top: 0px;
padding-top: 20px;
}
textarea {
height: 90vh;
width: 80%;
}
.main {
padding: 10px;
}
.search {
width: 100%;
font-size: 15px;
line-height: 15px;
}
.sidebar {
background-color: #f0f0f0;
height: 100vh;
padding: 20px;
}
.sidebar h2 {
margin-top: 5px;
color: red;
}
/* attempt to style new.html */
.title {
border: 2px solid red;
}

new.css:

.title {
border: 2px solid red;
}
.content {
border: 2px solid blue;
}

有时css文件链接正确但无法更新,请尝试在href的末尾使用?{% now "U" %}更新您的css文件,如

<link href="{% static 'encyclopedia/new.css' %}?{% now "U" %}" rel="stylesheet">

我遇到了同样的问题,我使用了有效的更新方法

最新更新