数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML 文档未从 CSS 更新
网页使用多种基本技术构建，其中 HTML（超文本标记语言）和 CSS（层叠样式表）是最主要的两种。HTML 为页面提供结构，而 CSS 则负责各种设备的（视觉和听觉）布局。
CSS 可以通过三种不同的方式添加到 HTML 文档中：内联 - 当在 HTML 元素中使用 <style> 属性时。内部 – 当将 <style> 元素插入到 <head> 部分时。外部 – 当使用 <link> 元素将外部 CSS 文件链接到 HTML 代码时。
假设您正在使用 HTML 和 CSS 创建一个 Django 应用程序，并且遇到 CSS 样式未反映在 HTML 文档中的情况，即使您已将 CSS 文件链接到该文档。.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"),
]
在项目根目录或您想要的任何位置创建一个静态和模板目录，并为模板设置 TEMPLATES 中的“DIR”，并为 js 和 css 文件设置静态文件。您必须将您的 js 和 css 文件放在静态目录中。您还可以创建名为“js”的目录在静态目录内。保留 js 文件并在静态目录内创建一个“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 的位置），您应该有一个静态文件夹，在您的静态文件夹中，您应该有样式，在您的样式中，您应该有您的 style.css 文件。
文件夹路径应类似于以下内容
static/styles/style.css
395 次浏览
