Wie füge ich CSS-Stile im CI-Framework hinzu?

So führen Sie CSS-Stile in das CI-Framework ein

CSS (Cascading Style Sheets) spielt eine sehr wichtige Rolle im Webdesign. Es kann das Layout, den Stil und die dekorativen Effekte von Webseiten steuern. Bei der Entwicklung einer Website mit dem CodeIgniter (CI)-Framework ist die Einführung von CSS-Stylesheets ein wesentlicher Schritt. In diesem Artikel wird detailliert beschrieben, wie CSS-Stile in das CI-Framework eingeführt werden, und es werden spezifische Codebeispiele gegeben.

1. Erstellen Sie einen CSS-Ordner im CI-Framework

Zuerst müssen wir einen Ordner mit dem Namen „assets“ im Stammverzeichnis des CI-Frameworks erstellen, um alle statischen Ressourcendateien zu speichern. Erstellen Sie im Ordner „assets“ einen weiteren Ordner mit dem Namen „css“, um CSS-Dateien zu speichern. Dies kann die Dateistruktur klarer machen und eine einheitliche Verwaltung statischer Ressourcen erleichtern.

2. CSS-Stylesheet schreiben

Erstellen Sie eine Datei mit dem Namen „style.css“ im Ordner „css“ und schreiben Sie den entsprechenden CSS-Stylecode. Hier ist ein einfaches Beispiel:

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

Das Obige ist ein einfaches CSS-Stylesheet, das die Hintergrundfarbe, den Schriftstil, den Titel und die Absatzstile der Webseite definiert.

3. Einführung von CSS-Stilen in das CI-Framework

Im CI-Framework können Sie CSS-Stile einführen, indem Sie die Funktion base_url() in Verbindung mit dem Code link_tag() verwenden > Funktion. base_url()函数，配合link_tag()函数来引入CSS样式。

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

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

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

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

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

四、完整示例

以下是一个完整的示例，演示了Wie füge ich CSS-Stile im CI-Framework hinzu?：

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

Laden Sie zunächst in der Controller-Datei die vom CI-Framework benötigte Hilfsfunktion „URL“. Dies kann durch Hinzufügen des folgenden Codes in der Konstruktormethode des Controllers erreicht werden:

rrreee

Als nächstes müssen CSS-Stile vorhanden sein Einführung Führen Sie in der Ansichtsdatei das CSS-Stylesheet durch den folgenden Code ein:

rrreee
1. Dieser Code generiert einen korrekten CSS-Dateipfad basierend auf der Konfiguration des CI-Frameworks und bettet den Pfad in HTML ein.
2. 4. Vollständiges Beispiel

Das Folgende ist ein vollständiges Beispiel, das zeigt, wie CSS-Stile in das CI-Framework eingeführt werden: 🎜🎜🎜Erstellen Sie einen Ordner mit dem Namen „assets“ im Stammverzeichnis des CI-Frameworks. 🎜🎜Erstellen Sie einen Ordner namens „css“ im Ordner „assets“. 🎜🎜Erstellen Sie eine Datei mit dem Namen „style.css“ im Ordner „css“ und schreiben Sie den entsprechenden CSS-Stilcode. 🎜🎜Laden Sie die vom CI-Framework benötigte Hilfsfunktion „URL“ in die Controller-Datei. 🎜🎜In der Ansichtsdatei, in der CSS-Stile eingeführt werden müssen, führen Sie das CSS-Stylesheet über den folgenden Code ein: 🎜🎜rrreee🎜Durch die oben genannten Schritte haben wir CSS-Stile erfolgreich in das CI-Framework eingeführt und können sie in der Ansichtsdatei anwenden . 🎜🎜Zusammenfassung🎜🎜Die Einführung von CSS-Stylesheets in das CI-Framework ist sehr einfach. Sie müssen lediglich einen Ordner zum Speichern von CSS-Dateien erstellen und die Funktion link_tag() in der entsprechenden Ansichtsdatei verwenden, um CSS einzuführen Stile Oberfläche. Dies erleichtert die Verwaltung und Anwendung von CSS-Stilen und macht Webseiten schöner und lesbarer. 🎜🎜Referenzen: 🎜🎜🎜Offizielle Dokumentation von CodeIgniter – URL-Hilfsfunktion: https://codeigniter.com/user_guide/helpers/url_helper.html🎜🎜Offizielle Dokumentation von CodeIgniter – HTML-Hilfsfunktion: https://codeigniter.com/user_guide / helpers/html_helper.html🎜🎜

Das obige ist der detaillierte Inhalt vonWie füge ich CSS-Stile im CI-Framework hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!