Heim > Artikel > Web-Frontend > Erste Schritte mit dem CSS Typography Title Utility

Erste Schritte mit dem CSS Typography Title Utility

WBOYnach vorne: 2023-09-04 08:01:131081Durchsuche

入门 CSS 版式标题实用程序

Typografie ist ein wichtiger Teil bei der Erstellung von Websites und Apps. Es wird hauptsächlich dazu verwendet, dem Benutzer den größten Teil des Inhalts anzuzeigen. Es bestimmt den Ton und die Tonalität des Inhalts Ihrer Website.

Es ist also wahrscheinlich, dass es sich auf das gesamte Benutzererlebnis auswirkt. Der Titel einer Website ist der Anziehungspunkt für jeden Benutzer. Daher ist es sehr wichtig, dass es perfekt aussieht, um die Lesbarkeit Ihrer Website oder App zu verbessern. In diesem Artikel erstellen wir einen Header mit Primer CSS.

Die chinesische Übersetzung von

Primer CSS

lautet:

Primer CSS

Primer CSS ist ein vielseitiges und beliebtes CSS-Framework, das Entwicklern benutzerfreundliche Typografiefunktionen bietet. Es handelt sich um ein Open-Source-Designsystem, das von GitHub entwickelt wurde. Durch die Verwendung von Typografie-Dienstprogrammen verbessern Sie das visuelle Erscheinungsbild und die Konsistenz Ihrer Website.

Mit dem Typesetting Title Utility können Entwickler die Schriftgröße, Farbe und Stärke von Titeln entsprechend den Anforderungen auswählen.

Um Primer CSS in Ihren Webseiten zu verwenden, können Sie es von npm installieren -

npm install --save @primer/css

In diesem Artikel haben wir CDN-Links verwendet.

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">

Dienstprogramm zum Setzen von Titeln

Das Typographic Title Tool besteht aus einer Reihe vordefinierter integrierter Klassen, mit denen Entwickler Titel für ihre Website oder Anwendung gestalten können. Sie können diese Klassen zu jedem Element (außer a1f02c36ba31691bcfe87b2722de723b) hinzufügen und es in einen Header im gewünschten Stil umwandeln.

Wie wir bereits wissen, haben wir 6 Header-Klassen unterschiedlicher Größe. Sie beginnen von h1 bis h6. Die Größen nehmen in der gleichen Reihenfolge ab.

Grammatik

<div class= "h1"> </div>

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

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

In diesem Beispiel zeigen wir Text in den Klassen h1–h6 des Titel-Dienstprogramms an.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Wenn Sie diese Klassen auf ein beliebiges Überschriftenelement anwenden (z. B. 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da usw.), folgt es den Stilregeln der Klasse. Dies bedeutet, dass die Schriftgröße der entsprechenden Titel-Dienstprogrammklasse befolgt wird. Lassen Sie es uns anhand eines Beispiels verstehen.

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

Hier wenden wir die h6-Klasse auf das

-Element an. Aber wie wir sehen können, basiert die Schriftgröße auf der h6-Klasse. Ebenso haben wir die Elemente h2, h3, h4, h5 und h6.

Tool zum Setzen von Marketingtiteln

Marketing-Typografie-Tools, die in Primer CSS verwendet werden, ermöglichen Marketingentwicklern und -designern die Erstellung visuell ansprechender Markenmarketinginhalte wie Produkt-Landingpages, Anzeigen und mehr.

Es repräsentiert die Markenidentität und Vision für Kunden. Primer CSS definiert für solche Zwecke auch eine Reihe von Klassen. Diese Klassen sind responsiv, aber in gewisser Weise unterschiedlich. Sie werden als definierte Marketing-Schriftarten verwendet.

Grammatik

<div class= "h0-mktg"> </div>

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Im Marketing Typography Tool haben wir 7 Titelklassen. Sie sind h0-mktg bis h6-mktg. Sehen wir uns ein Beispiel an −

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

In diesem Beispiel zeigen wir Text in den Klassen h0.mktg -h6.mktg der Marketing Heading Utilities von Primer CSS.

Fazit

In diesem Artikel haben wir über Primer CSS Typography Heading Utilities gesprochen und wie sie das Leben von Entwicklern vereinfachen. Es erleichtert das Webdesign durch die Verwendung vordefinierter Klassen. Wir sehen auch leicht unterschiedliche Marketing-Layouts. Es hilft uns, optisch ansprechende Produkt-Landingpages und Anzeigen zu erstellen. Mit verschiedenen Responsive-Design-Funktionen können Entwickler hochwertige und benutzerfreundliche Websites mit verbesserter Lesbarkeit erstellen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit dem CSS Typography Title Utility. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Schneefall-Animationseffekt mit CSSNächster Artikel：Schneefall-Animationseffekt mit CSS

In Verbindung stehende Artikel

Mehr sehen