Python项目静态CSS问题求助：CSS文件存放路径与启用方法咨询

Hey there! Let's work through your CSS placement and linking issue—this is a super common gotcha when starting out with Python web projects, so I’ve got you covered.

Step 1: Where to put your CSS file #

First, you’ll want to follow standard web project conventions for static files (CSS, JS, images). The setup varies a little by framework, but here’s the breakdown:

For Flask projects #

Organize your project like this:

your-project/
├── app.py
├── templates/
│   └── [your-html-template].html
└── static/
    └── css/
        └── styles.css  # Drop your CSS code right here

For Django projects #

Django has a specific structure to avoid static file conflicts between apps:

your-project/
├── your_app/
│   ├── templates/
│   │   └── [your-html-template].html
│   ├── static/
│   │   └── your_app/  # Match your app name here!
│   │       └── styles.css
└── your_project_config/  # The root settings folder

For basic Python web projects (no framework) #

If you’re just serving HTML directly with a simple server, place your static folder at the same level as your HTML files:

your-project/
├── index.html
└── static/
    └── css/
        └── styles.css

Step 2: Link the CSS to your website #

Now you need to tell your HTML template to use the CSS file. Here’s how to do it for each case:

Flask #

Use the url_for helper to generate the correct path (avoids broken links if your app’s URL structure changes):

<!-- Put this inside the <head> tag of your HTML template -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

Django #

First load the static template tag at the top of your HTML, then reference the file:

<!-- Top of your HTML template -->
{% load static %}

<!-- Inside the <head> tag -->
<link rel="stylesheet" href="{% static 'your_app/styles.css' %}">

Basic no-framework setup #

Use a relative path to link the CSS:

<!-- Inside the <head> tag of your HTML file -->
<link rel="stylesheet" href="static/css/styles.css">

Quick fix for your CSS code #

I noticed a tiny syntax error that would break your #progress style—you wrote width; 50% instead of width: 50%;. Here’s the corrected version you should put in your styles.css file:

#video-player{ background-color: aquamarine; display: inline-block; }
img{ background-color: Aqua; }
#video-tree{ width: 640px; height: 640px; }
video{ height: 100%; width: 100% }
#progress-tree{ background-color: CadetBlue; }
#progress{ height: 5px; width: 50%; background-color: Black; }
#button-tree{ height: 50px; }
#button-tree > * { display: inline-block; height: 50px; width: 50px; vertical-align: middle; }

That should get your styles working perfectly!

内容的提问来源于stack exchange，提问作者EdwardRB