Colores W3.CSS

Posted on by Rudeus Greyrat

W3.CSS nos proporciona clases para establecer el color de la fuente y el contenedor. No solo esto, también hay clases para cambiar o establecer el color de la fuente o el contenedor al pasar el mouse sobre la división o sección. Todos los elementos colorantes se pueden clasificar en términos generales en las siguientes partes:

  • Color de fondo
  • Color de texto
  • Color de fondo flotante
  • Color del texto flotante

Color de fondo: Las clases de color de fondo son las siguientes:

No Señor

Nombre del color de fondo

Clase de color de fondo

1.

Rojo

w3-rojo

2.

Rosado

w3-rosa

3.

Violeta

w3-morado

4.

Morado oscuro

w3-morado-oscuro

5.

Índigo

w3-índigo

6.

Azul

w3-azul

7.

Azul claro

w3-azul claro

8.

cian

w3-cian

9.

Agua

w3-agua

10

verde azulado

w3-verde azulado

11

Verde

w3-verde

12

Verde claro

w3-verde claro

13

Lima

w3-lima

14

Arena

w3-arena

15.

Caqui

w3-caqui

dieciséis.

Amarillo

w3-amarillo

17

Ámbar

w3-ámbar

18

Naranja

w3-naranja

19

Naranja intenso

w3-naranja intenso

20

Gris azulado

w3-azul-gris

21

Marrón

w3-marrón

22

Gris claro

w3-gris claro

23

Gris

w3-gris

24

Gris oscuro

w3-gris oscuro

25

rojo pálido

w3-rojo-pálido

26

De color amarillo pálido

w3-amarillo pálido

27

Verde pálido

w3-verde pálido

28

Azul pálido

w3-azul pálido

29

Blanco

w3-blanco

30

Negro

w3-negro

Ejemplo: Agregar color de fondo en una división.

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">
  
</head>
  
<body>
    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
        of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>
  
    <!-- w3-orange sets the background
         color orange -->
    <!-- w3-panel is used to 16px padding 
        from all the direction -->
    <div class="w3-panel w3-orange">
  
        <p>
            GeeksforGeeks is a Computer Science 
            portal for geeks. It contains well 
            written, well thought and well 
            explained computer science and 
            programming articles, quizzes etc.
        </p>
    </div>
</body>
  
</html>

Producción:

Color del texto: las clases de color de fuente son las siguientes:

No Señor.

Nombre del color del texto

Clase de color de texto

1.

Ámbar

w3-texto-ámbar

2.

Agua

w3-texto-agua

3.

Azul

w3-texto-azul

4.

Azul claro

w3-texto-azul-claro

5.

Marrón

w3-texto-marrón

6.

cian

w3-texto-cian

7.

Gris azulado

w3-texto-azul-gris

8.

Verde

w3-texto-verde

9.

Verde claro

w3-texto-verde-claro

10

Índigo

w3-texto-índigo

11

Caqui

w3-texto-caqui

12

Lima

w3-texto-lima

13

Naranja

w3-texto-naranja

14

Naranja intenso

w3-texto-naranja intenso

15.

Rosado

w3-texto-rosa

dieciséis.

Violeta

w3-texto-púrpura

17

Morado oscuro

w3-text-deep-purple

18

Rojo

w3-texto-rojo

19

Arena

w3-texto-arena

20

verde azulado

w3-texto-verde azulado

21

Amarillo

w3-texto-amarillo

22

Blanco

w3-texto-blanco

23

Negro

w3-texto-negro

24

Gris

w3-texto-gris

25

gris claro

w3-texto-gris claro

26

Gris oscuro

w3-texto-gris oscuro

Ejemplo: Agregar color de fuente a una división.

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">
  
</head>
  
<body>
    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
        of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>
  
    <!-- w3-text-orange sets the font 
        color to orange -->
    <!-- w3-panel is used to 16px padding 
        from all the direction -->
    <div class="w3-panel w3-text-orange">
        <p>
            GeeksforGeeks is a Computer Science 
            portal for geeks. It contains well 
            written, well thought and well 
            explained computer science and 
            programming articles, quizzes etc.
        </p>
    </div>
</body>
  
</html>

Producción:

Color de fondo flotante: las clases de color de fondo flotante son las siguientes:

No Señor.

Nombre del color de fondo

Clase de color de fondo

1.

Ámbar

w3-hover-ámbar

2.

Agua

w3-hover-aqua

3.

Azul

