How to introduce another CSS file into a CSS file? (code example)-CSS Tutorial-php.cn

How to introduce another CSS file into a CSS file? (code example)

青灯夜游

Release： 2019-02-12 11:05:55

Original

11806 people have browsed it

We can use the @import rule to implement how to introduce another CSS file into a CSS file. The @import rule can import multiple CSS files into the main HTML file or the main CSS file. This article will give you a detailed introduction. ,I hope to be helpful.

How to introduce another CSS file into a CSS file? (code example)

@import rules

First let’s understand the @import rules.

@import rules are used to import one style sheet into another style sheet. This rule also supports media queries so that users can import media-related style sheets. The @import rule must be declared at the top of the document after any @charset declaration. [Video tutorial recommendation: CSS tutorial]

Features of @import:

● @import rules are used to import style sheets into HTML pages or Other style sheets.

● @import rules are also used to add media queries, so import is media-dependent.

● @import rules are always declared at the top of the document.

Basic sentence pattern:

@import url | string list-of-mediaqueries;

Copy after login

url | string: Indicates the location of the resource to be imported, which can be relative or absolute.

list-of-mediaqueries: Determines the application of CSS rules defined in URL links.

Code Example

Let’s use examples to show you how to introduce another CSS file into a CSS file.

HTML part: Create a file named index.html

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" href="style1.css" /><!--在HTML文件中导入style1.css文件-->
<head>
<body>
<div class="box">
<h1>PHP中文网</h1>
<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
</div>
</body>
</html>

Copy after login

CSS part:

##style1 .css file:

/*导入另一个CSS文件 */
@import "style2.css"; /* 或者@import url(style2.css);*/ 
.box{
width: 400px;
margin: 100px auto;
}
h1 { 
     color:red;  
     text-align: center;  
 } 
   
p { 
     color:black; 
     padding: 10px;
     background-image: linear-gradient(to right, #fbd6d3, #ff1200); 
     position:static; 
       
 }

Copy after login

Output: Importing another CSS file (style2.css) without using the @import rule

How to introduce another CSS file into a CSS file? (code example)

style2.css file:

 body { 
    background:gainsboro; 
        opacity: 0.5; 
} 
h1{
color: #008000;
}

Copy after login

Output: Use the @import rule in the style1.css file to import the style2.css file

How to introduce another CSS file into a CSS file? (code example)

Note: There are two ways to use the @import rule to import another CSS style sheet: @import url(style2.css); and @import "style2.css";

Note: When using the @import rule to import another CSS style sheet, you need to pay attention to the path of the style sheet.

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to introduce another CSS file into a CSS file? (code example). For more information, please follow other related articles on the PHP Chinese website!