Los valores de los colores se pueden definir mediante su nombre, en código hexadecimal (#RRGGBBAA) o mediante sus valores en los siguientes formatos:
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 |
0
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) |
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.5; } .f { background-color: rgba(255, 0, 0, 0.5); }
0
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
La propiedad background-attachment indica si 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; background-attachment: fixed;} body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}
dark