| Muchas de las definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), que están en la Sección HTML/CSS de esta web. |
| Respecto a los textos de nuestro documento HTML, en CSS contamos con la propiedad COLOR para visualizarlos, como su nombre indica, en distintos colores. Aunque ya he hablado de esta propiedad en un tutorial previo, repetiré ahora su definición, para que lo tengais en el tema que corresponde.
|
| |
 COLOR
|
| Propiedad que determina el color de la fuente de texto. Puede ser una palabra clave o un valor numerico RGB (Red, Green, Blue). Las palabras clave se corresponden con los valores numericos que se representan, pero se puede seleccionar el código numerico que se desee (Lo normal es utilizar cualquier software de edicion de graficos para elegir visualmente el color que nos guste y luego ver el codigo numerico que le corresponde). |
|
 La lista de las palabras claves con sus valores son: |
|
maroon #800000, red #ff0000, orange #ffA500, yellow #ffff00, olive #808000, purple #800080, fuchsia #ff00ff, white #ffffff, lime #00ff00, green #008000, navy #000080, blue #0000ff, aqua #00ffff, teal #008080, black #000000, silver #c0c0c0, gray #808080. |
| |
|
| En el siguiente grafico se muestra el codigo CSS para definir dos etiquetas de dos colores y su aplicación en dos tipos de cabecera. Todo el código aparece en el mismo documento html, aunque como ya sabreis, todo lo que hay entre las etiquetas < STYLE > y < /STYLE > podría ir en un documento .css aparte. |
 |
| Y el resultado es este: |
 |
