[MÚSICA] [MÚSICA] Hola y bienvenidos al tutorial de CSS, Colores. El objetivo de este tutorial es que conozcas y practiques cómo aplicar los diferentes formatos de color en determinados elementos de una página web. Los invito a realizar cada uno de los ejemplos en su propia página. En CSS, los colores se pueden definir de seis formas posibles. Colores hexadecimales, colores RGB, colores RGBA, colores HSL, colores HSLA y colores predefinidos. Vamos a ver las particularidades de cada una de ellas. Los colores hexadecimales se expresan en el formato #RRGGBB, donde los componentes RBG corresponden a rojo, verde y azul, respectivamente. Los componentes son números hexadecimales que van desde 00 hasta FF, donde 00 significa la ausencia de ese color y FF significa la presencia total del color. Por ejemplo, el color #FF0000 corresponde a rojo, porque el componente R tiene el máximo valor posible. Los colores RGB se especifican usando la función RGB. Esta función recibe tres parámetros, red, green y blue. Cada parámetro indica la intensidad del color, la cual es un entero cuyo valor va desde 0 hasta 255 o un porcentaje que va desde 0 hasta el 100%. Por ejemplo, rgb(0, 0, 255) o rgb(0%, 0%, 100%) es equivalente al color azul. Los colores RGBA son una extensión de RGB a los que se les añade el canal alfa o la opacidad del color. Estos se especifican usando la función RGBA. Esta función recibe cuatro parámetros, red, green, blue y alpha. El parámetro alpha es un número entre 0,0, totalmente transparente, y 1,0, totalmente opaco. Por ejemplo, volvamos al azul anterior. En la notación RGBA, tendrÃa un alpha de 0, pero si cambiamos su opacidad a 0,3 se verÃa asÃ. Es decir, un azul un poco menos transparente. Un color en HSL se especifica usando la función HSL, la cual recibe tres parámetros, hue, o matiz; saturation, o saturación; lightness, o brillo. El matiz corresponde a un valor en grados de una circunferencia, que va desde 0 hasta 360. 0 o 360 grados corresponde a rojo, 120 grados corresponde a verde y 240 grados corresponden a azul. La saturación es un porcentaje que va desde el 0%, una sombra de grises, hasta 100%, el color sin ninguna modificación. El brillo también es un porcentaje que va desde 0%, que corresponde a negro, hasta 100%, que corresponde a blanco. Como dijimos antes, el valor 120 del matiz corresponde a verde. AsÃ, el verde oscuro en HSL serÃa 120, 100%, 20%. Manteniendo el matiz y la saturación, pero aumentando el brillo, veremos un verde más claro. ¿Qué pasarÃa si disminuyo la saturación? Probemos con un 50%. De este modo, el color se verÃa asÃ, un verde un poco más oscuro. Un color en HSLA es una extensión a HSL donde se incluye el canal alpha o la opacidad, la cual va desde 0,0, totalmente transparente, hasta 1,0, totalmente opaco. Probemos aumentar la opacidad del verde oscuro que vimos antes. Asà se verÃa ese color con un poco de opacidad y asà totalmente opaco. Otra forma de referenciar el color es mediante el nombre. Existe un total de 140 colores predefinidos que se pueden referenciar directamente por el nombre, los cuales pueden ser consultados en este enlace que aparece en pantalla y que también está en el material del curso. Algunos de estos nombres, los cuales se deben referenciar en inglés, son chocolate, coral y cornflowerblue, entre otros. Ahora hablemos de las propiedades más usadas que tiene un color. background-color, border-color, color y outline-color. Vamos a ver varios ejemplos para ilustrar estas propiedades. En cada ejemplo tendremos la definición de los estilos, el HTML que los utiliza y el resultado final al desplegar ese HTML en un browser. Background-color cambia el color de fondo del elemento donde se aplica el estilo. En este ejemplo, tenemos los siguientes estilos. La regla que define el color de fondo, es decir body, con el atributo background-color igual a 733924. La regla que define el color de fondo de los tÃtulos de primer nivel, es decir h1, con el atributo background-color igual de D9984A. La regla que define el color de fondo del contenedor, es decir div, con el atributo background-color igual a A64E2E. Cuando visualizamos este HTML en el navegador, tenemos el resultado de los tres tonos cafés. En este ejemplo, tenemos el atributo border-color, que cambia el color de borde del elemento al que se aplica el estilo. Esta propiedad puede tener cuatro valores, cada uno corresponde al lado del rectángulo donde se está aplicando el borde. Si se indican los cuatro valores, estos se aplican a los bordes superior, derecho, inferior e izquierdo, respectivamente. Si se indican tres valores, el primero se aplica al borde superior, el segundo al borde derecho e izquierdo y el tercero al inferior. Si se indican dos valores, el primero se aplica al border superior y al inferior y el segundo al derecho e izquierdo. Si solo se indica un valor, como en este ejemplo, este se aplica a todos los bordes. Para que esta propiedad tenga efecto, siempre se debe indicar el estilo del borde al que se quiere aplicar. En este ejemplo, se está definiendo el color azul para todos los bordes y el borde con un estilo sólido. Cuando se indica la propiedad color, esta hace referencia al color de la fuente. En el ejemplo que aparece en pantalla, la fuente que esté dentro del div tendrá color rojo oscuro. La propiedad outline-color hace referencia al color que se aplica fuera del borde para resaltar un elemento de la página. En este ejemplo, se tiene un div con un borde sólido de color naranja. Luego se ha agregado una lÃnea externa al borde de color rojo. Hasta acá este tutorial de colores en CSS. Te invitamos a realizar los ejercicios y nos vemos en una próxima oportunidad. [MÚSICA] [MÚSICA] [MÚSICA] [AUDIO_EN_BLANCO] [MÚSICA] [MÚSICA]
