Django 简明教程

Django - Add CSS Files

级联样式表 (CSS) 与 HTML 和 JavaScript 一起，是万维网的重要组成部分。它是一种样式表语言，用于指定以 HTML 编写的文档的呈现和样式。

CSS Files are Static Assets

在 Django 中，CSS 文件被称为 static assets 。它们放置在 app 的 “package” 文件夹内创建的 static 文件夹中。

静态资源通过以下 template tag 提供 -

{% load static %}

通常，CSS 文件包含在 HTML 代码中，其中包含以下语句，通常放置在 <head> 部分。

<link rel="stylesheet" type="text/css" href="styles.css" />

但是，要将 CSS 作为静态资源包含，它的路径将使用 {% static %} 标记如下提及 -

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

Applying CSS to the Name of Cities

在此处，我们将展示如何将 CSS 应用到在网页中以无序列表形式显示的城市名称。

让我们定义以下 index() view ，将城市列表作为上下文传递给 “ cities.html ” 模板

from django.shortcuts import render

def index(request):
   cities = ['Mumbai', 'New Delhi', 'Kolkata', 'Bengaluru', 'Chennai', 'Hyderabad']
   return render(request, "cities.html", {"cities":cities})

cities.html

在 “cities.html” 模板中，我们首先在 HEAD 部分中加载 CSS 文件。每个名称都在 <li> . . </li> 标记中使用 for loop 模板标记进行呈现。

<html>
<head>
   {% load static %}
   <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
</head>
<body>
   <h2>List of Cities</h2>
   <ul>
      {% for city in cities %}
         <li>{{ city }} </li>
      {% endfor %}
   </ul>
</body>
</html>

style.css

我们应将背景色应用到网页，并设置其字体大小和颜色。

将以下代码另存为 “ style.css ”，并将其放入 static 文件夹中。

h2 {
   text-align: center;
   font-size:xx-large;
   color:red;
}

ul li {
   color: darkblue;
   font-size:20;
}

body {
   background-color: violet;
}

Register the index() View

index() 视图在 Django app 的 urlpatterns 中注册，如下所示 -

from django.urls import path
from . import views

urlpatterns = [
   path("", views.index, name="index"),
]

http://localhost:8000/myapp/ URL 根据以上样式显示城市列表 -

django add css files