CI框架中如何新增CSS樣式？

如何在CI框架中引入CSS樣式

CSS（層疊樣式表）在網頁設計中起著非常重要的作用，它可以控制網頁的佈局、樣式和裝飾效果。在使用CodeIgniter（CI）框架開發網站時，引入CSS樣式表是必不可少的一步。本文將詳細介紹在CI框架中如何引入CSS樣式，並給出具體的程式碼範例。

一、在CI框架中建立CSS資料夾

首先，我們需要在CI框架的根目錄下建立一個名為「assets」的資料夾，用來存放所有的靜態資源文件。在「assets」資料夾中再建立一個名為「css」的資料夾，用於存放CSS檔案。這樣可以使得文件結構清晰，並且方便統一管理靜態資源。

二、寫CSS樣式表

在「css」資料夾下建立一個名為「style.css」的文件，並編寫對應的CSS樣式程式碼。這裡以一個簡單的範例為例：

/* style.css */

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
    font-size: 24px;
}

p {
    color: #666;
    font-size: 16px;
}

以上是一個簡單的CSS樣式表，定義了網頁背景顏色、字型樣式、標題和段落的樣式。

三、在CI框架中引入CSS樣式

在CI框架中，可以透過使用base_url()函數，來配合link_tag()函數來引入CSS樣式。

首先，在控制器檔案中，載入CI框架所需的輔助函數“URL”，這可以透過在控制器的建構方法中加入下列程式碼來實現：

$this->load->helper('url');

接下來，在需要引入CSS樣式的視圖檔案中，透過以下程式碼來引入CSS樣式表：

<?php echo link_tag('assets/css/style.css'); ?>

該程式碼會根據CI框架的配置產生一個正確的CSS檔案路徑，並將該路徑嵌入到HTML中。

四、完整範例

以下是一個完整的範例，示範如何在CI框架中引入CSS樣式：

1. 在CI框架根目錄下創建一個名為「assets」的資料夾。
2. 在「assets」資料夾中建立一個名為「css」的資料夾。
3. 在「css」資料夾中建立一個名為「style.css」的文件，並編寫對應的CSS樣式程式碼。
4. 在控制器檔案中載入CI框架所需的輔助函數「URL」。
5. 在需要引入CSS樣式的視圖檔案中，透過以下程式碼來引入CSS樣式表：

    
    <?php echo link_tag('assets/css/style.css'); ?>


    
Welcome to CodeIgniter!
    
This is an example demonstrating how to include CSS stylesheet in CodeIgniter framework.

透過上述步驟，我們成功地在CI框架中引入了CSS樣式，並且可以在視圖文件中應用它們。

總結

在CI框架中引入CSS樣式表非常簡單，只需要建立一個存放CSS檔案的資料夾，並在對應的視圖檔案中使用link_tag()函數來引入CSS樣式表。這樣可以方便地管理和應用CSS樣式，使網頁更加美觀易讀。

參考文獻：

1. CodeIgniter官方文件- URL助手函數：https://codeigniter.com/user_guide/helpers/url_helper.html
2. #CodeIgniter官方文檔- HTML助手函式：https://codeigniter.com/user_guide/helpers/html_helper.html

#

以上是CI框架中如何新增CSS樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！