在CI框架中如何引入CSS樣式？-css教學-PHP中文網

首頁

web前端

css教學

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

王林

Jan 16, 2024 am 10:33 AM

ci框架css樣式引入方法

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

CI框架中CSS樣式的引入方法，需要具體程式碼範例

#CI（CodeIgniter）是一個輕量級的PHP框架，廣泛應用於Web應用程式的開發。在CI框架中，為了讓網頁具有良好的樣式和佈局，我們需要引入CSS樣式。本文將介紹在CI框架中引入CSS樣式的方法，並提供具體的程式碼範例。

一、直接在視圖檔案中引入CSS樣式

在CI框架中，視圖檔案（View）負責呈現HTML頁面。我們可以直接在視圖檔案中引入CSS樣式，以改變頁面的外觀和佈局。以下是具體的步驟：

在CI框架中，視圖檔案一般存放在application/views目錄下。因此，我們需要在該目錄下建立一個新的視圖文件，並命名為example_view.php。
在example_view.php檔案中，加入以下程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/styles.css'); ?>">
</head>
<body>
    <h1 id="这是一个示例页面">这是一个示例页面</h1>
    <p>这是一段示例内容。</p>
</body>
</html>

在上述程式碼中，我們使用了<link>標籤來引入CSS樣式表。其中，href屬性的值是透過base_url()函數動態產生的，指向css/styles.css檔。這裡假設CSS樣式檔案存放在CI框架的根目錄下的css資料夾中。

接下來，我們需要在CI框架的控制器檔案中指定載入該視圖檔案。開啟application/controllers目錄下的對應控制器文件，例如Example.php，在該文件中加入以下程式碼：

class Example extends CI_Controller {
    public function index() {
        $this->load->view('example_view');
    }
}

在上述程式碼中，index()方法用來載入example_view.php檢視檔。

最後，在瀏覽器中輸入CI框架的URL，例如http://localhost/ci/index.php/example，即可看到具有CSS樣式的範例頁面。

二、使用CI框架的資源載入器

除了直接在視圖檔案中引入CSS樣式外，CI框架還提供了一個資源載入器（Loader）的功能，用於載入CSS樣式表、JavaScript檔案等資源。以下是具體的步驟：

首先，在application/config/autoload.php檔案中，找到以下程式碼並修改為：

$autoload['helper'] = array('url');

在上述程式碼中，我們將url助理庫加入到自動載入的助手清單中，以便在視圖檔案中使用base_url()函數。

在控制器檔案中，無需再手動呼叫資源載入器，只需將視圖檔案中的引入CSS樣式的程式碼修改為以下形式：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <?php echo link_tag('css/styles.css'); ?>
</head>
<body>
    <h1 id="这是一个示例页面">这是一个示例页面</h1>
    <p>这是一段示例内容。</p>
</body>
</html>

在上述程式碼中，我們使用了link_tag()函數來動態產生<link>標籤，並載入css/styles.css檔。