Hướng dẫn how do you include css in python? - làm thế nào để bạn bao gồm css trong python?

Cho đến nay, trang web của chúng tôi bao gồm một kịch bản Python và ba tài liệu HTML. Tập lệnh Python xử lý giao tiếp giữa máy chủ web và máy khách web (tức là, trình duyệt) trong khi các tài liệu HTML chịu trách nhiệm về cấu trúc của nội dung trang.

Bây giờ chúng ta cần thêm một số định dạng kiểu vào cấu trúc HTML bằng cách sử dụng CSS (bảng kiểu xếp tầng). Điều đó được thực hiện bằng cách tạo tệp CSS và kết nối nó với các tệp HTML của chúng tôi. CSS là một ngôn ngữ phong cách tương tự như HTML, nó cũng dễ học. Python khó học hơn nhiều so với CSS. Vì vậy, một quy tắc của ngón tay cái là nếu bạn biết Python, việc học CSS nên là một làn gió.

Vào cuối bài học này, trang web của bạn sẽ trông như thế này:

Hãy nhớ rằng các tệp mẫu HTML HTML đi vào bên trong thư mục của các mẫu. Các kiểu dáng CSS được coi là các tệp tĩnh. Không có tương tác với mã của họ, giống như có các mẫu HTML. Do đó, Flask đã dành một thư mục riêng trong đó bạn nên đặt các tệp tĩnh như CSS, JavaScript, hình ảnh hoặc các tệp khác. Thư mục đó nên được tạo bởi bạn và nên được đặt tên là tĩnh. Nó cũng thực hành tốt để tạo ra một thư mục khác bên trong tĩnh và đặt tên cho nó CSS.

Bây giờ, tạo một tệp trống bên trong CSS và đặt tên cho tệp một cái gì đó như main.css. Cây thư mục sẽ trông như thế này bây giờ:

Sau đó, đặt mã này vào tệp CSS:

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
}
/*
 * Formatting the header area
 */
header {
  background-color: #DFB887;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 10px;
}
header h2.logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  float: left;
}
header h2.logo:hover {
  color: #fff;
  text-decoration: none;
}
/*
 * Centering the body content
 */
.container {
  width: 1200px;
  margin: 0 auto;
}
div.home {
  padding: 10px 0 30px 0;
  background-color: #E6E6FA;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}
div.about {
  padding: 10px 0 30px 0;
  background-color: #E6E6FA;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}
h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}
h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}
.menu {
  float: right;
  margin-top: 8px;
}
.menu li {
  display: inline;
}
.menu li + li {
  margin-left: 35px;
}
.menu li a {
  color: #444;
  text-decoration: none;
}

Tôi giả sử tệp CSS khá tự giải thích. Những gì mã về cơ bản đang làm là đề cập đến các thẻ HTML và tên lớp DIV và áp dụng phông chữ, màu sắc, kích thước văn bản, đệm, lề và màu nền cho các phần tử HTML đó.

Được rồi, chúng tôi có một tệp CSS, nhưng các tài liệu HTML của chúng tôi vẫn không biết cách liên kết với nó. Ý tưởng là chúng ta nên liên kết từng trang với CSS, nhưng vì mã bố cục.html của chúng ta ở mỗi trang, chúng ta có thể chèn mã liên kết vào đó. Vì vậy, hãy mở trang Layout.html của bạn và thêm phần đầu để mã trông như thế này:

  
    
    
  
  
    

      

        
Ardit's web app

        
      

    

    

      {% block content %}
      {% endblock %}
    

  

Như bạn thấy, chúng tôi đã thêm một thẻ tiêu đề và liên kết vào các thẻ đầu bên trong. Bên trong thẻ liên kết, chúng tôi tuyên bố chúng tôi liên quan đến một tài liệu biểu định kiểu và sau đó chúng tôi đã chỉ định đường dẫn đến bảng kiểu đó.

Điều hướng đến Localhost: 5000 Bây giờ sẽ hiển thị trang web bạn đã thấy trong ảnh chụp màn hình ở trên.

Bây giờ bạn có thể thêm nhiều nội dung hơn vào nó và điều chỉnh các tệp HTML bằng cách thêm nhiều Divs nếu bạn muốn có thêm phần trong các trang web của mình.

Nhưng, một trang web phục vụ cho điều gì nếu nó thực vật trong localhost của bạn?

Nó hoàn toàn vô dụng nếu không ai nhìn thấy nó.

Tuy nhiên, không phải lo lắng, chúng tôi sẽ sửa nó ngay lập tức bằng cách triển khai trang web trong đám mây Heroku để bất kỳ ai cũng có thể truy cập nó thông qua một URL công khai.

Hãy cùng chuyển sang bài học tiếp theo.

Bài giảng tiếp theo

Tôi có thể thêm CSS vào Python không?

Tôi có thể kết hợp HTML CSS và Python không?

HTML CSS và Python là gì?