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 vonPrimer 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">
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 ) 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.
<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>
In diesem Beispiel zeigen wir Text in den Klassen h1–h6 des Titel-Dienstprogramms an.
Die chinesische Übersetzung vonWenn Sie diese Klassen auf ein beliebiges Überschriftenelement anwenden (z. B.
<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
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.
<div class= "h0-mktg"> </div>
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
