📌  相关文章
📜  如何将一个 CSS 文件包含在另一个文件中?

📅  最后修改于: 2021-10-29 06:34:10             🧑  作者: Mango

是否可以将一个 CSS 文件包含在另一个文件中?
是的,可以将一个 CSS 文件包含在另一个文件中,并且可以多次完成。此外,在主 HTML 文件或主 CSS 文件中导入多个 CSS 文件。可以通过使用@import 关键字来完成。

示例 1:

  • HTML 部分:文件名为index.html
     
     
        
        
        
         
          
         
            
              

    GeeksforGeeks

            
    GeeksforGeeks: It is a computer science         portal. It is an educational website. Prepare for the         Recruitment drive of product based companies like          Microsoft, Amazon, Adobe etc with a free online placement          preparation course.         
              
                                            

    输出:不使用 CSS 文件

  • CSS 部分 1:文件名为style1.css
    
    @import "style2.css";
       
     h1 {
         color:green;   
     }
       
    .css1 {
         color:black;
         background-image: linear-gradient(to right, #DFF1DF, #11A00C);
         position:static;   
     }
    

    输出:使用 style1.css 文件而不导入第二个 CSS 文件 (style2.css)。

  • CSS section2:文件名为style2.css
    body {
        background:black;
            opacity: 0.5;
    }
    

    输出:使用@import 关键字将style2.css 文件导入style1.css 文件后。

注意:可以使用一个 CSS 文件导入多个 CSS 文件。

示例 2:

  • HTML 部分:文件名为Example.html
     
     
         
             
         
         
            

    GeeksforGeeks

              
                            
                                              

    输出:不使用 CSS 文件

  • CSS Section1:文件名为style1.css
    @import "style2.css";
    body { 
        border:black; 
        justify-content: center; 
        text-align: center; 
    }                 
    

    输出:使用 style1.css 文件而不导入 style2.css 文件。

  • CSS Section2:文件名为style2.css
    h1 { 
        color:green;
        text-decoration: underline overline;;
    }                    
    

    输出:使用两个 CSS 文件(style1 和 style2)后。

注意:有两种不同的方法可以使用 @import url(“style2.css”); 将 CSS 文件导入到另一个文件中。或@import “style2.css”;或直接在