首頁

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">

排版標題實用程式

排版標題工具是一組預先定義的內建類，使開發人員能夠為其網站或應用程式樣式化標題。您可以將這些類別新增至任何元素（除了入門 CSS 版式標題實用程序），並將其轉換為所需樣式的標題。

正如我們已經知道的，我們有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 id="Primer-CSS-Typography-Heading-Utilities"> 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 id="Primer-CSS-Typography-Heading-Utilities"> Primer CSS Typography Heading Utilities </h1>
   <div class="container">
      <h1 id="This-is-h-element-with-class-h"> This is h1 element with class "h6" </h1>
      <h2 id="This-is-h-element-with-class-h"> This is h2 element with class "h5" </h2>
      <h3 id="This-is-h-element-with-class-h"> This is h3 element with class "h4" </h3>
      <h4 id="This-is-h-element-with-class-h"> This is h4 element with class "h3" </h4>
      <h5 id="This-is-h-element-with-class-h"> This is h5 element with class "h2" </h5>
      <h6 id="This-is-h-element-with-class-h"> 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 id="Primer-CSS-Marketing-Typography-Heading-Utilities"> 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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除