Как использовать статические файлы CSS в Django?

Question

Кузьма

python , django

Как использовать статические файлы CSS в Django?

Я пытаюсь использовать статический файл style.css для изменения фона страницы на красный цвет, но фон по-прежнему остается прежним. Можете ли вы помочь мне разобраться, в чем может быть проблема? Вот что у меня имеется: 

**settings.py:** 
<pre><code class="python"># Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'

STATICFILES_DIRS = [os.path.join( BASE_DIR, "main/static")]

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'</code></pre> 

**base.html:** 
<pre><code class="html">{% load static %}
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

    &lt;title&gt;{% block title %}{% endblock %}&lt;/title&gt;

    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="{% static 'main/css/style.css' %}"&gt;
&lt;/head&gt;
&lt;body&gt;

    {% block content %}{% endblock %}

&lt;/body&gt;
&lt;/html&gt;</code></pre> 

**style.css:** 
<pre><code class="css">boby{
    background-color: red;
}</code></pre> 

**Иерархия файлов:**

4 февраля 2025 г. 10:24

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ваш код содержит небольшую ошибку в CSS, из-за которой стиль не применяется правильно. Давайте разберем, как правильно использовать статические файлы CSS в Django и выявим проблемы в вашем коде.

1. **Ошибки в CSS**:
Вы написали `boby` вместо `body`. Это простая опечатка, которая мешает применению стиля. Исправьте это следующим образом:

```css
body {
background-color: red;
}
```

2. **Убедитесь, что ваши статические файлы правильно загружаются**:
После исправления CSS убедитесь, что статический файл действительно загружается. Чтобы проверить это, откройте инспектор элементов (обычно F12) в вашем браузере и перейдите на вкладку "Сеть" (Network). Обновите страницу и посмотрите, появляется ли запрос к вашему CSS файлу. Если он не загружается, проверьте настройки Django.

3. **Правильная настройка STATICFILES_DIRS**:
Убедитесь, что путь к вашему статическому файлу указан правильно. В вашем случае он должен совпадать со структурой директорий вашего проекта. Например, если структура такова:

```
myproject/
manage.py
main/
static/
main/
css/
style.css
templates/
base.html
```

Ваша настройка `STATICFILES_DIRS` в `settings.py` выглядит правильно, так как она указывает на `main/static/`. Убедитесь, что у вас нет лишних ошибок в именах директории.

4. **Запуск в правильном режиме**:
Если вы используете Django в режиме разработки и у вас включен `DEBUG = True`, статические файлы должны загружаться автоматически. В противном случае вам потребуется использовать `collectstatic` и развернуть файл на сервере.

5. **Полный код после исправлений**:
Ваш обновленный CSS файл должен выглядеть так:

**style.css**:
```css
body {
background-color: red;
}
```

После исправлений проверьте, все ли работает. Если фон страницы продолжает оставаться прежним, убедитесь, что:

- У вас нет кэширования в браузере, которое может мешать загрузке новых стилей.
- Вы правильно используете файл `base.html` в других HTML шаблонах, которые создают содержимое страницы.

Если сделали все вышеперечисленное, но проблема не решена, дайте знать - мы попробуем разобраться дальше!

Answer 2

style.css:

boby{

    background-color: red;

}
 
 Точно боби, не добби? ;)