不从CSS更新HTML文档

Question

我使用CSS文件在Django应用程序中更新我的HTML，但是尽管我的"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 +单击，然后"styles.css“在一个新窗口中打开。

我已经读过四五篇教程，尝试重新启动本地服务器，将"style.css“移动到它自己的文件夹"styles"，然后将href更改为href=”href=/style.css“，但它仍然无法工作。

我使用的是VSCode和Windows 11。

Answer 1

您需要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"),
]

小心地在项目根目录或任何您想要的位置创建静态和模板目录，并在模板中的"DIR“中设置，为js和css文件设置静态文件。在静态目录中，您必须将js和css文件放在静态目录中，也可以在静态目录中创建目录，称为" js“，保存js文件，并在静态目录中为css文件创建"css”目录。现在呈现如下所示的yout 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>

Answer 2

在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声明的地方)中，静态文件夹和静态文件夹中应该有样式，而样式中是style.css文件。

静态/样式/样式