How to add CSS styles in CI framework?

How to introduce CSS styles into the CI framework

CSS (cascading style sheets) plays a very important role in web design. It can control the layout of web pages, style and decorative effects. When developing a website using the CodeIgniter (CI) framework, introducing CSS style sheets is an essential step. This article will introduce in detail how to introduce CSS styles in the CI framework and give specific code examples.

1. Create a CSS folder in the CI framework

First, we need to create a folder named "assets" in the root directory of the CI framework to store all static resource. Create another folder named "css" in the "assets" folder to store CSS files. This can make the file structure clear and facilitate unified management of static resources.

2. Write a CSS style sheet

Create a file named "style.css" in the "css" folder and write the corresponding CSS style code. Here is a simple example:

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

The above is a simple CSS style sheet that defines the background color, font style, title and paragraph styles of the web page.

3. Introducing CSS styles into the CI framework

In the CI framework, you can use the base_url() function in conjunction with link_tag() function to introduce CSS styles.

First, in the controller file, load the auxiliary function "URL" required by the CI framework. This can be achieved by adding the following code in the constructor method of the controller:

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

Connect Next, in the view file where CSS styles need to be introduced, introduce the CSS style sheet through the following code:

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

This code will generate a correct CSS file path based on the configuration of the CI framework, and embed the path into in HTML.

4. Complete example

The following is a complete example that demonstrates how to introduce CSS styles into the CI framework:

1. Create in the root directory of the CI framework A folder named "assets".
2. Create a folder named "css" in the "assets" folder.
3. Create a file named "style.css" in the "css" folder and write the corresponding CSS style code.
4. Load the auxiliary function "URL" required by the CI framework in the controller file.
5. In the view file that needs to introduce CSS styles, introduce the CSS style sheet through the following code:

<title>CI框架引入CSS样式示例</title>
<?php echo link_tag('assets/css/style.css'); ?>


<h1 id="Welcome-to-CodeIgniter">Welcome to CodeIgniter!</h1>
<p>This is an example demonstrating how to include CSS stylesheet in CodeIgniter framework.</p>

Through the above steps, we successfully introduced CSS styles into the CI framework , and can apply them in view files.

Summary

Introducing CSS style sheets into the CI framework is very simple. You only need to create a folder to store CSS files and use link_tag()# in the corresponding view file. ##Function to introduce CSS style sheet. This makes it easy to manage and apply CSS styles, making web pages more beautiful and readable.

References:

CodeIgniter official documentation - URL helper function: https://codeigniter.com/user_guide/helpers/url_helper.html
1. CodeIgniter official documentation - HTML helper function: https://codeigniter.com/user_guide/helpers/html_helper.html

The above is the detailed content of How to add CSS styles in CI framework?. For more information, please follow other related articles on the PHP Chinese website!