Django 简明教程

Django - Add CSS Files

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

CSS (Cascading Style Sheets) is an important component of the World Wide Web alongside HTML and JavaScript. It is a style sheet language used for specifying the presentation and styling of a document written in HTML.

CSS Files are Static Assets

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

In Django, CSS files are termed as static assets. They are placed in the static folder which is created inside the app’s "package" folder.

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

The static assets are made available with the following template tag −

{% load static %}

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

Normally, the CSS file is included in the HTML code with the following statement, usually placed in the <head> section.

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

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

However, to include CSS as a static resource, its path is mentioned with {% static %} tag as follows −

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

Applying CSS to the Name of Cities

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

Here we will show how you can apply CSS to the name of cities displayed as an unordered list in the web page.

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

Let us define the following index() view that passes a list of cities as a context to a "cities.html" template

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 模板标记进行呈现。

In the "cities.html" template, we first load the CSS file in the HEAD section. Each name is rendered in the <li> . . </li> tag with the help of a for loop template tag.

<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

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

We shall apply background color to the webpage and set its font size and color.

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

Save the following code as "style.css" and put it in the static folder.

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 中注册，如下所示 -

The index() view is registered in the urlpatterns of the Django app as follows −

from django.urls import path
from . import views

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

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

The http://localhost:8000/myapp/ URL displays the list of cities according to the above styles −

django add css files