Primer CSS es un marco CSS que se basa en el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea 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.
En este artículo, aprenderemos sobre una de esas utilidades de estilo Primer CSS Text Color . Esta utilidad se utiliza para colorear el texto dentro de cualquier elemento del sitio web.
Primer CSS Clases de color de texto:
- color-fg-default: esta clase aplica el color de texto negro predeterminado al elemento. Se aplica por defecto.
- color-fg-overlay: esta clase, cuando se aplica, da un tono blanco ligeramente oscuro al color del texto del elemento.
- color-fg-emphasis: esta clase cuando se aplica da un color negro oscuro al color de fuente del elemento.
- color-fg-accent: esta clase cuando se aplica da un color azul claro al color de fuente del elemento.
- color-fg-accent-emphasis: esta clase, cuando se aplica, da un color azul intenso al color de fuente del elemento.
- color-fg-success: esta clase cuando se aplica da un color verde claro al color de fuente del elemento.
- color-fg-success-emphasis: esta clase cuando se aplica da un color verde oscuro al color de fuente del elemento.
- color-fg-attention: Esta clase cuando se aplica da un color amarillento claro al color de fuente del elemento.
- color-fg-attention-emphasis: Esta clase cuando se aplica da un color amarillento oscuro al color de fuente del elemento.
- color-fg-severe: esta clase, cuando se aplica, da un color marrón claro al color de fuente del elemento.
- color-fg-severe-emphasis: esta clase, cuando se aplica, da un color marrón oscuro al color de fuente del elemento.
- color-fg-danger: esta clase, cuando se aplica, da un color rojo claro al color de fuente del elemento.
- color-fg-danger-emphasis: esta clase, cuando se aplica, da un color rojo oscuro al color de fuente del elemento.
- color-fg-done: esta clase cuando se aplica da un color violeta claro al color de fuente del elemento.
- color-fg-done-emphasis: esta clase, cuando se aplica, da un color violeta oscuro al color de fuente del elemento.
- color-fg-sponsors: esta clase, cuando se aplica, da un color rosa claro al color de fuente del elemento.
- color-fg-sponsors-emphasis: esta clase, cuando se aplica, da un color rosa oscuro al color de fuente del elemento.
Sintaxis:
<div class="text-color-class"></div>
Nota: Por defecto, Primer CSS proporciona el color negro al texto del elemento. Agregar clases de texto a los elementos ayuda a anular el valor predeterminado.
Los siguientes ejemplos demostrarán el Primer CSS Colors Text Color .
Ejemplo 1: En este ejemplo, hemos usado diferentes colores de texto para los diferentes párrafos.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div> <h2>GeeksforGeeks</h2> <h3>Primer CSS Background Color</h3> <p class="color-fg-success"> This is the sample paragraph for displaying the different font colors present in the Prime CSS. It is for an article published in GeeksforGeeks website. </p> <p class="color-fg-danger"> This is the sample paragraph for displaying the different font colors present in the Prime CSS. It is for an article published in GeeksforGeeks website. </p> <p class="color-fg-accent"> This is the sample paragraph for displaying the different font colors present in the Prime CSS. It is for an article published in GeeksforGeeks website.</p> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, hemos creado encabezados de diferentes colores.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div> <h2>GeeksforGeeks</h2> <h3>Primer CSS Background Color</h3> <h3 class="color-fg-danger">Heading First</h3> <h3 class="color-fg-success">Heading Second</h3> <h3 class="color-fg-alert">Heading Third</h3> <h3 class="color-fg-accent">Heading Fourth</h3> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/colors#text
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA