入门 CSS 标签

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Primer CSS提供标签，为用户提供一些元数据或指示项目的状态。标签有 3 种类型，标签表示元数据，状态表示状态，计数器表示项目数量。在本文中，我们将讨论提供一些元数据的标签。连同例子。

Primer CSS Labels 使用的类：

• 标签：该类用于定义标签。
• Label–primary：该类用于定义具有更强边框的主标签。
• Label–secondary：此类用于定义具有更微妙文本颜色的辅助标签。
• Label–accent：该类用于定义蓝色标签。
• Label–success：该类用于定义绿色标签。
• Label–attention：这个类用来定义一个金色的标签。
• Label–severe：此类用于定义棕色标签。
• Label–danger：该类用于定义红色标签。
• Label–sponsors：该类用于定义紫色标签。
• Label–large：此类用于定义具有一些额外填充的标签。
• Label–inline：该类用于定义内联标签。

句法：

    ...

示例 1：下面的示例演示了使用State-primary和State-secondary类的 Primer CSS 标签的使用。

HTML

  

    
    

  

  
    
 GeeksforGeeks 
    
 Primer CSS Labels 
  
    
      Primary Label
    
  
    
      Secondary Label
    
  

  

输出：

入门 CSS 标签

示例 2：下面的示例演示了如何使用不同颜色的标签来使用 Primer CSS 标签。

HTML

  

  
  

  

    
      
GeeksforGeeks
      
 Primer CSS Labels 
        
      
          Blue Color Label
      
      
          Green Color Label
      
      
          Red Color Label
      
      
          Purple Color Label
      
    

  

输出：

入门 CSS 标签

示例 3：下面的示例演示了使用大尺寸标签使用 Primer CSS 标签。

HTML

  

    
    

  

  
    
GeeksforGeeks
    
Primer CSS Labels
  
    Default Label
    
      Large sized Label
    
  

  

输出：

入门 CSS 标签

示例 4：下面的示例演示了如何使用内联标签使用 Primer CSS 标签。

HTML

  

  
  

  

  
    
 GeeksforGeeks 
    
 Primer CSS Labels 
  
    

      GeeksforGeeks is a Computer Science Portal 
      for geeks 
      of india as well as overseas.
    
  
  

  

输出：

入门 CSS 标签

参考： https://primer.style/css/components/labels#labels