Colores Y Fondos Con Css
Páginas: 5 (1177 palabras)
Publicado: 17 de mayo de 2012
Colores y fondos en CSS
En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS:
* color
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background
Colorde primer plano: la propiedad 'color'
La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.
h1 {color: #ff0000;
}
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos.
Elelemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fíjate cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.
Imágenes de fondo [background-image]
Lapropiedad CSS background-image se usa para insertar una imagen de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.
Para insertar la imagen de la mariposa como imagen defondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;background-color: #FC9804;
}
NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la direccióncompleta del fichero: url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para lapropiedad background-repeat.
Valor | Descripción | Ejemplo |
Background-repeat: repeat-x | La imagen se repite en el eje horizontal | |
background-repeat: repeat-y | La imagen se repite en el eje vertical | |
background-repeat: repeat | La imagen se repite en el eje horizontal y vertical | |
background-repeat: no-repeat | La imagen no se repite | |
Por ejemplo, para evitar que se repita un...
En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS:
* color
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background
Colorde primer plano: la propiedad 'color'
La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.
h1 {color: #ff0000;
}
Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos.
Elelemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fíjate cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.
Imágenes de fondo [background-image]
Lapropiedad CSS background-image se usa para insertar una imagen de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.
Para insertar la imagen de la mariposa como imagen defondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;background-color: #FC9804;
}
NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la direccióncompleta del fichero: url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para lapropiedad background-repeat.
Valor | Descripción | Ejemplo |
Background-repeat: repeat-x | La imagen se repite en el eje horizontal | |
background-repeat: repeat-y | La imagen se repite en el eje vertical | |
background-repeat: repeat | La imagen se repite en el eje horizontal y vertical | |
background-repeat: no-repeat | La imagen no se repite | |
Por ejemplo, para evitar que se repita un...
Leer documento completo
Regístrate para leer el documento completo.