python3如何引用css

在Python3中引用CSS的方法有多种，包括使用Flask框架、Django框架以及使用Jupyter Notebook。在Flask和Django中引用CSS文件是通过模板引擎实现的，而在Jupyter Notebook中可以直接在单元格中嵌入CSS代码。其中，使用Flask框架引用CSS文件是一种常见的方法，下面将详细描述如何在Flask框架中引用CSS文件。

一、Flask框架引用CSS文件

1、创建Flask项目

首先，确保你已经安装了Flask库，如果没有安装可以使用以下命令进行安装：

pip install Flask

然后，创建一个Flask项目的目录结构，如下所示：

my_flask_app/ │ ├── app.py ├── static/ │ ├── css/ │ │ └── styles.css └── templates/ └── index.html

2、编写CSS文件

在static/css/目录下创建一个名为styles.css的文件，并添加一些CSS样式，例如：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333333;
}

3、编写HTML模板

在templates/目录下创建一个名为index.html的文件，并引用刚刚创建的CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask CSS Example</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <h1>Hello, Flask!</h1>
</body>
</html>

4、编写Flask应用

在项目根目录下的app.py文件中编写Flask应用代码：

from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

5、运行Flask应用

在命令行中导航到项目根目录并运行以下命令启动Flask应用：

python app.py

然后在浏览器中访问http://127.0.0.1:5000/，你将看到应用渲染的HTML页面，并应用了CSS样式。

二、Django框架引用CSS文件

1、创建Django项目

首先，确保你已经安装了Django库，如果没有安装可以使用以下命令进行安装：

pip install Django

然后，创建一个新的Django项目：

django-admin startproject my_django_project

进入项目目录并创建一个新的应用：

cd my_django_project python manage.py startapp my_app

2、配置静态文件

在settings.py文件中，添加静态文件目录的配置：

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

3、创建CSS文件

在项目根目录下创建一个static/目录，并在其中创建一个css/目录，然后在css/目录中创建一个名为styles.css的文件，并添加一些CSS样式：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333333;
}

4、编写HTML模板

在my_app/templates/目录下创建一个名为index.html的文件，并引用刚刚创建的CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django CSS Example</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
    <h1>Hello, Django!</h1>
</body>
</html>

5、编写视图函数

在my_app/views.py文件中编写视图函数：

from django.shortcuts import render
def index(request):
    return render(request, 'index.html')

6、配置URL

在my_app/urls.py文件中配置URL：

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index, name='index'),
]

在my_django_project/urls.py文件中包含应用的URL配置：

from django.contrib import admin
from django.urls import include, path
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('my_app.urls')),
]

7、运行Django项目

在命令行中导航到项目根目录并运行以下命令启动Django项目：

python manage.py runserver

然后在浏览器中访问http://127.0.0.1:8000/，你将看到应用渲染的HTML页面，并应用了CSS样式。

三、Jupyter Notebook引用CSS文件

在Jupyter Notebook中，可以直接在单元格中嵌入CSS代码，以下是一个示例：

1、创建Jupyter Notebook

首先，确保你已经安装了Jupyter Notebook，如果没有安装可以使用以下命令进行安装：

pip install notebook

然后，启动Jupyter Notebook：

jupyter notebook

2、嵌入CSS代码

在Jupyter Notebook中创建一个新的单元格，并嵌入CSS代码：

<style>
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333333;
}
</style>

然后在另一个单元格中添加HTML代码：

<h1>Hello, Jupyter Notebook!</h1>

运行两个单元格，你将看到HTML内容应用了CSS样式。

四、总结

通过以上介绍，我们了解了在不同的Python3框架和环境中引用CSS文件的方法。在Flask和Django中引用CSS文件是通过模板引擎实现的，这种方法不仅简单，而且可以很好地组织项目文件。 在Jupyter Notebook中引用CSS文件可以直接嵌入CSS代码，这种方法适用于快速实验和展示。

无论使用哪种方法，都需要注意CSS文件的路径和引用方式，以确保样式能够正确应用到HTML页面。掌握这些技巧，可以使你在开发Python3应用时，更加灵活地使用CSS文件，提升页面的美观和用户体验。