Comment ajouter des styles CSS dans le framework CI ?

Comment introduire les styles CSS dans le framework CI

CSS (Cascading Style Sheets) joue un rôle très important dans la conception Web. Il peut contrôler la mise en page, le style et les effets décoratifs des pages Web. Lors du développement d'un site Web à l'aide du framework CodeIgniter (CI), l'introduction des feuilles de style CSS est une étape essentielle. Cet article présentera en détail comment introduire les styles CSS dans le framework CI et donnera des exemples de code spécifiques.

1. Créez un dossier CSS dans le framework CI

Tout d'abord, nous devons créer un dossier nommé "assets" dans le répertoire racine du framework CI pour stocker tous les fichiers de ressources statiques. Créez un autre dossier nommé "css" dans le dossier "assets" pour stocker les fichiers CSS. Cela peut rendre la structure des fichiers claire et faciliter la gestion unifiée des ressources statiques.

2. Écrivez une feuille de style CSS

Créez un fichier nommé "style.css" dans le dossier "css" et écrivez le code de style CSS correspondant. Voici un exemple simple :

/* 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;
}

Ce qui précède est une simple feuille de style CSS qui définit la couleur d'arrière-plan, le style de police, les styles de titre et de paragraphe de la page Web.

3. Introduction des styles CSS dans le framework CI

Dans le framework CI, vous pouvez introduire des styles CSS en utilisant la fonction base_url() en conjonction avec la fonction link_tag() fonction. base_url()函数，配合link_tag()函数来引入CSS样式。

首先，在控制器文件中，加载CI框架所需的辅助函数“URL”，这可以通过在控制器的构造方法中添加以下代码来实现：

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

接下来，在需要引入CSS样式的视图文件中，通过以下代码来引入CSS样式表：

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

该代码会根据CI框架的配置生成一个正确的CSS文件路径，并将该路径嵌入到HTML中。

四、完整示例

以下是一个完整的示例，演示了Comment ajouter des styles CSS dans le framework CI ?：

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()

Tout d'abord, dans le fichier du contrôleur, chargez la fonction auxiliaire "URL" requise par le framework CI. Cela peut être réalisé en ajoutant le code suivant dans la méthode constructeur du contrôleur :

rrreee

Suivant, où les styles CSS doivent être. introduit Dans le fichier de vue, introduisez la feuille de style CSS via le code suivant :

rrreee
1. Ce code générera un chemin de fichier CSS correct basé sur la configuration du framework CI et intégrera le chemin dans HTML.
2. 4. Exemple complet

Ce qui suit est un exemple complet qui montre comment introduire les styles CSS dans le framework CI : 🎜🎜🎜Créez un dossier nommé "assets" dans le répertoire racine du framework CI. 🎜🎜Créez un dossier appelé « css » dans le dossier « actifs ». 🎜🎜Créez un fichier nommé "style.css" dans le dossier "css" et écrivez le code de style CSS correspondant. 🎜🎜Chargez la fonction d'assistance "URL" requise par le framework CI dans le fichier du contrôleur. 🎜🎜Dans le fichier de vue où les styles CSS doivent être introduits, introduisez la feuille de style CSS via le code suivant : 🎜🎜rrreee🎜Grâce aux étapes ci-dessus, nous avons introduit avec succès les styles CSS dans le framework CI et pouvons les appliquer dans le fichier de vue . 🎜🎜Résumé🎜🎜L'introduction des feuilles de style CSS dans le framework CI est très simple. Il vous suffit de créer un dossier pour stocker les fichiers CSS et d'utiliser la fonction link_tag() dans le fichier de vue correspondant pour introduire le CSS. styles. Cela facilite la gestion et l'application des styles CSS, rendant les pages Web plus belles et plus lisibles. 🎜🎜Références : 🎜🎜🎜Documentation officielle CodeIgniter-Fonction d'assistance URL : https://codeigniter.com/user_guide/helpers/url_helper.html🎜🎜Documentation officielle CodeIgniter-Fonction d'assistance HTML : https://codeigniter.com/user_guide / helpers/html_helper.html🎜🎜

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!