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">
Typography 标题实用工具
Typography 标题实用工具是一系列预定义的内置类，可帮助开发者为其网站或应用程序设置标题样式。您可以将这些类添加到任何元素(<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 中显示了文本。
结论
在本文中，我们讨论了 Primer CSS 排版标题实用程序及其如何简化开发人员的工作。它通过使用预定义的类，使网页设计更加轻松。我们还了解了略有不同的"营销排版"。它帮助我们创建视觉上吸引人的产品落地页和广告。借助各种响应式设计功能，开发人员可以创建高质量、用户友好且可读性更高的网站。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
