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.
En este artículo, aprenderemos sobre estilos tipográficos. Primer CSS Typographic Styles se utiliza para cambiar el peso, los estilos y la alineación de la fuente.
Clases de estilo tipográfico CSS:
- text-normal: esta clase se utiliza para escribir texto normal.
- text-italic: esta clase se utiliza para escribir texto en cursiva
- text-bold: esta clase se utiliza para escribir texto en negrita.
- text-semibold: esta clase se utiliza para texto en seminegrita.
- text-light: esta clase se utiliza para escribir texto más claro.
- text-uppercase: Esta clase se utiliza para escribir texto en mayúsculas.
- no-wrap: las secuencias de espacios en blanco colapsarán en un solo espacio en blanco. El texto nunca pasará a la siguiente línea usando esta clase.
- ws-normal: esta clase se utiliza para escribir texto normal.
- text-underline: esta clase se utiliza para escribir texto con un subrayado.
- sin subrayado: esta clase se utiliza para escribir texto sin subrayar.
- texto enfatizado: esta clase se usa para hacer que el texto se enfatice/fuerte.
- text-small: Esta clase se utiliza para hacer el texto más pequeño.
- lead: esta clase se utiliza para escribir texto en lead.
- text-mono: esta clase se utiliza para escribir texto con la familia de fuentes ‘monospace’.
- user-select-none: Esto se usa para no aplicar estilo al texto.
Sintaxis:
<div class="Typographic-Style-Class">
...
</div>
Ejemplo 1: en este ejemplo, escribiremos texto y usaremos clases como text-normal , text-italic , text-bold , text-semibold y text-light .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Typographic Styles</h3> <p class="text-normal"> Hi Geek! I am Normal Text </p> <p class="text-italic"> Hi Geek! I am Italic Text </p> <p class="text-bold"> Hi Geek! I am Bold Text </p> <p class="text-semibold"> Hi Geek! I am Semi-bold Text </p> <p class="text-light"> Hi Geek! I am Light Text </p> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, escribiremos texto y usaremos las clases ws-normal , text-underline , no-underline , text-emphaised y text-small .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Typographic Styles</h3> <p class="ws-normal"> Hi Geek! I am a Normal whitespace Text </p> <p class="text-underline"> Hi Geek! I am a Text underline Text </p> <p class="no-underline"> Hi Geek! I am a No underline Text </p> <p class="text-emphasized"> Hi Geek! I am a Emphasized Text </p> <p class="text-small"> Hi Geek! I am a Small Text </p> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/typography#typographic-styles
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA