Cách sử dụng css trong bình python

Nếu bạn thấy bài viết này hữu ích, bạn có thể quan tâm đến cuốn sách Công thức NumPy hoặc các cuốn sách khác của cùng tác giả

Các dạng xem và mẫu xác thực hoạt động, nhưng hiện tại chúng trông rất đơn giản. Một số CSS có thể được thêm vào để thêm phong cách cho bố cục HTML mà bạn đã tạo. Kiểu sẽ không thay đổi, do đó, đây là tệp tĩnh chứ không phải mẫu

Flask tự động thêm chế độ xem static có đường dẫn liên quan đến thư mục flaskr/static và phục vụ nó. Mẫu base.html đã có liên kết đến tệp style.css

{{ url_for['static', filename='style.css'] }}

Ngoài CSS, các loại tệp tĩnh khác có thể là tệp có chức năng JavaScript hoặc hình ảnh biểu trưng. Tất cả chúng đều được đặt trong thư mục flaskr/static và được tham chiếu với url_for['static', filename='...']

Hướng dẫn này không tập trung vào cách viết CSS, vì vậy bạn chỉ cần sao chép phần sau vào tệp flaskr/static/style.css

flaskr/static/style.css

html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
nav { background: lightgray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul  { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }

Bạn có thể tìm thấy phiên bản nhỏ gọn hơn của style.css trong mã ví dụ

truy cập http. //127. 0. 0. 1. 5000/auth/login và trang sẽ giống như ảnh chụp màn hình bên dưới

Bạn có thể đọc thêm về CSS từ tài liệu của Mozilla. Nếu bạn thay đổi tệp tĩnh, hãy làm mới trang trình duyệt. Nếu thay đổi không hiển thị, hãy thử xóa bộ nhớ cache của trình duyệt

Làm cách nào để áp dụng CSS trong Python?

Có thể sử dụng CSS trong Python không?

Làm cách nào để thêm CSS vào HTML trong Python?