HTML 文档无法通过 CSS 更新
网页构建使用了多种基础技术，其中主要包括 HTML(超文本标记语言)和 CSS(层叠样式表)。HTML 提供页面结构，而 CSS 负责各种设备的(视觉和听觉)布局。
CSS 可以通过三种不同的方式添加到 HTML 文档:内联 - 在 HTML 元素中使用 <style> 属性。内部 - 将 <style> 元素插入 <head> 部分。外部 - 使用 <link> 元素将外部 CSS 文件链接到 HTML 代码。
假设您正在使用 HTML 和 CSS 开发一个 Django 应用，并且遇到了这样一种情况:即使您已将 CSS 文件链接到 HTML 文档，CSS 样式也无法反映在 HTML 文档中。 .css 文件与 .html 文件位于同一路径，但更改未能反映在 HTML 文档中。代码如下所示。
<head>
<link type= "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>HTML Document</title>
</head>
当您将鼠标悬停在外部样式表链接上时，您可以按住 Ctrl 键并点击它，它将显示在新窗口中，表示 .css 文件已成功链接到 .html 文件，并且它不是问题的原因。如果常规方法(例如重启服务器/应用程序、为 css 文件创建不同的个性化文件夹、更改 css 文件的 href 等)失败，则应考虑清除 CDN 和浏览器缓存。
浏览器经常会独立于服务器指令缓存文件。如果您添加或更改内联 CSS 或 JavaScript，但未在 HTML 源代码中看到相应更改，则该页面很可能已被缓存。当您在文件中添加/修改 CSS 或 JavaScript 时，该文件也可能已被缓存。解决方案可以是:1) 确保 CSS 和 JavaScript 已正确入队;2) 更新服务器参数。更新服务器会强制浏览器重新下载文件，这不仅能清除浏览器缓存，还能清除 CDN 缓存。
如果启用了 CDN，静态资源将被缓存。如果您不想使用参数破坏缓存，可以通过刷新 CDN 缓存来实现相同的效果。(不过，在这种情况下，由浏览器自行发出请求。)
即使清除缓存后问题仍然存在，您可能需要查看 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 目录，并在 TEMPLATES 中为模板设置"DIR"，为 js 和 css 文件设置 static 目录。您必须将 js 和 css 文件放在 static 目录中。您也可以在 static 目录中创建一个名为"js"的目录。保留 js 文件，并在 static 目录中创建一个"css"目录，用于存放 css 文件。现在，在如下所示的视图中渲染您的 HTML 文件。
from django.shortcuts import render
def index (request):
return render(request, "index.html")
现在，您将能够在模板文件中加载静态文件了。
<!DOCTYPE html>
<head>
{% load static %}
<script src= "{% static 'my_app.js' %}"></script>
<title> Website </title>
</head>
<body>
<img src= "{% static 'img1.png' %}" alt= " my image" />
{% block content %}{% endblock %}
</body>
</html>
将 {% load static %} 也添加到 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>
最后，根据以下代码片段修改 settings.py。
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static",
]
此外，在您的根项目(manage.py 声明的位置)中，应该有一个 static 文件夹，在 static 文件夹中应该有一个 style 文件，在 style 文件夹中应该有一个 style.css 文件。
文件夹路径应如下所示:
static/styles/style.css
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