| También sería válido cambiar los nombres de los colores, por ejemplo 'red' por su código numérico #ff0000. |
| Para los fondos disponemos de unas cuantas opciones mas incluidas en la propiedad BACKGROUND. No solo podremos definir el color de éste (propiedad que tambien he explicado con anterioridad) sino que tambien podremos ponerle una imagen y configurarla con ciertos parámetros. |
| Empezaremos con la propiedad BACKGROUND-COLOR y luego iremos completando el resto de opciones posibles. |
| |
BACKGROUND-COLOR |
| Esta propiedad fija el color de fondo de un elemento. |
|
valor: |
|
la palabra clave que define al color, como por ejemplo 'red' o un código hexadecimal de 6 caracteres ( #ffffff). |
|
palabra clave -transparent- |
|
para hacer que los colores subyacentes se vean a través. |
| |
|
| Aqui viene otro ejemplo con dos cajas (DIVs) para que veais el efecto del BACKGROUND-COLOR. |
 |
| Y el resultado es este: |
 |
| Vamos con la siguiente propiedad: |
| |
BACKGROUND-IMAGE |
| Esta propiedad fija la imagen de fondo de un elemento. Si la imagen no existiera, se vería en su lugar el color de fondo especificado en Background-color. Ese mismo color será el que se vea bajo las partes transparentes de la imagen elegida (si ésta tuviera partes transparentes). Esto es asi porque la imagen se situa sobre el color de fondo, y no bajo él. |
|
valor: |
|
url( < uri > ). (URI es la dirección donde se encuentre la imagen), para especificar la imagen. |
|
palabra clave -none- |
|
cuando no se utiliza ninguna imagen. |
| |
|
| Vamos a utilizar esta imagen: |
 |
| para ponerla como fondo de la caja "recuadro" con color de fondo amarillo. La imagen se llama fondo.jpg. Este es el código.: |
 |
| Pulsa en este link ' EJEMPLO ' para ver el resultado. |
| ¿Que ha sucedido? Pues que la imagen aparece como fondo dentro de la caja "recuadro". Pero como podeis ver, no aparece una sola imagen. Esto es porque al ser la imagen mas pequeña que el fondo de la caja, automáticamente se va a repetir tanto horizontal como verticalmente, hasta completar el fondo de la caja que la contiene. A esto se le llama "mosaico". |
| Si la imagen fuese mayor que el espacio que tenemos en la caja "recuadro", solo se vería la porción de ésta que entrara en la caja. Note tambien que el color amarillo, aunque sigue definido en el código CSS, no se vé, porque como dije antes, la imagen se posiciona sobre el color del fondo, y a menos que la imagen tenga partes transparentes, éste no se verá. |
| ¿Y qué pasa si sólo deseo que salga una imagen y no el mosaico? |
| Pues para eso necesitaremos la siguiente propiedad: |
| |
BACKGROUND-REPEAT |
| Si se especifica una imagen de fondo con BACKGROUND-IMAGE, esta propiedad especifica si la imagen es repetida (mosaico), y de que modo. Todo el mosaico cubre las áreas de contenido, relleno y borde de una caja. |
|
repeat |
|
La imagen se repite horizontal y verticalmente (por defecto). |
|
repeat-x |
|
La imagen se repite solo horizontalmente. |
|
repeat-y |
|
La imagen se repite solo verticalmente. |
|
No-repeat |
|
La imagen no se repite: solo se dibuja una copia de la imagen. |
| |
|
| Usamos el ejemplo anterior per ahora especificamos un repeat-x. |
 |
| Pulsa en este link ' EJEMPLO ' para ver como ahora el mosaico es solo horizontal y debajo de las imagenes horizontales se puede ver el fondo de color amarillo especificado con BACKGROUND-COLOR. |
| Prueba tu el caso de no-repeat para que veas como sólo una copia de la imagen aparece en el recuadro. |
| Seguimos con más propiedades BACKGROUND. |
| |
BACKGROUND-POSITION |
| Si se especifica una imagen de fondo con BACKGROUND-IMAGE, esta propiedad especifica su posición inicial. |
|
< porcentaje > < porcentaje > |
|
Con los valores '0% 0%', la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del límite del relleno de la caja. |
|
Un los valores '100% 100%' pone la esquina inferior derecha de la imagen en la esquina inferior derecha del área de relleno. |
|
Con los valores de '10% 30% ', el punto ubicado a un 10% del lateral izquierdo y a un 30% hacia abajo de la imagen debe ser colocado en el punto 10% del lateral izquierdo y a un 30% hacia abajo del área de relleno (OJO CON ESTO. EL PORCENTAJE SE APLICA TANTO A LA IMAGEN COMO AL ESPACIO DONDE SE UBICARÁ ÉSTA). |
|
< medida > < medida > |
|
Con un par de valores de '2px 2px', la esquina superior izquierda de la imagen se pone 2 pixels a la derecha y 2 pixels debajo de la esquina superior izquierda del área de relleno. |
|
< palabras clave TOP, BOTTOM, LEFT, RIGHT, CENTER > |
|
Top left y left top: Igual que '0% 0%'. |
|
Top, top center y center top: Igual que '50% 0%'. |
|
Right top y top right: Igual que '100% 0%'. |
|
Left, left center y center left: Igual que '0% 50%'. |
|
Center y center center: Igual que '50% 50%'. |
|
Right, right center y center right: Igual que '100% 50%'. |
|
Bottom left y left bottom: Igual que '0% 100%'. |
|
Bottom, bottom center y center bottom: Igual que '50% 100%'. |
|
Bottom right y right bottom: Igual que '100% 100%'. |
| |
|
| Si se da solamente un valor de porcentaje o de medida, éste fija solo la posición horizontal, y la posición vertical será el 50%. |
| Si se dan dos valores, la posición horizontal viene primero. |
| Las combinaciones de los valores de la palabra clave, medida y porcentaje se permiten, (Ej.,'50% 2cm' o 'center 2cm' o 'center 10%'). |
| Para las combinaciones de valores de palabra clave y de palabra no clave, 'left' y 'right' solo pueden ser utilizados como el primer valor, y 'top' y 'bottom' solo pueden ser utilizados como segundo valor. |
| Se permiten las posiciones negativas, lo que hace que la imagen se desplace fuera de la caja, en sentido contrario (es decir, hacia arriba o hacia la izquierda). |
| En el caso de los background-repeat, la posición marca el inicio de la imagen, pero la repetición ocupará todo el ancho o alto (según sea repeat-x o repeat-y) de la caja contenedora. |
| El siguiente código muestra las diversas posibilidades de esta propiedad. Recuadro1 con porcentajes. Recuadro2 con medidas fijas. Recuadro3 con repeat. |
 |
| En este ' EJEMPLO ' puedes ver su ejecución. |
| |
BACKGROUND-ATTACHMENT |
| Si se especifica una imagen de fondo con BACKGROUND-IMAGE, esta propiedad especifica su comportamiento respecto al desplazamiento del bloque que la contiene. |
|
< palabra clave FIXED > |
|
La imagen permanece fija (y se situa respecto a la pantalla, no respecto a su caja contenedora). |
|
palabra clave < palabra clave SCROLL > |
|
La imagen se desplaza respecto al bloque que la contiene (es la opcion por defecto). |
| |
|
| Pulsa en este ' EJEMPLO ' para ver el funcionamiento de esta propiedad. Mueve la barra de desplazamiento vertical de la ventana para ver las diferencias entre los dos recuadros. |
| NOTA IMPORTANTE: Observe que hay solamente un acceso visual por opción. Si un elemento tiene un mecanismo de desplazamiento (overflow), el fondo 'fixed' no se mueve con el elemento, y un fondo 'scroll' no se mueve con el mecanismo de desplazamiento. |
| Esto quiere decir, que si definimos un DIV y dentro posicionamos una imagen, con FIXED la imagen estará fija respecto al desplazamiento de la ventana del navegador tambien, no solo respecto a la barra de desplazamiento que exista en ese div. |
| De la misma forma, respecto al mismo DIV, si posicionamos la imagen con SCROLL, la imagen se moverá respecto al desplazamiento de la ventana del navegador, y no con el desplazamiento del DIV. |
| (El comportamiento irregular es distinto entre navegadores. Hasta donde yo he comprobado, en Firefox el SCROLL no lo hace respecto al DIV y en IExplorer y Firefox no mantiene la imagen FIXED dentro del DIV al desplazar la ventana del navegador). |
| Mirar el dibujo siguiente |
 |
| y ejecuta este ' EJEMPLO ' abriendo el navegador en modo ventana y con una altura inferior al tamaño de los dos rectángulos. Al igual que antes, mueve la barra de desplazamiento vertical de la ventana y las de ambos recuadros para ver las diferencias entre los dos recuadros y analiza su mal comportamiento. |
| |
BACKGROUND (BACKGROUND-COLOR, BACKGROUND-IMAGE, BACKGROUND-REPEAT, BACKGROUND-ATTACHMENT, BACKGROUND-POSITION) |
| Esta propiedad permite declarar en una sola sentencia todas las propiedades BACKGROUND explicadas anteriormente. |
| El orden de los valores es el que se muestra en la declaración. |
| |
|
| Se puede utilizar con un único valor o con varios como muestran estos ejemplos: |
| #divprincipal { background: blue;} |
| P { background: url("fondo1.jpg") black 50% no-repeat fixed;} |
Español
English
