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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Marketing Typography se utiliza para páginas de marketing y tiene utilidades como utilidades de encabezado, utilidades de contenido del cuerpo, etc.
En este artículo, discutiremos las utilidades de tipografía en Primer CSS.
Primer CSS Marketing Tipografía Utilidades:
- Utilidades de encabezado: estas utilidades se utilizan para cambiar la fuente, el tamaño y el peso mediante clases de utilidad de encabezado.
- Utilidades de contenido del cuerpo: estas utilidades se utilizan para cambiar el tamaño de la fuente y el peso de la fuente del cuerpo del elemento en las páginas de marketing.
- Utilidades tipográficas: Estas utilidades se utilizan como utilidades adicionales.
Primer CSS Marketing Tipografía Encabezado clases de utilidad:
- h*-mktg: Las clases varían de h0 a h6 para cambiar el tamaño y el peso de la fuente.
Primer CSS Marketing Tipografía Contenido del cuerpo Clases de utilidad:
- f*-mktg: Las clases varían de f0 a f6 para cambiar el tamaño y el peso de la fuente.
Primer CSS Marketing Tipografía Clases de utilidad tipográfica:
- pullquote: Esta clase se utiliza para crear la pullquote.
Sintaxis:
<p class="Marketing-Typography-Class">
...
</p>
Ejemplo 1: Este ejemplo demuestra la implementación de Primer CSS Marketing Typography Heading Utilities .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Typography</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 Marketing Typography 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> <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:
Ejemplo 2: Este ejemplo demuestra la implementación de Primer CSS Marketing Typography Body Content Utilities .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Typography </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 Marketing Typography Body Content Utilities </h3> <br> <p class="f0-mktg mb-3"> A Computer Science portal for geeks. </p> <p class="f1-mktg mb-3"> It contains well written, well thought and well explained computer science and programming articles. </p> <p class="f2-mktg"> A Computer Science portal for geeks. </p> <p class="f3-mktg mb-3"> A Computer Science portal for geeks. </p> <p class="f4-mktg mb-3"> It contains well written, well thought and well explained computer science and programming articles. </p> <p class="f5-mktg"> A Computer Science portal for geeks. </p> <p class="f6-mktg"> It contains well written, well thought and well explained computer science and programming articles. </p> </div> </body> </html>
Producción:
Ejemplo 3: Este ejemplo demuestra la implementación de las utilidades tipográficas de Primer CSS Marketing Typography .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Typography </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 Marketing Typography Typographic utilities </h3> <br> <p class="pullquote"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles. </p> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/marketing-type
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA