Poner fondo con estilos CSS
Una de las ventajas de utilizar estilos CSS es la capacidad de modificar rapidamente el diseño, por decirlo de alguna manera, de una pagina web.
En esta lección vamos a ver como aplicar un fondo con CSS, ya sea una imagen o un color, veremos los dos casos.
Estructura básica del código CSS
Antes de arrancar de lleno con el código CSS, primero vamos a ver como es su sintáxis y estructura. Generalmente vamos a intentar aplicar un estilo a algun etiqueta HTML, entonces la estructura sería así:
etiqueta{atributo:valor;}
por ejemplo:
body{font-size:12px;}
Ese estilo CSS hará que el tamaño de la fuente de todo el texto que este dentro de la etiqueta body se 12px (pixeles).
Si lo que queremos modificar es un bloque, entonces al nombre que nosotros queramos le anteponemos un numeral (#), por ejemplo:
#mibloque{font-size:12px}
y para que ese estilo funcione, deberemos aplicarlo a un bloque dentro del código HTML de una pagina web. de esta forma:
<div id="mibloque">Este es mi primer bloque creado gracias a CCUSW</div>
Ese código hara que todo el texto dentro de ESE bloque tenga un tamaño de fuente 12px, lo que este fuera de ese bloque no tendra ningun estilo.
Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral (#) pondremos un punto (.), así:
.miclase{font-family: arial}
y desde el código HTML la llamaremos así:
<span class="miclase">Esta es mi primer clase creada gracias a CCUSW</span>
o también así:
<div class="miclase">Mi primer clase otra vez</div>
Entonces todo lo que este dentro de esas etiquetas la veremos con la fuente "Arial". No es difícil todo esto del CSS, solo hay que estudiar jeje.
Poner un color de fondo con CSS
El atributo para poner un color de fondo en CSS es background-color y los valores pueden ser:
- Código hexadecimal: así #000000 este sería el color negro.
- Nombre: podemos elegir el nombre, aunque no funciona con todos los colores y siempre tendremos que especificarlo en inglés, alguno de ellos son; gray, green, red, etc.
Para este ejemplo usaremos el nombre del color, pero antes tenemos que abrir el archivo estilos.css que creamos en la lección pasada y escribir esto:
body{background-color:gray}
luego lo guardamos y abrimos el archivo index.html que venimos haciendo a lo largo del curso, se tendría que ver así (primero asegurate de haber relacionado la hoja de estilos con el archivo HTML, lo vimos en la lección pasada):
Vemo que aplicandole el estilo a la etiqueta <body> funciono perfectamente, se puede ver en la imagen.
Ahora si queremos poner una imagen de fondo que se repita (un patrón), lo haremos con el atributo background-image así:
body{ backgroun-image: url(ruta/imagen.jpg); }
en el caso de CCUSW, he utilizado esta imagen:
Es una imagen muy chica, pero se repetirá de arriba a abajo y quedará así:
Si nuestra intención es que no se repita, el código sería así:
body{background-image: url(imagen.jpg); repeat:no-repeat;}
Si queremos que repita horizontalmente, sería así:
body{background-image: url(imagen.jpg); repeat:repeat-x;}
Y si queremos que se repita verticalmente, lo hacemos así:
body{background-image: url(imagen.jpg); repeat:repeat-y;}
Bien, ya hemos aprendido a colocar fondos con CSS y nuestra pagina web empieza a tomar forma, ahora te recomiendo que investigues y leas la siguiente lección, claro jeje.
Siguiente lección: Centrar contenido con CSS
Si tienes alguna duda puedes entrar al foro y registrarte para que te ayudemos entre todos.