Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Heading Utilities se utiliza para cambiar el tamaño y el peso de la fuente de un elemento en las páginas de marketing. Podemos usar las clases de h0-mktg a h6-mktg para cambiar el tamaño y el peso de la fuente. En este artículo, discutiremos las utilidades de encabezado CSS de Primer.
Primer CSS Heading Utilidades Clases:
- h*-mktg: Las clases varían de h0 a h6 para cambiar el tamaño y el peso de la fuente.
Sintaxis:
<p class="h*-mktg">
...
</p>
Ejemplo 1: El siguiente ejemplo demuestra las utilidades de encabezado CSS de Primer utilizando las clases h0-mktg, h1-mktg y h2-mktg .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Heading Utilities </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Heading Utilities </h3> <br> <p class="h0-mktg"> GeeksforGeeks 0 </p> <p class="h1-mktg"> GeeksforGeeks 1 </p> <p class="h2-mktg"> GeeksforGeeks 2 </p> </div> </body> </html>
Producción:
Introducción a las utilidades de encabezado CSS
Ejemplo 2: El siguiente ejemplo demuestra las utilidades de encabezado CSS de Primer utilizando las clases h3-mktg, h4-mktg, h5-mktg y h6-mktg .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Heading Utilities </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Heading Utilities </h3> <br> <p class="h3-mktg"> GeeksforGeeks 3 </p> <p class="h4-mktg"> GeeksforGeeks 4 </p> <p class="h5-mktg"> GeeksforGeeks 5 </p> <p class="h6-mktg"> GeeksforGeeks 6 </p> </div> </body> </html>
Producción:
Introducción a las utilidades de encabezado CSS
Referencia: https://primer.style/css/utilities/marketing-type#heading-utilities
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA