Почему стили css не применяются к html корректно в django?

В django работает только стилизация тела, я использую статические файлы для получения css. Я пробовал даже закомментировать css части тела, но он все равно работает, я не знаю как, я не знаю почему, пожалуйста, помогите! (Я использовал collectstatic, так что это не из-за этого). Я вставил static_root и url и другие вещи в set to, но это тоже не помогло.

body{
    max-width: 1080px;
    margin: auto;
    background: #8D7D77;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* ----------------------------------------------NAV-BAR-UPPER------------------------------------------ */

.nav-bar{
    display: flex;
    flex-direction: row;
    padding-top: 20px;
}

.nav-bar img{
    max-width: 150px;
    margin-left: 20px;
}

.nav-bar ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    
}

.nav-bar ul li{
    margin-right: 15px;
}

.nav-bar ul a{
    text-decoration: none;
    color: white;
    font-size: 20px;
    margin-left: 80px;
    padding: 10px 20px 10px 20px;
    border: solid 1px;
    border-radius: 10px;
}

.nav-bar ul a:hover{
    text-decoration: none;
    color: #8D7D77;
    background-color: white;
}

.search-bar{
    width: 600px;
    height: 40px;
    margin-top: 10px;
    margin-left: 50px;
    border-radius: 5px;
    border-width: 1px;
    border-color:  #C2B280;
    font-size: 110%;
}

.search-bar:focus{
    border-style:none;
}
{% load static %}
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" href="{% static 'styles/main.css' %}" />
  <link rel="icon" href="{% static 'images/logomogo.png' %}" />
  <title>BookShelf</title>

</head>
<body>
    {% include 'navbar.html' %}

    {% block content %}

    {% endblock content %}

</body>
</html>

And here's navbar

{% load static%}
<header>
  <div class="nav-bar">
    <a href="">
      <img src="{% static 'images/logo-white.png' %}" alt="BookShelf Logo" />
    </a>
    <input type="search" class="search-bar" placeholder="Search">
    <nav>
      <ul>
        <li><a href="">Login</a></li>
      </ul>
    </nav>
  </div>
</header>

  <div class="lower-nav-bar">
      <nav>
          <ul>
              <li><a href="main.html">Books</a></li>
              <li><a href="reviews-page.html">Reviews</a></li>
              <li><a href="">Users</a></li>
              <li><a href="">About</a></li>
          </ul>
      </nav>
  </div>

В firefox и, я думаю, в chrome нажатие F12 может показать консоль, тогда мы можем увидеть, все ли .css файлы загружены правильно и в чем проблема, если это не так. Также можно выбрать элементы и посмотреть, какие стили CSS применяются к ним и откуда они взялись. Django имеет особый способ управления статическими файлами, которые могут быть неправильно настроены, если теги в шаблоне работают, то проблема скорее всего в статических файлах.

Django, вероятно, выдаст сообщение об ошибке в консоли, если не сможет предоставить статический файл.

В любом случае, нам может понадобиться некоторый код из шаблона, чтобы увидеть, что происходит. При правильной настройке он может загружать статические файлы без проблем, но для этого есть свои шаги. (объяснено здесь https://docs.djangoproject.com/en/4.0/howto/static-files/

)

Очистка кэша помогла, спасибо - 0sVoid.

Вернуться на верх