Primer CSS

排版标题实用程序

语法

Example

示例

营销排版标题工具

结论

首页

web前端

css教程

入门 CSS 版式标题实用程序

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 am 08:01 AM

入门 CSS 版式标题实用程序

排版是创建网站和应用程序期间的重要组成部分。它主要用于向用户显示大部分内容。它决定了您网站内容的基调和基调。

所以，它很可能会影响整体用户体验。任何网站中的标题都是吸引任何用户的中心。因此，它看起来完美以提高网站或应用程序的可读性非常重要。在本文中，我们将使用 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">

登录后复制

排版标题实用程序

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

正如我们已经知道的，我们有6个不同大小的标题类。它们从h1到h6开始。大小按照相同的顺序递减。

语法

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

登录后复制

Example

的中文翻译为：

示例

<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 类中显示文本。

Example

的中文翻译为：

示例

如果您将这些类应用于任何标题元素（例如

，

等），它将遵循类的样式规则。这意味着将遵循相应标题实用类的字体大小。让我们通过一个例子来理解。

<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 类应用于

元素。但正如我们所看到的，字体大小是根据 h6 类的。同样，我们有 h2、h3、h4、h5 和 h6 元素。

营销排版标题工具

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

它代表了品牌身份和对客户的愿景。Primer CSS也为此类目的定义了一组类。这些类是响应式的，但在某种程度上有所不同。它们按照定义的营销字体进行使用。

语法

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

登录后复制

Example

的中文翻译为：

示例

在市场营销排版工具中，我们有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的Marketing Heading Utilities的h0.mktg -h6.mktg类中的文本。

结论

在本文中，我们讨论了 Primer CSS Typography Heading Utilities 以及它如何简化开发人员的工作。通过使用预定义的类，它使网页设计变得更加容易。我们还看到营销版式略有不同。它帮助我们创建具有视觉吸引力的产品登陆页面和广告。借助各种响应式设计功能，开发人员可以制作出高质量且用户友好的网站，并提高了可读性。

以上是入门 CSS 版式标题实用程序的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn