Primer CSS排版标题工具

排版是网站和应用程序创建过程中的必要组成部分。它主要用于显示大部分用户的内容。它决定了网站内容的语调和氛围。

因此，它很可能会影响整体用户体验。在任何网站中，标题是吸引用户注意力的中心。因此，它非常重要，以确保其外观完美，增加网站或应用程序的可读性。在本文中，我们将使用Primer CSS来创建标题。

Primer CSS

Primer CSS是一种多用途且流行的CSS框架，为开发人员提供易于使用的排版特性。它是由GitHub设计系统创建的开源项目。使用排版工具可以提升您的网站的可视外观和一致性。

通过排版标题工具，开发人员可以根据需求选择标题的字体大小、颜色和粗细。

要在您的网页中使用Primer CSS，您可以从npm安装它 –

npm install --save @primer/css

在本文中，我们使用了CDN链接。

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">

排版标题工具

排版标题工具是一个预定的内置类集合，使开发人员能够为他们的网站或应用程序设置标题样式。您可以将这些类添加到任何元素（除了<img>）上，并将其转换为所需样式的标题。

正如我们已经知道的那样，我们有6个不同尺寸的标题类。从h1到h6，尺寸按照相同的顺序递减。

语法

<div class= "h1"> </div>

示例

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      h1 {
         color: orange;
         text-decoration: underline;
         font-family: Calibri;
      }
   </style>
</head>
<body>
   <h1> Primer CSS Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of heading utilities as provided by Primer CSS. <p class="h1"> This is the heading of class "h1" </p>
      <p class="h2"> This is the heading of class "h2" </p>
      <p class="h3"> This is the heading of class "h3" </p>
      <p class="h4"> This is the heading of class "h4" </p>
      <p class="h5"> This is the heading of class "h5" </p>
      <p class="h6"> This is the heading of class "h6" </p>
   </div>
</body>
</html>

在这个示例中，我们展示了使用标题实用工具的h1-h6类的文本。

示例

如果您将这些类应用于任何标题元素（例如<h1>，<h2>等），它将遵循类的样式规则。这意味着将遵循相应标题实用程序类的字体大小。让我们用一个示例来理解这个。

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: Georgia;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Heading Utilities </h1>
   <div class="container">
      <h1 class="h6"> This is h1 element with class "h6" </h1>
      <h2 class="h5"> This is h2 element with class "h5" </h2>
      <h3 class="h4"> This is h3 element with class "h4" </h3>
      <h4 class="h3"> This is h4 element with class "h3" </h4>
      <h5 class="h2"> This is h5 element with class "h2" </h5>
      <h6 class="h1"> This is h6 element with class "h1" </h6>
   </div>
</body>
</html>

在这里，我们将h6类应用于<h1>元素。但是我们可以看到，字体大小根据h6类来调整。同样，我们还有h2，h3，h4，h5和h6元素。

市场营销排版标题工具

Primer CSS中的市场营销排版工具使市场营销开发人员和设计师能够创建视觉吸引人的品牌营销内容，如产品落地页、广告等。

它代表了品牌的身份和愿景，Primer CSS也为这些目的定义了一组类。它们是响应式的，但在某种程度上与其他类略有不同。它们按照定义的市场营销字体进行调整。

语法

<div class= "h0-mktg"> </div>

示例

在营销排版工具中，我们有7个标题类。它们是 h0-mktg 到 h6-mktg 。让我们看一个示例：

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      CSS code * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }
   </style>   
</head>
<body>
   <h1 class="heading"> Primer CSS Marketing Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of marketing heading utilities as provided by Primer CSS. <p class="h0-mktg"> This is the heading </p>
      <p class="h1-mktg"> This is heading of class "h1-mktg" </p>
      <p class="h2-mktg"> This is the heading of class "h2-mktg" </p>
      <p class="h3-mktg"> This is the heading of class "h3-mktg" </p>
      <p class="h4-mktg"> This is the heading of class "h4-mktg" </p>
      <p class="h5-mktg"> This is the heading of class "h5-mktg" </p>
      <p class="h6-mktg"> This is the heading of class "h6-mktg" </p>
   </div>
</body>
</html>

在这个示例中，我们展示了在Primer CSS的营销标题工具中 h0.mktg-h6.mktg 的类中显示的文本。