HTML-документы не обновляются из CSS

Я использую файл CSS для обновления HTML в приложении Django, но несмотря на то, что моя таблица "style.css" связана с файлом HTML, обновления не происходят.

"style.css" находится в той же папке, что и мой HTML документ ("index.html"), но ничего не меняется.

Я вставил свой код ниже:

<head>
    <link type="text/css" rel="stylesheet" href="style.css" media="screen"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

Я знаю, что CSS и HTML файлы связаны, потому что когда я навожу курсор на "style.css" href, я могу нажать CTRL + click, и "styles.css" откроется в новом окне.

Я прошел четыре или пять руководств по несколько раз каждое, я скопировал все, что они сделали, но мой все еще не работает. Я закрыл и перезапустил приложение, я заново запустил локальный сервер, и я крайне озадачен тем, как я могу точно следовать руководству и все равно не заставить это работать.

Я попробовал переместить "style.css" в свою собственную папку ("styles"), а затем изменил href на href="styles/style.css", но он все еще не работает. Ничего из того, что я сделал, не работает, и ни один учебник даже отдаленно не помог.

Любая помощь или понимание будут очень признательны, так как даже здесь, находя людей с такой же проблемой, я не могу решить эту проблему вообще.

Я использую VSCode и Windows 11.

вам нужна секция шаблона config в настройках django

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATIC_URL = '/static/'

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

внимательно отнеситесь к созданию директорий static и templates в корне проекта или в любом другом месте. В статическом каталоге вы должны разместить ваши js и css файлы, также вы можете создать каталог внутри статического каталога под названием "js" для js файлов и создать каталог "css" внутри статического каталога для css файлов. Теперь отобразите ваш html-файл в режиме просмотра, как показано ниже

from django.shortcuts import render
  
def index_view(request):
    return render(request, "index.html")

теперь в файлах шаблона вы можете загружать статические файлы

<!DOCTYPE html>
<head>
  {% load static %}
  <script src="{% static 'app.js' %}"></script>   
  <title>Site</title>
</head>
<body>
<img src="{% static 'img.png' %}" alt="Mon image" />
  {% block content %}{% endblock %}
</body>
</html>

в вашем html-файле вы должны добавить:


{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 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 type="text/css" rel="stylesheet" media="screen" href="{% static 'styles/style.css' %}"/>
    <title>Document</title>
</head>

вам следует добавить в файл setting.py:

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

также вы должны объявить структуру папок следующим образом:
в вашем корневом проекте (где объявлен manage.py), папка static и в вашей папке static у вас должны быть стили и в ваших стилях ваш файл style.css.

static/styles/style.css

Очевидно, это была просто проблема с кэшем. Очистка кэша помогла решить эту проблему, и теперь я очищаю кэш каждый раз, когда изменяю что-либо в шаблонах CSS, что приводит к ежедневной очистке кэша.

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