数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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>
示例
<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 类中的文本。
示例
如果您将这些类应用于任何标题元素（例如`
<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 类应用于`
营销排版标题实用程序
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` 类中的文本。
结论
在本文中，我们讨论了 Primer CSS 排版标题实用程序以及它如何简化开发人员的工作。它通过使用预定义的类使 Web 设计更容易。我们还了解了略有不同的营销排版。它帮助我们创建视觉上吸引人的产品落地页和广告。凭借各种响应式设计功能，开发人员可以创建高质量且用户友好的网站，并提高可读性。
85 次浏览
