CSS - intermediate - Lección nº 2
Fondos y códigos de colores
¿De qué trata esta lección?
En esta lección aprendemos a usar códigos de color, de esta manera podemos usar los tonos de los colores que usamos en la lección anterior. Probamos estos códigos de color, estableciendo colores de fondo a los elementos HTML que usamos anteriormente. Aunque usamos el archivo CSS separado para aplicar el formato, aprendemos cómo dirigir una etiqueta HTML seleccionada en particular
Nuevo atributo HTML en esta lección:
id – Este atributo se puede utilizar para cada etiqueta HTML – podemos agregar un identificador único a una etiqueta. Con este identificador podemos seleccionar de forma inequívoca una etiqueta HTML del archivo CSS.
Nueva propiedad CSS en esta lección:
background-color (color de fondo) – necesitamos esta propiedad para agregar color de fondo a cualquier etiqueta HTML.
Elegir un color:
Para definir colores podemos usar números / códigos de colores además de los nombres de colores de la lección anterior.
Incluso podemos elegir un color de una imagen que usamos en la página web. El programa Paint tiene una herramienta de selección de color, después de usarlo podemos leer el código de color presionando editar colores. El código de color más común es asignar el componente rojo, verde y azul del color con un número del 0 al 255 para cada uno de los tres.
En la imagen de abajo, para la sección azul del gráfico circular, los números son 79, 129 y 188. Estos números se pueden dar como RGB(79,129,188) en el estilo de la página web. (R – red, G-green, B-blue).
Para usar el color del ejemplo anterior, también podemos usar el formulario #4f81bc, encontramos este tipo de códigos en tablas de colores, por ejemplo https://www.w3schools.com/colors/colors_picker.asp. RGB(79,129,188) y #4f81bc (o #4F81BC) son los mismos números: el número 79 es 4f en la forma hexadecimal (en la base 16), el número 129 que se refiere a la parte verde del color es 81.
Es válido utilizar #1f0 que es la forma abreviada de #11ff00.
Los números hexadecimales se usan comúnmente en IT, ya que son fáciles de convertir a la forma binaria y viceversa, y los números son considerablemente más cortos en formas hexadecimales como en forma binaria. Solo necesitamos saber, que en un número hexadecimal se usan los dígitos A, B, C, D, E y F (puede usar capas pequeñas también) con lo usual dígitos 0, 1, …, 9.
Ejemplo para configurar el color de fondo:
En el ejemplo anterior, el color # f0f0f5 se agrega al fondo de la etiqueta del cuerpo, como resultado, el gris será el color de fondo base para el contenido de los navegadores. El archivo CSS también contiene la configuración de fondo para la etiqueta h1, este es el rgb (242, 217, 242). Como resultado, el encabezado tiene un fondo púrpura separado.
Hacer referencia a una etiqueta HTML particular de estilo:
Si usamos la etiqueta <style>, o un archivo de estilo para más archivos HTML, es posible que necesitemos referirnos a una instancia concreta de una etiqueta HTML y formatearla de manera diferente a las otras partes marcadas por la misma etiqueta.
Podemos resolver esto agregando un identificador único a la etiqueta que necesitamos formatear, y referirnos desde el archivo CSS para agregar formato.
En el ejemplo anterior, en Some text está marcado como párrafo en el archivo html, así como el texto Paragraph. En este caso, si queremos formatear solo el párrafo de Some text, no podemos usar la palabra clave p en el estilo. Podemos agregar un identificador a este párrafo, pg es el valor en este ejemplo. En el estilo agregamos un fondo separado a este identificador.
En esta lección aprendemos a usar códigos de color, de esta manera podemos usar los tonos de los colores que usamos en la lección anterior. Probamos estos códigos de color, estableciendo colores de fondo a los elementos HTML que usamos anteriormente. Aunque usamos el archivo CSS separado para aplicar el formato, aprendemos cómo dirigir una etiqueta HTML seleccionada en particular
Nuevo atributo HTML en esta lección:
id – Este atributo se puede utilizar para cada etiqueta HTML – podemos agregar un identificador único a una etiqueta. Con este identificador podemos seleccionar de forma inequívoca una etiqueta HTML del archivo CSS.
Nueva propiedad CSS en esta lección:
background-color (color de fondo) – necesitamos esta propiedad para agregar color de fondo a cualquier etiqueta HTML.
Elegir un color:
Para definir colores podemos usar números / códigos de colores además de los nombres de colores de la lección anterior.
Incluso podemos elegir un color de una imagen que usamos en la página web. El programa Paint tiene una herramienta de selección de color, después de usarlo podemos leer el código de color presionando editar colores. El código de color más común es asignar el componente rojo, verde y azul del color con un número del 0 al 255 para cada uno de los tres.
En la imagen de abajo, para la sección azul del gráfico circular, los números son 79, 129 y 188. Estos números se pueden dar como RGB(79,129,188) en el estilo de la página web. (R – red, G-green, B-blue).
Para usar el color del ejemplo anterior, también podemos usar el formulario #4f81bc, encontramos este tipo de códigos en tablas de colores, por ejemplo https://www.w3schools.com/colors/colors_picker.asp. RGB(79,129,188) y #4f81bc (o #4F81BC) son los mismos números: el número 79 es 4f en la forma hexadecimal (en la base 16), el número 129 que se refiere a la parte verde del color es 81.
Es válido utilizar #1f0 que es la forma abreviada de #11ff00.
Los números hexadecimales se usan comúnmente en IT, ya que son fáciles de convertir a la forma binaria y viceversa, y los números son considerablemente más cortos en formas hexadecimales como en forma binaria. Solo necesitamos saber, que en un número hexadecimal se usan los dígitos A, B, C, D, E y F (puede usar capas pequeñas también) con lo usual dígitos 0, 1, …, 9.
Ejemplo para configurar el color de fondo:
En el ejemplo anterior, el color # f0f0f5 se agrega al fondo de la etiqueta del cuerpo, como resultado, el gris será el color de fondo base para el contenido de los navegadores. El archivo CSS también contiene la configuración de fondo para la etiqueta h1, este es el rgb (242, 217, 242). Como resultado, el encabezado tiene un fondo púrpura separado.
Hacer referencia a una etiqueta HTML particular de estilo:
Si usamos la etiqueta <style>, o un archivo de estilo para más archivos HTML, es posible que necesitemos referirnos a una instancia concreta de una etiqueta HTML y formatearla de manera diferente a las otras partes marcadas por la misma etiqueta.
Podemos resolver esto agregando un identificador único a la etiqueta que necesitamos formatear, y referirnos desde el archivo CSS para agregar formato.
En el ejemplo anterior, en Some text está marcado como párrafo en el archivo html, así como el texto Paragraph. En este caso, si queremos formatear solo el párrafo de Some text, no podemos usar la palabra clave p en el estilo. Podemos agregar un identificador a este párrafo, pg es el valor en este ejemplo. En el estilo agregamos un fondo separado a este identificador.
Ejercicios
1. Selecciona un color más claro, puedes utilizar la página https://www.w3schools.com/colors/colors_names.asp, escribe el código del color en el archivo CSS y configúralo como el color de fondo de tus archivos HTML in el archivo style.css.
Ver el resultado
2. Edita la página index.html, estableciendo un identificador único ordenado y asignándole un color de fondo. Escribe el código de color en el archivo style.css.
Ver el resultado
3. Agrega un color de fondo a las celdas del encabezado de la tabla en el archivo tips.html. Usa el código de color y escribe el formato en el archivo style.css. Como solo esta tabla tiene una fila de encabezado, no necesitamos usar un identificador.
Ver el resultado
4. Colorea el enlace con el texto More about this en el archivo aspects.html con el código de color de la barra verde de la imagen chart.jpg, en la carpeta de imágenes. Utiliza un editor de imágenes para encontrar su código de color.
Ver el resultado
Cuestionario
1. ¿Cuál es la definición correcta del código de color?
2. ¿Cuál de los siguientes produce un fondo azul?
3. ¿Cuál de los formatos CSS enumerados agrega un color de fondo a la etiqueta HTML a continuación?
<p id="name">Browsers</p>
<p id="name">Browsers</p>
4. Teniendo en cuenta los códigos HTML y CSS siguientes, seleccione qué color tendrá el texto en el navegador
HTML:
HTML:
<body>
<p id="par">This is a paragraph.</a></p>
</body>
CSS:
a{ color: #0000ff; }
body { color: #00ff00; }
p{ color:#ff0000; }
#par { color: #ffff00; }
Información suplementaria
Ejercicios: Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/css/css_background.asp;
https://www.w3schools.com/cssref/sel_id.asp;
https://www.w3schools.com/css/css_colors.asp;
https://www.w3schools.com/colors/default.asp;
https://www.w3schools.com/colors/colors_picker.asp.
https://www.w3schools.com/css/css_background.asp;
https://www.w3schools.com/cssref/sel_id.asp;
https://www.w3schools.com/css/css_colors.asp;
https://www.w3schools.com/colors/default.asp;
https://www.w3schools.com/colors/colors_picker.asp.
