使用Flask 開發Web 應用時,一般需要加載靜態文件,如CSS、JavaScript、圖片等。本文將介紹如何在Flask 中加載CSS 文件。
首先,需要在Flask的項目目錄下創建一個靜態文件夾,通常命名為“static”。在靜態文件夾中創建一個名為“css”的文件夾,用于存放CSS文件。
在HTML文件中添加CSS文件,需要在HTML文件的head標簽中添加一個link標簽,如下所示:
其中,href屬性指定CSS文件路徑,使用Flask的內置url_for()函數獲取靜態文件夾的路徑,filename參數指定具體的CSS文件,如“style.css”。
下面是一個完整的HTML文件示例:Flask 加載CSS
This is a paragraph.
在CSS文件中,可以定義網站的樣式和布局。例如:body {
background-color: #e6e6e6;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 18px;
line-height: 1.5;
margin: 20px auto;
max-width: 600px;
padding: 0 20px;
}
注意,CSS文件路徑應該與HTML文件中的路徑一致,即在“static/css”文件夾中。如果路徑錯誤,CSS文件將無法加載。
總結:
Flask 可以輕松地加載CSS文件,只需要在靜態文件夾中創建CSS文件夾,然后在HTML文件中添加link標簽即可。CSS文件用于定義網站的樣式和布局,可大大美化網站界面。