Tu web de informática

atras

1.4 Colocando un fondo

adelante

Introducción a css

Ahora vamos a empezar a definir los colores en la hoja de estilos. Primero quiero remarcar que a la hoja de estilos no se le puede hacer un previsualización, ya que los efectos se verán en la página html. Pues bien, dicho esto empezemos con los códigos css.

En este caso el código css no funciona con etiquetas del tipo <loquesea> como en el caso de html. En el css definimos estilos, y los estilos se los tenemos que definir a algo. De esta forma, si queremos ponerle unos estilos a los párrafos (recordad que para los párrafos usábamos la etiqueta <p>) lo que haríamos será usar el siguiente código:

p {aquí escribimos lo estilos}

Si os fijais lo que hacemos es escribir el nombre de lo que queremos definir y luego poner entre corchetes los estilos que le vamos a pones. En el caso de que le pongamos más de un estilo los pondríamos separados por punto y coma, de la sigiente forma:

p {estilos1; estilo2}

Definiendo colores en css

Vamos a olvidarnos de definir los párrafos y dejemos la hoja de estilos en blanco. Vamos a ponerle colores a todas las palabras que estén en el body, por lo que vamos a definir lo estilos del body. Concretamente para poner un color usamos el código "color: código", y donde pone código ponemos el código del color que queramos poner (los códigos de los colores los podeis ver aquí, en la columna que pone código html). De esta forma si queremos que todo el texto del body tenga el color rojo lo que haríamos sería poner el siguiente código en la hoja de estilos:

body {color: #FF0000}

Si ahora guardais la hoja de estilos y haceis una previsualización a la hoja html vereis que el texto se puso en rojo. Ahora vamos a poner un fondo a todo el body. Para poner un fondo usamos el código "background-color: código", poniendo donde pone código el código del color. De esta forma, para añadir al caso anterior un fondo amarillo haríamos lo siguiente:

body {color: #FF0000; background-color: #FFFF00}

Ahora si guardais y haceis una previsualización a vuestra hoja html vereis exactamente esto.

Colocar una imagen de fondo

Ese color amarillo no queda muy profesional, a veces conviene más tener una imagen de fondo que un color liso. Para seguir con la página que está prevista hacer en el curso vamos a colocar una imagen de fondo que encaje con la página que vamos a ir haciendo. Yo os propongo poner esta imagen:

fondo para una web

Primero creais una carpeta junto al index y el estilo.css, y llamémosla "imagenes" (no pongais acentos ni espacios a los nombres de los componentes de la web). Luego guardad esa imagen en la carpeta que acabamos de crear, y pon de nombre a la imagen "fondo" (la extensión de esta imagen es jpg, pero se puede usar cualquier imagen con cualquier extensión). Pues bien, para poner de fondo una imagen usamos el código "background-image: url(rutadelaimagen)", y donde pone rutadelaimagen tenemos que poner la dirección de la imagen.

Rutas o direcciones de los objetos

¿Qué es una ruta? Una ruta es la dirección de un objeto, y puede ser de dos tipos: absoluta o relativa.

Una ruta absoluta es la dirección de un objeto o página de una web con http incluido.Ejemplo de rutas absolutas son:
http://tuwebdeinformatica.com
http://tuwebdeinformatica.com/Crearwebs/lec1/fondos.html

Una ruta relativa es la dirección del objeto con repecto al que lo lee. Por ejemplo, si estamos en el index.html, y queremos leer el estilo.css que está al lado del archivo la ruta sería "estilo.css". Si estamos en el index.html y lo que queremos leer es la imagen fondo.jpg la ruta o dirección que tenemos que seguir para llegar a la imagen es abrir primero la carpeta imagenes y luego acceder a fondo.jpg, por lo que la ruta es "imagenes/fondo.jpg". Espero que lo vayais cogiendo. Ahora imaginaos que dentro de la carpeta imagenes hay un archivo llamado pagina.html, y que desde ese archivo queremos acceder al index.html, en este caso tenemos que ir una carpeta hacia atrás y acceder al index.html. Para ir para atrás se usan dos puntos, por lo que en este caso la ruta es "../index.html".

Pues bien, entonces siguiendo con la imagen de fondo, ¿cuál sería el código que hay que poner en la hoja estilo.css para acceder a la imagen? Espero que lo hayáis acertado, jeje. A continuación os dejo cómo nos quedaría el código de la hoja css:

body {color: #FF0000; background-color: #FFFF00; background-image: url(imagenes/fondo.jpg)}

Poner el color de fondo amarillo ya no tiene mucho sentido, por lo que podemos quitar esa parte del código y dejarlo así:

body {color: #FF0000; background-image: url(imagenes/fondo.jpg)}

De esta forma nuestra página html se ve ahora así. Si no se te ve bien no dudes en subir tu página al servidor (que no se te olvide subir el estilo.css y la carpeta imágenes, así como que en el servidor la imagen fondo.jpg también debe ir dentro de una carpeta llamada imagenes) y en enseñárnoslo en el foro para localizar el fallo y ayudarte a repararlo.

Otros estilos para las imágenes.

Para la página que vamos a hacer en el curso con las características "color: código" y "background-image: url(ruta)" que le hemos puesto está bien, pero para cuando hagas tu web puedes querer utilizar otras, por lo que aquí te hago una pequeña lista:

  1. "background-repeat: código" sirve para indicar cómo se debe repetir la imagen de fondo. Donde poner código puedes poner "no-repeat" para que la imagen no se repita, "repeat-x" para que sólo se repita en el eje x, y "repeat-y" para que sólo se repita en el eje y.
  2. "background-position: código" sirve para que, en el caso de que hayamos dicho que no se repita el fondo del todo, indicar la posición de la imagen. Donde pone código puedes poner "left" para situar la imagen a la izquiera, "right" para la derecha, "top" para arriba, "bottom" para el fondo y "center" para el centro. Además podemos mezclarlos y poner por ejemplo "background-position: bottom right"
atras
adelante

Volver a crear webs>>


Creada el 21/04/08 19:11
Copyright © - Todos los derechos reservados - Página creada por Juanma