Maison > interface Web > tutoriel CSS > Explication détaillée des étapes pour référencer les styles CSS dans le framework CI

Explication détaillée des étapes pour référencer les styles CSS dans le framework CI

WBOY
Libérer: 2024-01-16 09:28:05
original
1113 Les gens l'ont consulté

Explication détaillée des étapes pour référencer les styles CSS dans le framework CI

Tutoriel : Étapes détaillées pour introduire les styles CSS dans le framework CI, des exemples de code spécifiques sont requis

Introduction :
Dans le développement d'applications Web, les styles sont un élément crucial. Utilisez CSS (Cascading Style Sheets) pour embellir les pages Web et offrir une meilleure expérience utilisateur. Lors du développement à l'aide du framework CodeIgniter (CI), la manière d'introduire correctement les styles CSS est particulièrement importante. Cet article présentera les étapes détaillées de l'introduction des styles CSS dans le framework CI et vous fournira des exemples de code spécifiques.

Étape 1 : Créer un fichier CSS
Tout d'abord, nous devons créer un nouveau fichier CSS dans le dossier ressources du framework CI. Vous pouvez créer un nouveau dossier dans le répertoire « assets » du framework CI pour stocker les fichiers CSS. Supposons que nous stockions le fichier CSS dans le répertoire "assets/css", puis que nous créons un fichier CSS nommé "style.css". Vous pouvez définir différents styles dans ce fichier, tels que la couleur d'arrière-plan, la taille du texte, les bordures, etc.

/* style.css */

body {
    background-color: #f1f1f1;
}

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

.button {
    background-color: #d32f2f;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
Copier après la connexion

Étape 2 : Configurer le chemin des ressources de CI
Le framework CI a configuré le chemin du fichier de ressources par défaut (généralement dans le fichier "applicationconfigconfig.php"). Ouvrez le fichier et recherchez la ligne de code suivante :

$config['base_url'] = '';
Copier après la connexion

Changez-le par :

$config['base_url'] = 'http://your-domain.com';
Copier après la connexion

Remplacez "votre-domaine.com" par le nom de domaine réel de votre application Web.

Étape 3 : Introduire le fichier CSS dans le fichier de vue
Ensuite, nous devons introduire le fichier CSS que nous venons de créer dans le fichier de vue. Dans le framework CI, vous pouvez utiliser la fonction intégrée base_url() pour importer des fichiers de ressources. En supposant que notre fichier de vue soit "application/views/welcome_message.php", ajoutez la ligne de code suivante dans la balise <head> du fichier : base_url()函数来引入资源文件。假设我们的视图文件是"application/views/welcome_message.php",在该文件的<head>标签内添加以下代码行:

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/style.css'); ?>">
Copier après la connexion

此代码行将链接到我们刚才创建的CSS文件。

步骤四:加载CSS文件
最后,我们需要在CI框架的控制器文件中加载CSS文件。在控制器文件中,您可以使用CI框架提供的$this->load->helper()$this->load->view()函数来加载CSS文件和视图文件。以下是一个示例控制器文件,假设控制器文件名为"application/controllers/Welcome.php":

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
    public function index() {
        $this->load->helper('url');
        $this->load->view('welcome_message');
    }
}
Copier après la connexion

在这个示例中,我们通过$this->load->helper('url')函数加载了CI框架的URL助手,这样我们就可以使用base_url()函数了。然后,通过$this->load->view('welcome_message')rrreee

Cette ligne de code fera un lien vers le celui que nous venons de créer des fichiers CSS.


Étape 4 : Charger le fichier CSS

Enfin, nous devons charger le fichier CSS dans le fichier contrôleur du framework CI. Dans le fichier du contrôleur, vous pouvez utiliser $this->load->helper() et $this->load->view() fournis par le Code du framework CI> fonction pour charger des fichiers CSS et afficher les fichiers. Voici un exemple de fichier de contrôleur, en supposant que le fichier de contrôleur s'appelle "application/controllers/Welcome.php" : 🎜rrreee🎜Dans cet exemple, nous passons $this->load->helper('url ') La fonction charge l'assistant URL du framework CI afin que nous puissions utiliser la fonction base_url(). Ensuite, notre fichier de vue "welcome_message.php" est chargé via la fonction $this->load->view('welcome_message'). 🎜🎜Résumé : 🎜Grâce aux quatre étapes ci-dessus, vous avez réussi à introduire votre propre style CSS dans le framework CI. Vous pouvez désormais ajouter plus de styles dans le fichier CSS en fonction de vos besoins et les appliquer au fichier de vue. La flexibilité du framework CI rend l'introduction et la gestion des styles CSS simples et efficaces. J'espère que cet article vous aidera ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal