极客笔记HTML文档未从CSS更新
网页使用多种基本技术构建，HTML（超文本标记语言）和CSS（级联样式表）是主要的技术。HTML为页面提供结构，而CSS负责各种设备的（视觉和听觉）布局。
CSS可以通过三种不同的方式添加到HTML文档中：内联方式-在HTML元素中使用<style>属性。内部方式-当<style>元素插入到<head>部分时。外部方式-通过<link>元素将外部CSS文件链接到HTML代码。
假设您正在使用HTML和CSS制作Django应用程序，并且在将CSS文件链接到文档时，您遇到了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"),
]
在项目根目录或你想要的地方创建一个静态和模板目录，并在TEMPLATES中设置”DIR”，用于存放模板文件和静态文件，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的位置），您应该有一个static文件夹，在您的static文件夹中，您应该有styles文件夹，在styles文件夹中，您应该有您的style.css文件。
文件夹路径应该类似于：
static/styles/style.css