資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究Primer CSS 排版型別比例實用程式
Primer CSS 是一個由各種 GitHub 貢獻者共同開發的 CSS 框架。其元件之一是排版，它使開發人員能夠為網站的書面內容設定樣式。透過將這些實用程式類應用於 HTML 元素，我們可以輕鬆自定義應用程式的視覺外觀。本文將討論 Primer CSS 提供的型別比例實用程式及其在網頁中的使用方法。
什麼是型別比例實用程式？
型別比例實用程式是屬性的集合，有助於在整個網站中建立正確的排版。它包含一系列預定義的內建字型大小和行高，可以應用於網頁上的不同 HTML 元素。
基本上，它可以正確估算文字元素之間的比例間距和大小，以便它們在整個網站上看起來一致。這使得網站易於閱讀，並對使用者更有吸引力。
字型大小實用程式
在使用 Primer CSS 中的任何類之前，我們必須從 npm 安裝它：
npm install --save @primer/css
或者在 HTML 程式碼中使用 CDN 連結：
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
在型別比例實用程式中，首先，我們有文字的字型大小。為此，我們有 6 個類。它們是 **.f1 – .f6**，大小逐漸減小。
語法
<div class= "f1"> </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;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1>
<div class="container"> Following we have different classes of type scale utilities as provided by Primer CSS. <p class="f1"> This is the text. It displays class "f1" </p>
<p class="f2"> This is the text. It displays class "f2" </p>
<p class="f3"> This is the text. It displays class "f3" </p>
<p class="f4"> This is the text. It displays class "f4" </p>
<p class="f5"> This is the text. It displays class "f5" </p>
<p class="f6"> This is the text. It displays class "f6" </p>
</div>
</body>
</html>
在這裡，我們以型別比例實用程式的 **f1-f6** 類顯示了文字。
字型粗細實用程式
對於淺色字型粗細，Primer CSS 允許有限的範圍。我們可以將字型粗細減小到 f3（即 20px）。這是因為隨著尺寸減小，較淺的字型粗細會使文字難以閱讀。因此，我們只有 5 個類用於此。
語法
<div class= "f3-light"> </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;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1>
<div class="container"> Following we have different classes of type scale utilities as provided by Primer CSS. <p class="f1-light"> This is the text. It displays class "f1-light" </p>
<p class="f2-light"> This is the text. It displays class "f2-light" </p>
<p class="f3-light"> This is the text. It displays class "f3-light" </p>
<p class="f0-light"> This is the text. It displays class "f0-light" </p>
<p class="f00-light"> This is the text. It displays class "f00-light" </p>
</div>
</body>
</html>
行高實用程式
我們可以透過使用這些類來更改元素之間的行高。我們有 3 個類，如下例所示。
示例
<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: sans-serif;
}
.container {
width: 30%;
}
</style>
</head>
<body>
<h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1> Following we have different classes of type scale utilities as provided by Primer CSS. <div class="container">
<p class="lh-default"> This is the text. It displays class "lh-default". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
<p class="lh-condensed"> This is the text. It displays class "lh-condensed". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
<p class="lh-condensed-ultra"> This is the text. It displays class "lh-condensed-ultra". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
</div>
</body>
</html>
在這裡，我們有不同行高的段落。
**注意** - 我們還有另一個類 **lh-0**，它將所需元素的垂直行高設定為 **0**。這可以用於不包含任何文字的元素。
營銷型別比例實用程式
用於營銷材料（如產品登陸頁面、廣告等）的型別比例實用程式具有略微不同的字型大小和字型粗細。
示例
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<style>
* {
margin: 10px;
padding: 0;
letter-spacing: 1px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
}
</style>
<body>
<div class="container">
<h1 class="heading"> Primer CSS Marketing Typography Type Scale Utilities </h1> Following we have different classes of marketing type scale utilities as provided by Primer CSS. <p class="f0-mktg"> This is the text. It displays class "f0-mktg" </p>
<p class="f1-mktg"> This is the text. It displays class "f2-mktg" </p>
<p class="f2-mktg"> This is the text. It displays class "f2-mktg" </p>
<p class="f3-mktg"> This is the text. It displays class "f3-mktg" </p>
<p class="f4-mktg"> This is the text. It displays class "f4-mktg" </p>
<p class="f5-mktg"> This is the text. It displays class "f5-mktg" </p>
<p class="f6-mktg"> This is the text. It displays class "f6-mktg" </p>
</div>
</body>
</html>
結論
在本文中，我們瞭解了 Primer CSS 為網站以及登陸頁面等營銷產品提供的型別比例實用程式。使用這些類可以節省大量時間，並使您的網站看起來專業且一致。
更新於： 2023年4月28日
142 次瀏覽
廣告