資料結構
網路
關係資料庫管理系統 (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 次瀏覽
