CSS nivel 1

Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento.

Las propiedades que podemos utilizar son las siguientes:

color

Especificamos el color del primer plano del contenido del texto. Se hereda.

Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)

EM {color: red}

En el anterior ejemplo cualquier texto enfatizado de la p�gina aparecera en rojo.

background-color

Especifica el color del fondo del elemento, que puede ser un color o la palabra reservada transparent (el fondo del elemento padre se ve).

En general, las propiedades del fondo no se heredan, pero al ser su valor inicial transparent, el fondo del elemento padre se ve en los hijos.

Esta propiedad no se hereda.

transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G,B)

H1 {background-color: #0000FF}

En el anterior ejemplo todos los encabezados de nivel 1 aparaceran con un fondo azul.

background-image

Designa una imagen para rellenar el fondo del elemento por medio de una URL o la palabra reservada none para indicar que no se utilizara ninguna imagen.

Puede fijarse tambi�n un color que se colocar� debajo de la imagen, y que asomar� si la imagen no est� disponible o, si lo est�, detr�s de sus zonas transparentes.

Esta propiedad no se hereda.

none | url(direcci�n)

H1 {background-image: white url("fondo.gif")}

En el ejemplo anterior cualquier encabezado de nivel 1 tendra como fondo la imagen "fondo.gif" y si esa imagen no esta disponible el fondo aparecera en color blanco.

background-repeat

Establece si la imagen de fondo (establecida con background-image) se repetir� horizontal y verticalmente para rellenar todo el fondo del elemento (repeat), s�lo horizontalmente (repeat-x), s�lo verticalmente (repeat-y), o no se repetir� (no-repeat). No se hereda.

repeat | repeat-x | repeat-y | no-repeat

H1 {background-image: white url("fondo.gif")}

En este ejemplo al no especificarse la propiedad background-repeat por defecto se toma el valor repeat por lo que la imagen "fondo.gif" se repetira tanto horizontal como verticalmente tantas veces como sea necesario hasta ocupar toda la zona determinada por el encabezado.

background-attachment

Establece si la imagen debe desplazarse (scroll) o permanecer fija con respecto a la ventana (fixed) cuando el usuario hace scroll. En cualquier caso s�lo asoma en el �rea de contenido y relleno del elemento). No se hereda.

scroll | fixed

background-position

Fija la posici�n de la imagen en el �rea de relleno del elemento por medio de:

Coordenadas, expresadas como longitud (distancia hasta la esquina superior izquierda del l�mite de relleno) o porcentaje sobre el tama�o de la caja (el punto n% de la imagen se sit�a en el punto n% del area de relleno), de manera que "0% 0%" indica un ajuste a la esquina superior izquierda, "100% 100%" a la inferior derecha y "50% 50%" centrada. Si se expresa una sola se entiende como "x" d�ndose a "y" el valor 50%.

Palabras reservadas, poniendo una o dos en cualquier orden. Si falta una se le da el valor "center" , de manera que por ejemplo "left" es equivalente a "center left".

Esta propiedad no se hereda.

P.nota {background-image: white url("fondo.gif"); 
        background-repeat : repeat-y;
        background-position: top center;}

background

Esta propiedad en s� representa un metodo abreviado para especificar todos los valores en un solo marcador.

�Sobre la utilizaci�n del color

El color puede ser especificado mediante nombre o mediante especificaci�n RGB.

Los nombres son los pertenecientes a la paleta VGA de Windows: aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white, y yellow.

La especificaci�n RGB se puede efectuar de tres formas. La primera es mediante tres n�meros hexadecimales, donde el primero corresponde a la cantidad de rojo, el segundo a la cantidad de verde y el tercero a la cantidad de azul.

Por ejemplo.

#FF0000 - Sera el color rojo
#00FF00 - Sera el color verde
#0000FF - Sera el color azul

y con la combinaci�n de estos podemos conseguir los colores que queramos.

#FFFF00 - Amarillo

El mismo color puede ser especificado mediante la funcion rgb() indicando el c�digo de color o el porcentaje:

rgb(0,255,0) --color verde
rgb(0%,100%,0) --color verde

�Ejemplos

He creado una p�gina con frases c�lebres sobre el dinero, en la que puedes ver ejemplos de como utilizar estas propiedades.