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.
En este artículo, aprenderemos sobre las utilidades de encabezado de tipografía . Al igual que en HTML, usamos etiquetas <h1> a <h6> para crear encabezados, tenemos utilidades de encabezado en Primer CSS para crear encabezados. En Primer CSS, usamos .h1 – .h6 para cambiar el tamaño y el peso de fuente de un elemento para que coincida con nuestros estilos de encabezado.
Clase:
- h*: Las clases varían de h1 a h6 dependiendo del tamaño de fuente requerido.
Sintaxis:
<p class=" h* ">
Content
</p>
* se puede sustituir con números del 1 al 6 según sea necesario.
Ejemplo 1: En este ejemplo, aprenderemos sobre las clases h1, h2 y h3.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Heading Utility</h3> </div> <p class="h1"> I am h1 class</p> <p class="h2"> I am h2 class</p> <p class="h3">I am h3 class </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, aprenderemos sobre las clases h4, h5 y h6.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <div> <h1 style="color:green">GeeksforGeeks</h1> <h3> Heading Utility</h3> </div> <p class="h4">I am h4 class</p> <p class="h5">I am h5 class</p> <p class="h6">I am h6 class</p> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#heading-utilities
Publicación traducida automáticamente
Artículo escrito por nikitamehrotra99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA