В моем проекте я пытаюсь связать мой HTML-шаблон с файлом CSS, который находится в моей статической папке. Я добавил STATIC_ROOT , STATIC_URL и STATICFILES_DIRS в мои settings.py.
В моей статической папке, яу меня есть папка с именем styles , и внутри нее у меня есть файл с именем signup.css . Я также запустил python manage.py collectstatic .
В моем шаблоне я пытаюсь сослаться на этот файл CSS, чтобы изменить цвет моего h1 , однако никаких изменений не происходит.
Шаблон :
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'styles/signup.css' %}">
</head>
<h1>YO</h1>
<div id="signupformdiv">
<form class="signupform" action="{% url 'signup' %}">
</form>
</div>
signup.css:
h1 {
color: red;
}
Цвет моего h1 остается черным,Кто-нибудь знает проблему? Спасибо.
Исходный код :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Instagram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="/static/custom.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/static/favicon.ico" />
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal"><a class="text-dark">Instagram</a></h5>
<nav class="my-2 my-md-0 mr-md-3">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<head>
<link rel="stylesheet" href="/static/styles/signup.css">
</head>
<h1>YO</h1>
<div id="signupformdiv">
<form class="signupform" action="/users/signup/">
</form>
</div>
</body>
</html>
ОШИБКА в браузере: Не удалось загрузить ресурс: сервер ответил со статусом 404 (Не найдено)
settings.py :
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'instagram/static/')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Структура проекта: instagram-project - это root, подпапка называется instagram и внутриУ меня есть папка с именем «static»
Внутри корневого каталога, у меня есть статическая папка, куда отправляются все статические файлы.
Внутри приложения пользователя, у меня есть папка с шаблонами, гдемой шаблон хранится
** BASE.HTML **
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Instagram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="{% static 'styles/signup.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
</head>