📌  相关文章
📜  包含 CSS 文件的最佳方法是什么？为什么使用@import？

📅  最后修改于: 2022-05-13 01:56:19.284000             🧑  作者: Mango

包含 CSS 文件的最佳方法是什么？为什么使用@import？

CSS 属性可以通过多种不同的方式包含在 HTML 页面中。 HTML 文档根据要包含的样式表中的信息进行格式化。
有很多方法可以包含下面列出的 CSS 文件：

  • 外部样式表（使用 HTML 标签）：外部 CSS 包含单独的 CSS 文件，该文件仅包含样式属性，并借助标签属性（例如 class、id、heading 等）。 CSS 属性写在一个单独的文件中，扩展名为 .css，应该使用链接标签链接到 HTML 文档。这意味着对于每个元素，样式只能设置一次，并且将应用于整个网页。链接标签用于链接外部样式表和 html 网页。
  • 外部样式表（使用@import At-Rule）： At-rule 方法必须包含在
  • 内部样式表（使用
  • 内联样式内联 CSS 在正文部分中包含与元素相连的 CSS 属性，称为内联 CSS。这种样式是在 HTML 标记中使用 style 属性指定的。它用于为单个元素应用独特的样式。 
Geeksforgeeks

最佳方法：外部样式表（使用 HTML 标签）是用于链接元素的最佳方法。跨不同页面维护和重用 CSS 文件既简单又高效。 标签放置在 HTML 元素中。为级联样式表 属性指定媒体类型=“text/css”，该属性用于忽略浏览器不支持的样式表类型。
示例 1：下面给出的文件包含 CSS 属性。此文件以 .css 扩展名保存。例如：geeks.css 

body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.GFG {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#geeks {
    font-style:bold;
    font-size:20px;
}
html


    
        
    
    
        

        
GeeksForGeeks

        
A computer science portal for geeks

  
        

    

html


    
        Internal CSS
        
    
    
        

        
GeeksForGeeks

        
A computer science portal for geeks

  
        

    

html


    
        Inline CSS
    
     
    
        

        GeeksForGeeks

  
    

html



    WebPage
    

 

    
GeeksforGeeks

     

A computer science portal for geeks

  

html


     

    @import property
     
    

 

    

         
        
GeeksforGeeks

         
        
External style sheet (Using @import At-rule)

    


 

输出：

外部CSS

示例 2：此示例描述了内部或嵌入式 CSS。

html 



    
        Internal CSS
        
    
    
        

        
GeeksForGeeks

        
A computer science portal for geeks

  
        

    
                    

输出：

内部风格

示例 3：此示例描述了内联 CSS。

html 



    
        Inline CSS
    
     
    
        

        GeeksForGeeks

  
    
                    

输出：

内联 CSS

@import 规则： @import 规则用于将一个样式表导入另一个样式表。此规则还支持媒体查询，以便用户可以导入依赖于媒体的样式表。 @import 规则必须在任何@charset 声明之后的文档顶部声明。
@import 的特点：

  • @import at 规则用于将样式表导入 HTML 页面或另一个样式表。
  • @import at-rule 也用于添加媒体查询，因此 import 是依赖于媒体的。
  • 它总是在文档的顶部声明。

句法： 

@import url|string list-of-mediaqueries;

属性值：

  • 网址| 字符串：一个 url 或一个字符串，表示要导入的资源的位置。 url 可以是相对的或绝对的。
  • list-of-mediaqueries：媒体查询列表以链接 URL 中定义的 CSS 规则的应用为条件。

示例 1：考虑如下所示的两个 CSS 文件。

  • icss.css 
@import url("i1css.css");
h1 {
    color: #00ff00;
}
  • i1css.css 
h1 {
   text-decoration: underline;
   font-size:60px;
}

p {
   padding-left: 20px;
   font-size: 60px;
}

html 




    WebPage
    

 

    
GeeksforGeeks

     

A computer science portal for geeks

  

                    

输出：

示例 2：

html 



     

    @import property
     
    

 

    

         
        
GeeksforGeeks

         
        
External style sheet (Using @import At-rule)

    


 
                   

输出：

支持的浏览器：

  • 谷歌浏览器 1.0
  • 互联网浏览器 5.5
  • 火狐1.0
  • 歌剧 3.5
  • Safari 1.0