Resumen: Entrega nº21 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01021D

 

 

BACKGROUND-COLOR CSS

La propiedad background-color de CSS nos permite establecer un color de fondo en cualquier elemento delimitado dentro de una página web. Todo elemento tiene la propiedad color de fondo con valor por defecto “transparente” (transparent), por lo que muchas veces se piensa que no existe un color de fondo por defecto. En realidad sí existe, pero no se ve.

css

 

PROPIEDAD CSS background-color

Valor por defecto

transparent

¿Se hereda directamente?

No

Valores posibles para esta propiedad

Un color RGB ó RGBA p.ej. rgb (255, 0, 0)

Un color hexadecimal p.ej. #FF0000

Un color HSL ó HSLA p.ej. hsl(0, 100%, 50%)

Un color designado con nombre (p.ej. red)

inherit (el color se heredará del elemento padre)

Ejemplos aprenderaprogramar.com

h1 {background-color:#ffff00;}

.destacado {background-color: red;}

 

 

La propiedad background-color es bastante simple. De hecho, ya la hemos utilizado para poner ejemplos básicos sobre selectores css y otras cuestiones a lo largo del curso, por lo que no vamos a extendernos en ella.

Un aspecto interesante de esta propiedad es que en ocasiones puede servirnos para visualizar las cajas que conforman una página web. Por ejemplo consideremos los elementos h1 y h2 que tenemos definidos en el código HTML que estamos usando para el curso:

<body>
<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<br/>…
 
 

Si aplicamos estos estilos:

/* Curso CSS estilos aprenderaprogramar.com*/
body {background-color: yellow;}
h1{background-color: blue;}
h2{background-color: red;}
 
 

Vemos con claridad cuáles son las cajas que intervienen. Si quisiéramos ver la caja div que envuelve a los títulos h1 y h2 bastaría con añadir div {background-color: pink;} con lo que veríamos algo así:

background-color css

 

 

Al visualizar las cajas podemos entender mejor qué es lo que está ocurriendo en una página web. No siempre será necesario, de hecho cuando tengamos un poco de experiencia prácticamente las iremos visualizando mentalmente sin necesidad de aplicar un color de fondo, o usaremos una herramienta de análisis para estudiarlas, pero al comenzar a trabajar con CSS nos podrá servir de ayuda en algunas ocasiones.

Si analizamos la imagen y el resultado obtenido podemos ver algunas cosas curiosas:

a) A pesar de que en el código no tenemos ningún elemento que separe el div del body, el div aparece “separado” del body tanto por arriba como por la izquierda como por la derecha. Lo comprobamos porque se ve el fondo amarillo. ¿Por qué existe esa separación?

b) El h1 está perfectamente ajustado al div: no existe separación alguna ni por arriba ni por la izquierda ni por la derecha. El borde azul está perfectamente alineado con el borde rosado. En cambio, hacia abajo el h1 está separado del h2, si no existiera esa separación no se vería el fondo rosado. Sin embargo en el código no hemos especificado ningún elemento que dé lugar a esa separación entre h1 y h2. ¿Por qué aparece esta separación?

Aparentemente la única división “normal” entre elementos vendría dada por el <br/> que está debajo del div, y dado que el br es un elemento separador sería lógico que creara un espacio entre la caja del div y la siguiente caja dentro del documento HTML.

La razón para esos espacios que apreciamos se debe a los estilos por defecto que introduce el navegador para los elementos div, h1 y h2. Hablaremos de ello más adelante, de momento nuestro objetivo ha sido únicamente conocer esta propiedad y ver cómo nos puede ayudar a conocer el modelo de cajas CSS y el funcionamiento del navegador. Más adelante hablaremos de por qué aparecen esas separaciones entre elementos y de cómo podemos modificar o anular esos estilos que por defecto introducen los navegadores.

Recordar que se puede añadir un grado de transparencia a un color de fondo definiendo el color con notación rgba ó hsla como hemos explicado en apartados anteriores del curso.

 

 

EJERCICIO

Crea un documento HTML donde la ventana del navegador esté dividida en 6 partes, cada una con su borde. En cada división pon como color de fondo lo siguiente:

a) División 1: un color expresado con notación RGB.

b) División 2: un color expresado con notación RGBA.

c) División 3: un color expresado con notación hexadecimal.

d) División 4: un color expresado con notación HSL.

e) División 5: un color expresado con notación HSLA.

f) División 6: un color designado con un nombre.

 

En cada división incluye un texto con la notación y color empleado. Por ejemplo <<Notación RGB, color 218, 165, 32>>. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: