El color de primer plano (color del texto) de los elementos se describe mediante la propiedad color. Los colores pueden especificarse de formas muy distintas. Tradicionalmente, se utilizan valores hexadecimales. Estos valores empiezan siempre por una almohadilla. Suele ir seguido de tres pares de números y/o letras. Representan el rojo, el verde y el azul. Por lo tanto, los colores siempre se especifican según el siguiente esquema:
RRGGBB
La especificación #ffffff da como resultado un color blanco. Si se utiliza #000000, el color será negro. En los editores HTML "sensatos" existen los correspondientes selectores de color.
Puede utilizarlos para determinar los códigos hexadecimales. En numerosos sitios web (por ejemplo, http://www.farbtabelle.net/) también existen las correspondientes descripciones generales de los colores.
En CSS, es posible acortar la notación de los valores hexadecimales de los colores. Sin embargo, este principio no puede aplicarse a todos los valores de color. Sólo funciona si un valor consta de tres pares idénticos. Un ejemplo típico son las definiciones de los colores blanco y negro. Normalmente se escriben así
.black { color: #000000; } .white { color: #ffffff; }
Esta sintaxis también puede abreviarse.
.black { color: #000; } .white { color: #fff; }
Los valores RGB también están permitidos en CSS. Aquí se especifican los valores decimales de 0 a 255, que deben ir separados por comas. El orden de las especificaciones de color corresponde al de los colores hexadecimales.
a { color: rgb(100%, 100%, 100%); fondo: rgb(0, 0, 0); }
Como muestra el ejemplo, también son posibles las especificaciones porcentuales, aunque en la práctica es poco frecuente.
Otra variante para las definiciones de color son las palabras clave de color. He aquí algunos ejemplos:
- negro
- rojo
- azul
- amarillo
- blanco
- verde
La definición correspondiente podría ser la siguiente
p { color: blanco; fondo: negro; }
Tenga en cuenta que CSS3 ha ampliado considerablemente la gama de palabras clave de color disponibles. CSS3 ha adoptado los nombres de color de la especificación SVG. Puedes encontrar un resumen de los nombres de color disponibles en http://www.w3.org/TR/SVG/types.html#ColorKeywords.
Definir fondo
Background es un resumen de los siguientes valores posibles, que se presentarán en detalle más adelante en este tutorial:
- background-attachment
- fondo-color
- imagen de fondo
- posición-fondo
- fondo-repetición
Las especificaciones individuales deben estar separadas entre sí por espacios. El orden en que se haga no importa. No es necesario especificar todos los valores.
Un ejemplo:
p { background: transparente url(logo.jpg) scroll repeat 0% 0%; }Colores de fondo
La propiedad background-color se utiliza para asignar un color de fondo a un elemento.
div { color de fondo: #009999; }
Introduzca el color deseado como valor.
Gráficos de fondo
background-image define un gráfico como fondo. Si esta propiedad se anota en un archivo CSS externo, las rutas relativas se refieren al directorio en el que se encuentra el archivo CSS.
- none - sin gráfico de fondo
- URI - ruta al gráfico
He aquí otro ejemplo.
<div style="background-image:url(back.jpg); margin:20px; padding:20px"> ¡Bienvenido a PSD-Tutorials.de! </div>
Proceda con cautela al utilizar imágenes de fondo. Después de todo, las imágenes de fondo demasiado llamativas no facilitan precisamente la lectura de los textos.
Por supuesto, hay sitios web en los que lo importante es el aspecto. Aquí sí que puedes trabajar con fondos más llamativos.
Fondos desplazables
En los elementos más largos, la imagen de fondo se mueve al desplazarse por la página. Esto se puede evitar con background-attachment.
- fijo - se desplaza a lo largo
- scroll - el gráfico de fondo permanece fijo y se alinea con la ventana del navegador (viewport).
La propiedad background-attachment se utiliza normalmente en combinación con background-image.
He aquí un ejemplo:
div.fest { background-image: url(background.gif); background-repeat: no-repeat; }La posición del fondo
La propiedad background-repeat se utiliza para definir la posición en la que debe comenzar el fondo. El punto de referencia es el elemento para el que se definió el gráfico.
- Porcentaje - uno o dos valores que determinan la distancia del gráfico desde la esquina superior izquierda del elemento. Con dos valores, el primero representa la distancia horizontal y el segundo la distancia vertical. El punto de referencia no es la esquina superior izquierda del gráfico, sino un punto dentro del gráfico, que también se especifica mediante los valores x/y.
- Especificación de longitud: determina la distancia del gráfico desde su esquina superior izquierda hasta la esquina superior izquierda del elemento. Se permiten uno o dos valores. Si se especifican dos valores, el primero determina la distancia horizontal y el segundo la vertical.
También son posibles las siguientes palabras clave
- izquierda - alineado horizontalmente a la izquierda
- centro - centrado
- derecha - alineado horizontalmente a la derecha
- arriba - alineado verticalmente arriba
- bottom - alineado verticalmente en la parte inferior
He aquí un ejemplo de cómo podría quedar algo así:
p { background-position: 8em top; }Repetición de imágenes de fondo
Si una imagen de fondo es más pequeña que el área mostrada y cómo se repite, puede determinarse con background-repeat.
- repeat - la imagen de fondo se repite vertical y horizontalmente para llenar todo el elemento.
- repeat-x - el gráfico sólo se repite horizontalmente.
- repeat-y - el gráfico sólo se repite verticalmente.
- no-repeat - el gráfico no se repite.
He aquí otro ejemplo:
body { background-repeat: repeat-y; }
En este caso, el gráfico sólo se repite verticalmente.
Si, por el contrario, se utiliza repeat-y, la repetición es sólo horizontal.
Este tutorial ha demostrado lo potente que es CSS en el ámbito de los colores y las imágenes.
