recherche

Maison  >  Article  >  interface Web  >  Premiers pas avec l'utilitaire de titre de typographie CSS

Premiers pas avec l'utilitaire de titre de typographie CSS

WBOY
WBOYavant
2023-09-04 08:01:131117parcourir

入门 CSS 版式标题实用程序

La typographie est un élément important lors de la création de sites Web et d'applications. Il est principalement utilisé pour afficher la plupart du contenu à l’utilisateur. Il détermine le ton et le ton du contenu de votre site Web.

Cela est donc susceptible d’affecter l’expérience utilisateur globale. Le titre de n’importe quel site Web est le centre d’attraction de tout utilisateur. Il est donc très important qu’il soit parfait pour améliorer la lisibilité de votre site Web ou de votre application. Dans cet article, nous allons créer un en-tête à l'aide de Primer CSS.

La traduction chinoise de

Primer CSS

est :

Primer CSS

Primer CSS est un framework CSS polyvalent et populaire qui offre aux développeurs des fonctionnalités de typographie faciles à utiliser. Il s'agit d'un système de conception open source créé par GitHub. L’utilisation d’utilitaires de typographie améliorera l’apparence visuelle et la cohérence de votre site Web.

Typesetting Title Utility permet aux développeurs de sélectionner la taille de la police, la couleur et le poids des titres selon les exigences.

Pour utiliser Primer CSS dans vos pages Web, vous pouvez l'installer depuis npm -

npm install --save @primer/css

Dans cet article, nous avons utilisé des liens CDN. 

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

Utilitaire de composition de titre

L'outil de titre typographique est un ensemble de classes intégrées prédéfinies qui permettent aux développeurs de styliser les titres de leur site Web ou de leur application. Vous pouvez ajouter ces classes à n'importe quel élément (sauf a1f02c36ba31691bcfe87b2722de723b) et le convertir en en-tête dans le style souhaité.

Comme nous le savons déjà, nous avons 6 classes d'en-tête de tailles différentes. Ils commencent de h1 à h6. Les tailles diminuent dans le même ordre.

Grammaire

<div class= "h1"> </div>
La traduction chinoise de

Exemple

est :

Exemple

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

Dans cet exemple, nous affichons le texte dans les classes h1-h6 de l'utilitaire de titre.

La traduction chinoise de

Exemple

est :

Exemple

Si vous appliquez ces classes à n'importe quel élément de titre (par exemple 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da, etc.), il suivra les règles de style de la classe. Cela signifie que la taille de police de la classe utilitaire de titre correspondante sera suivie. Comprenons à travers un exemple. 

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

Ici, nous appliquons la classe h6 à l'élément

. Mais comme nous pouvons le voir, la taille de la police est basée sur la classe h6. De même, nous avons les éléments h2, h3, h4, h5 et h6.

Outil de composition marketing des titres

Les outils de typographie marketing utilisés dans Primer CSS permettent aux développeurs et concepteurs marketing de créer un contenu marketing de marque visuellement attrayant, tel que des pages de destination de produits, des publicités, etc.

Il représente l'identité et la vision de la marque pour les clients. Primer CSS définit également un ensemble de classes à ces fins. Ces cours sont réactifs mais différents d'une certaine manière. Elles sont utilisées comme polices marketing définies.

Grammaire

<div class= "h0-mktg"> </div>
La traduction chinoise de

Exemple

est :

Exemple

Dans Marketing Typography Tool, nous avons 7 classes de titres. Ils sont h0-mktg à h6-mktg. Voyons un exemple −

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

Dans cet exemple, nous affichons le texte dans les classes h0.mktg -h6.mktg des utilitaires de titre marketing de Primer CSS.

Conclusion

Dans cet article, nous avons discuté des utilitaires de titre de typographie Primer CSS et de la manière dont ils simplifient la vie des développeurs. Il facilite la conception Web en utilisant des classes prédéfinies. Nous voyons également des présentations marketing légèrement différentes. Cela nous aide à créer des pages de destination et des publicités de produits visuellement attrayantes. Grâce à diverses fonctionnalités de conception réactive, les développeurs peuvent créer des sites Web de haute qualité et conviviaux avec une lisibilité améliorée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Effet d'animation de chutes de neige en utilisant CSSArticle suivant：Effet d'animation de chutes de neige en utilisant CSS

Articles Liés

Voir plus