Django - 添加CSS文件

CSS（层叠样式表）是万维网的重要组成部分，与HTML和JavaScript并列。它是一种样式表语言，用于指定HTML文档的呈现和样式。

CSS文件是静态资源

在Django中，CSS文件被称为静态资源。它们放置在应用“包”文件夹内创建的static文件夹中。

静态资源可以使用以下模板标签访问：

{% 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' %}">

将CSS应用于城市名称

我们将展示如何将CSS应用于网页中显示为无序列表的城市名称。

让我们定义以下index()视图，它将城市列表作为上下文传递给“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文件。每个名称都使用for循环模板标签在<li>…</li>标签中呈现。

<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;
}

注册index()视图

index()视图在Django应用的urlpatterns中注册，如下所示：

from django.urls import path
from . import views

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

https://127.0.0.1:8000/myapp/ URL将根据上述样式显示城市列表：

打印页面