Colores de texto de espectro

Los colores de espectro son una de las utilidades más útiles, hay dos tipos de cosas en las que podemos usar colores. Al igual que podemos establecer colores para el texto y podemos establecer colores para el fondo.

En este artículo, aprenderemos sobre el color del texto y comprenderemos cómo podemos establecer los colores del texto en Spectre mediante el uso de estas clases.

Clase de colores de texto Spectre:

text-error: esta clase se utiliza para configurar el texto con un color rojo.
text-warning: Esta clase se utiliza para configurar el texto con un color amarillo.
text-success: Esta clase se utiliza para configurar el texto con un color verde.
text-light: esta clase se utiliza para configurar el texto con color blanco.
text-gray: esta clase se utiliza para configurar el texto con un color gris.
text-dark: esta clase se utiliza para configurar el texto con color negro.
text-secundario: esta clase se utiliza para configurar el texto con un color gris claro.
text-primary: esta clase se utiliza para configurar el texto con un color azul.

Sintaxis:

<element class = "text-colorName"> Content </element>

El siguiente ejemplo ilustra los colores de texto de Spectre.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE Text Colors Class</title>
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
          href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Text Colors Class</strong>
        <br><br>
        <p class="text-primary">
            Primary Text Color
        </p>
  
        <p class="text-secondary">
            Secondary Text Color
        </p>
  
        <p class="text-dark">
            Dark Text Color
        </p>
  
        <p class="text-gray">
            Gray Text Color
        </p>
  
        <p class="text-light">
            Light Color Text
        </p>
  
        <p class="text-success">
            Success Text Color
        </p>
  
        <p class="text-warning">
            Warning Text Color
        </p>
  
        <p class="text-error">
            Error Text Color
        </p>
    </center>
</body>
  
</html>

Producción:

Colores de texto de espectro

Referencia: https://picturepan2.github.io/spectre/utilities/colors.html#colors-text

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta