oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 3: Fondos y colores
Pasemos a explicar como aplicar a nuestra página web colores e imágenes de fondo mediante nuestro amigo CSS
Propiedad "color"
Con la propiedad "color" podemos elegir por ejemplo de que color queremos que se muestren todos los encabezados <h1> de nuestras páginas:
h1 {
color: #0000ff;
}
Con el código de arriba conseguiríamos que todos los encabezados de todas las páginas de nuestro sitio web se muestren en color azul.
Propiedad "background-color"
Esta propiedad es la encargada de establecer el color de fondo de los elementos. Para cambiar el color de fondo de una página deberemos aplicar la propiedad background-color al elemento <body>. También podemos aplicar color de fondo a los encabezados y al texto:
body {
background-color: #04B404;
}
h1 {
color: #0000ff;
background-color: #F7FE2E;
}
De esta forma el fondo de nuestra página sería verde y el color de fondo de los encabezados h1 sería amarillo.
Propiedad "background-image"
Esta propiedad como supongo que ya habrás adivinado es la encargada de insertar una imagen de fondo a nuestras páginas:
body {
background-image: url("Dirección de tu imagen de fondo");
}
Si dejas la propiedad background-image según esta en el ejemplo anterior, la imágen se repetirá tanto en el eje horizontal como en el vertical. Con la siguiente propiedad podremos controlar ese comportamiento:
Propiedad "background-repeat"
La siguiente tabla nos muestra los valores que le podemos dar a dicha propiedad:
| Valor | Descripción |
| Background-repeat: repeat-x | La imágen se repetirá en el eje horinzontal |
| Background-repeat: repeat-y | La imágen se repetirá en el eje vertical |
| Background-repeat: repeat | La imágen se repetirá en el eje horizontal y vertical |
| Background-repeat: no-repeat | La imágen no se repetirá |
Entonces si queremos que una imágen de fondo no se repita que código tendríamos que utilizar... pues el siguiente:
body {
background-image: url("Dirección de tu imagen de fondo");
background-repeat: no-repeat;
}
Propiedad "background-attachment"
Esta nueva propiedad nos especificará si la imágen de fondo elegida esta fija en la página o por si lo contrario se desplaza en el contenedor.
En la siguiente tabla vemos los dos valores a aplicar a esta propiedad:
| Valor | Descripción |
| background-attachment: scroll | La imágen se desplazará con la página - no está fija |
| background-attachment: fixed | La imágen esta fija y aunque te desplaces vertical u horizontalmente por la página la imágen seguirá fija en su posición |
Vamos a ver como sería el código a utilizar para fijar una imágen de fondo:
body {
background-image: url("Dirección de tu imagen de fondo");
background-repeat: no-repeat;
background-attachment: fixed;
}
Ya sabes ahora toca experimentar un poco con lo que llevas aprendido, prueba a hacer difentes combinaciones con las propiedades que acabas de aprender.
Bueno ¿ves todo lo que podemos hacer con CSS? pues esto es solo el principio por que aún nos quedan muchas cosas por aprender. Pasa a la siguiente lección haber con qué nos encontramos.
Quiero aprender más!!!
- Avanzar a Lección 4: Fuentes
- Retroceder a Lección 2: Sintaxis de CSS
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®