w3-hover-azul

4.

Azul claro

w3-hover-azul claro

5.

Marrón

w3-hover-marrón

6.

cian

w3-hover-cian

7.

Gris azulado

w3-hover-azul-gris

8.

Verde

w3-hover-verde

9.

Verde claro

w3-hover-verde claro

10

Índigo

w3-hover-índigo

11

Caqui

w3-hover-caqui

12

Lima

w3-hover-lima

13

Naranja

w3-hover-naranja

14

Naranja intenso

w3-hover-naranja profundo

15.

Rosado

w3-hover-rosa

dieciséis.

Violeta

w3-hover-púrpura

17

Morado oscuro

w3-hover-deep-purple

18

Rojo

w3-hover-rojo

19

Arena

w3-hover-arena

20

verde azulado

w3-flotar-verde azulado

21

Amarillo

w3-hover-amarillo

22

Blanco

w3-hover-blanco

23

Negro

w3-hover-negro

24

Gris

w3-hover-grey

25

gris claro

w3-hover-gris claro

26

Gris oscuro

w3-hover-gris oscuro

27

rojo pálido

w3-hover-rojo-pálido

28

Verde pálido

w3-hover-verde pálido

29

De color amarillo pálido

w3-hover-amarillo pálido

30

Azul pálido

w3-hover-azul-pálido

Ejemplo: Agregar color de fondo flotante en una división.

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">
  
</head>
  
<body>
    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
        of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>
  
    <!-- w3-hover-amber sets the background color
         to amber on hover over the division -->
    <!-- w3-panel is used to 16px padding from 
        all the direction -->
    <div class="w3-panel w3-text-white 
        w3-pink w3-hover-amber">
        <p>
            GeeksforGeeks is a Computer Science 
            portal for geeks. It contains well 
            written, well thought and well 
            explained computer science and 
            programming articles, quizzes etc.
        </p>
    </div>
</body>
  
</html>

Producción:

  • Antes de pasar el mouse:

  • En vuelo estacionario:

Color de texto flotante: las clases de color de texto flotante son las siguientes:

No Señor.

Nombre del color del texto

Clase de color de texto

1.

Ámbar

w3-hover-text-ámbar

2.

Agua

w3-hover-text-agua

3.

Azul

w3-hover-text-azul

4.

Azul claro

w3-hover-text-azul claro

5.

Marrón

w3-hover-texto-marrón

6.

cian

w3-hover-text-cian

7.

Gris azulado

w3-hover-text-azul-gris

8.

Verde

w3-hover-text-verde

9.

Verde claro

w3-hover-text-verde claro

10

Índigo

w3-hover-text-índigo

11

Caqui

w3-hover-text-caqui

12

Lima

w3-hover-texto-lima

13

Naranja

w3-hover-texto-naranja

14

Naranja intenso

w3-hover-text-deep-orange

15.

Rosado

w3-hover-text-rosa

dieciséis.

Violeta

w3-hover-text-púrpura

17

Morado oscuro

w3-hover-text-deep-purple

18

Rojo

w3-hover-texto-rojo

19

Arena

w3-hover-text-arena

20

verde azulado

w3-hover-text-verde azulado

21

Amarillo

w3-hover-text-amarillo

22

Blanco

w3-hover-text-blanco

23

Negro

w3-hover-text-negro

24

Gris

w3-hover-texto-gris

25

gris claro

w3-hover-text-gris claro

26

Gris oscuro

w3-hover-text-gris oscuro

Ejemplo: Agregar color de texto flotante en una división.

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
        "https://www.w3schools.com/w3css/4/w3.css">
</head>
  
<body>
    <!-- w3-container is used to add 16px 
        padding to any HTML element.  -->
    <!-- w3-center is used to set the 
        content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xxlarge sets font size to 32px -->
        <h2 class="w3-text-green w3-xxlarge">
            Welcome To GFG
        </h2>
    </div>
  
    <!-- w3-hover-text-amber sets the font color
         to amber on hover over the division -->
    <!-- w3-panel is used to 16px padding from 
        all the direction -->
    <div class="w3-panel w3-text-pink
        w3-hover-text-amber">
        <p>
            GeeksforGeeks is a Computer Science 
            portal for geeks. It contains well 
            written, well thought and well 
            explained computer science and 
            programming articles, quizzes etc.
        </p>
    </div>
</body>
  
</html>

Producción:

  • Antes de pasar el mouse:

  • En vuelo estacionario:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *