📜  入门 CSS 排版标题实用程序

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

入门 CSS 排版标题实用程序

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

在本文中,我们将了解排版标题实用程序。就像在 HTML 中一样,我们使用

标签来创建标题,我们在 Primer CSS 中有标题实用程序来创建标题。在 Primer CSS 中,我们使用 .h1 – .h6 来更改元素的字体大小和粗细以匹配我们的标题样式。

班级:

  • h*:根据所需的字体大小,类别从 h1 到 h6 不等。

句法:

Content

* 可以根据需要替换为 1 到 6 的数字。

示例 1:在此示例中,我们将学习 h1、h2 和 h3 类。

HTML



    

  

    
        

GeeksforGeeks

        

Heading Utility

    
    

I am h1 class

       

I am h2 class

       

I am h3 class

  


HTML



    

  

    
        

GeeksforGeeks

        

Heading Utility

    
      

I am h4 class

       

I am h5 class

       

I am h6 class

  


输出:

示例 2:在本示例中,我们将学习 h4、h5 和 h6 类。

HTML




    

  

    
        

GeeksforGeeks

        

Heading Utility

    
      

I am h4 class

       

I am h5 class

       

I am h6 class

  

输出:

参考: https://primer.style/css/utilities/typography#heading-utilities