5. Colores y fondo
Los valores de los colores se pueden definir mediante su nombre, en código hexadecimal o mediante sus valores en los siguientes formatos:
- RGB (Red, Green, Blue)
- HSL (Hue, Saturation, Lightness)
- RGBA (Red, Green, Blue, Alpha)
- HSLA (Hue, Saturation, Lightness, Alpha)
5.1. Tabla de colores básicos
HTML soporta alrededor de 140 nombres de colores diferentes. Entre ellos puedes encontrar los siguientes colores básicos:
| Color | Nombre | HEX | RGB |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| white | #ffffff | 255,255,255 | |
| red | #ff0000 | 255,0,0 | |
| blue | #0000ff | 0,0,255 | |
| yellow | #ffff00 | 255,255,0 | |
| gray | #808080 | 128,128,128 | |
| green | #008000 | 0,128,0 |
5.2. Propiedades más utilizadas
Algunas de las propiedades relacionadas con el color y el fondo más utilizadas son las siguientes:
| Propiedad | Descripción | Valores |
|---|---|---|
color |
Color del texto | RGB | HSL | HEX | nombre del color | RGBA | HSLA |
background-color |
Color de fondo | RGB | HSL | HEX | nombre del color | RGBA | HSLA |
background-image |
Imagen de fondo | url(…) | none |
background-repeat |
Repetición de la imagen de fondo | repeat | repeat-x | repeat-y | no-repeat |
background-attachment |
Desplazamiento de la imagen de fondo | scroll | fixed |
background-position |
Posición de la imagen de fondo | percentage | length | left | center | right |
background-size |
Tamaño de la imagen de fondo | valor |
Opacity |
Transparencia de un elemento | [ 0 – 1 ] (0 → totalmente transparente) |
Ejercicio propuesto
Observa el resultado de los siguientes estilos y estudia las diferencias que hay entre los distintos valores definidos.
.a { background-color: red; }
.b { background-color: #FF0000; }
.c { background-color: RGB(255,0,0); }
.d { background-color: HSL(0,100%,50%); }
.e { background-color: red; opacity: 0.8; }
.f { background-color: rgba(255, 0, 0, 0.8); }
0
Ejercicio propuesto
Agrega los siguientes estilos en una página web y explica las diferencias que hay entre ellos:
body { background-image: url("https://bit.ly/2slA7jo");}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-x;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-y;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-size: 100px 100px;}
dark
Ejercicio propuesto
La propiedad background-attachment indica sin una imagen se mantiene fija o se desplaza con el resto de la página. Explica las diferencias que encuentras al establecer las siguientes propiedades:
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: fixed;}
body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}
dark