Django：如何使用另一个文件中的 CSS？

发布于 2025-01-14 01:11:08 字数 920 浏览 0 评论 0原文

这可能是一个愚蠢的问题。我是 Django 新手，我想知道当 CSS 位于不同文件中时如何使用它。

现在，我的文件路径如下所示：

CSS: web/static/web/style.css

HTML: web/templates/web

我的 HTML 文件如下所示：

{% load static %}

<!--HTML-->
<body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
</body>

My CSS 看起来像这样：

  .topnav {
    background-color: #333;
    overflow: hidden;
  }
 
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
 
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

How can I get HTML to use the CSS from a different file?

原文

This is probably a stupid question. I'm new to Django and I was wondering how to use CSS when it is in a different file.

Right now, my file paths looks like this:

CSS: web/static/web/style.css

HTML: web/templates/web

My HTML file looks like this:

{% load static %}

<!--HTML-->
<body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
</body>

My CSS looks like this:

  .topnav {
    background-color: #333;
    overflow: hidden;
  }
 
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
 
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

How can I get the HTML to use the CSS from a different file?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水中月 2025-01-21 01:11:08

这个方法对我有用。

创建一个名为 staticfiles 的目录，然后在该文件夹内创建一个 css 目录。

然后检查 settings.py 文件，使其看起来像这样：

import os

PROJECT_DIR = os.path.dirname(__file__)

DATABASES = {
    'default': {
         'ENGINE': 'django.db.backends.sqlite3', 
         'NAME': os.path.join(PROJECT_DIR, 'myweblabdev.sqlite'),                        
         'USER': '',
         'PASSWORD': '',
         'HOST': '',                      
         'PORT': '',                     
    }
}

MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')

MEDIA_URL = '/media/'

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR, 'staticfiles'),

然后转到项目的主 urls.py 文件并添加以下内容：

from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from myweblab import settings

admin.autodiscover()

urlpatterns = patterns('',
    .......
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += staticfiles_urlpatterns()

然后在 html 文件中，添加这个，它现在应该可以工作了：

{% load static %}

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

This method works for me.

Create a directory called staticfiles then inside that folder create a css directory.

Then check the settings.py file to make it look like this:

import os

PROJECT_DIR = os.path.dirname(__file__)

DATABASES = {
    'default': {
         'ENGINE': 'django.db.backends.sqlite3', 
         'NAME': os.path.join(PROJECT_DIR, 'myweblabdev.sqlite'),                        
         'USER': '',
         'PASSWORD': '',
         'HOST': '',                      
         'PORT': '',                     
    }
}

MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')

MEDIA_URL = '/media/'

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR, 'staticfiles'),

Then go to the main urls.py file of the project and add this:

from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from myweblab import settings

admin.autodiscover()

urlpatterns = patterns('',
    .......
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += staticfiles_urlpatterns()

And then in the html file, add this one and it should work now:

{% load static %}

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

回复收藏 0 原文

绝情姑娘 2025-01-21 01:11:08

添加 ... 标记并输入在 ... 标记内。
确保 ... 位于 ... 标记之外。这是新代码。

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="static/web/style.css"/>
  <!--other head contents like title and meta tag goes here-->
 </head>
 <!--HTML-->
 <body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
 </body>
</html>

add a <head>…</head>tag and type <link rel="stylesheet" href="static/web/style.css"/> inside the <head>…</head> tag.
Make sure the <head>…</head> is outside the <body>…</body> tag. Here is the new code.

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="static/web/style.css"/>
  <!--other head contents like title and meta tag goes here-->
 </head>
 <!--HTML-->
 <body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
 </body>
</html>

回复收藏 0 原文

嘦怹 2025-01-21 01:11:08

您应该将添加到，如下所示：

{% load static %}

<!--HTML-->
<head>
   {# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
    <link rel="stylesheet" href="{% static 'web/style.css' %}">
   {# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
</head>
<body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
</body>

You should add <link rel="stylesheet" ...> to <head></head> as shown below:

{% load static %}

<!--HTML-->
<head>
   {# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
    <link rel="stylesheet" href="{% static 'web/style.css' %}">
   {# ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ Here ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #}
</head>
<body>
    <div class="topnav">
        <a class="active" href="/">Home</a>
        <a href="/donate">Donate</a>
    </div>
</body>

回复收藏 0 原文

~没有更多了~