📌  相关文章
📜  CSS 的类型（层叠样式表）

📅  最后修改于: 2021-09-02 03:18:47             🧑  作者: Mango

层叠样式表(CSS)用于在包含 HTML 元素的网页中设置样式。它设置网页元素的背景颜色、字体大小、字体系列、颜色等属性。
下面给出了三种类型的 CSS：

  • 内联 CSS
  • 内部或嵌入式 CSS
  • 外部 CSS

内联 CSS：内联 CSS 在 body 部分包含的 CSS 属性与元素一起被称为内联 CSS。这种样式是在 HTML 标签中使用 style 属性指定的。

例子： 



    
        Inline CSS
    
      
    
        

            GeeksForGeeks
        

    
         

输出：
内联 CSS 属性示例

内部或嵌入式 CSS：当单个 HTML 文档必须具有唯一样式时，可以使用此选项。 CSS 规则集应该位于头部部分的 HTML 文件中，即 CSS 嵌入在 HTML 文件中。
例子： 



    
        Internal CSS
        
    
    
        

            
GeeksForGeeks

              
            

                A computer science portal for geeks
            

        

    
              

输出：
嵌入 CSS

外部 CSS：外部 CSS 包含单独的 CSS 文件，该文件仅包含借助标签属性(例如 class、id、heading 等)的样式属性。 CSS 属性写在一个单独的文件中，扩展名为 .css，应该使用链接标签链接到 HTML 文档。这意味着对于每个元素，样式只能设置一次，并且将应用于整个网页。

示例：下面给出的文件包含 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 文件

  • link标签用于链接外部样式表和 html 网页。
  • href属性用于指定外部样式表文件的位置。 


    
        
    
  
    
        

            
GeeksForGeeks

            

                A computer science portal for geeks
            

        

    

输出：
外部CSS

CSS 的属性：内联 CSS 具有最高优先级，然后是内部/嵌入式，其次是外部 CSS，其优先级最低。可以在一页上定义多个样式表。如果对于 HTML 标签，样式定义在多个样式表中，则将遵循以下顺序。

  • 由于内联具有最高优先级，因此在内部和外部样式表中定义的任何样式都会被内联样式覆盖。
  • Internal 或 Embedded 在优先级列表中排名第二，并覆盖外部样式表中的样式。
  • 外部样式表的优先级最低。如果内联或内部样式表中没有定义样式，则将外部样式表规则应用于 HTML 标记。