简体   繁体   English

如何将我的 HTML 文件与 Django 项目中的 CSS 文件连接起来

[英]How to connect my HTML file with CSS file inside of a Django Project

I have a simple html page that works and renders properly on my local browser, but when I reference the static css file the page loads without the styling and I get a 200 Success for the url but 404 for the style.css file我有一个简单的 html 页面,可以在我的本地浏览器上正常工作和呈现,但是当我引用静态 css 文件时,页面加载时没有样式,我得到 200 Success 的 url,但 404 的 style.css 文件

I used我用了

 <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">

inside of the HTML file.在 HTML 文件中。 I have the static folder in the correct spot at the project level and then a css file inside that followed by the style.css file.我在项目级别的正确位置有静态文件夹,然后在里面有一个 css 文件,然后是 style.css 文件。

The Html page: Html 页面:

{% load static %}
<!DOCTYPE html>
<html>

<head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>

<body>
    <h1>Home</h1>
    <header>
        <nav>
            <ul>
                <li><a href="{% url 'home' %}">Home</a></li>
                <li><a href="{% url 'about' %}">About</a></li>
                <li><a href="{% url 'info' %}">Info</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>

The CSS page: CSS页面:

h1 {
    background-color: orange;
}

From the research I've done this should get the backgrounds of all the h1 tags orange but it is not working.根据我所做的研究,这应该使所有 h1 标签的背景变为橙色,但它不起作用。 Any Advice?有什么建议吗?

handle Static Files In dajngo在 dajngo 中处理静态文件

Steps:脚步:

# 1 - Create (static) folder in Root Directory of Project
# 2 - Paste Your Static Files Folder in (static) Folder (js,css,images...etc)
# 3 - Now Do Setting in (setting.py)
       STATIC_URL = '/static/'

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

       ---------- OR --------+

       STATICFILES_DIRS = [BASE_DIR / 'static']


# 4 - add {% load static %} tag on top of html page
# 5 - Now use ({% static 'assets/image.jpg' %}) tag in HTML File for calling static files
# 6 - Done

Thanks to the answers I was able to get an orange background for all the h1 tags.多亏了答案,我才能为所有 h1 标签获得橙色背景。 I added STATICFILES_DIRS = [BASE_DIR / "static"] to the settings.py file and it worked perfectly!我将STATICFILES_DIRS = [BASE_DIR / "static"]添加到settings.py文件中,它工作得很好!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM