martes, noviembre 08, 2011

Tutorial de desarrollo web, Parte V: Introducción al CSS

Previously, on The CubeBlog...

Otra semana más estamos aquí con nuestro curso de desarrollo web, esta vez listos para meternos con algo completamente nuevo, pero antes, presentarles los ejercicios de la semana pasada resueltos, como ya se va haciendo costumbre, en un documento de Google Docs.
Hasta ahora, nuestros documentos han sido siempre bastante sosos. A pesar de poder meterles enlaces, imágenes y encabezados, nuestro eterno fondo blanco, nuestras letras negras Times New Roman, la alineación a la izquierda... No es difícil darse cuenta de que necesitamos darle algo de vidilla a nuestras páginas, así que para ello introduciremos un nuevo lenguaje: el CSS.
Como ya comentamos en la primera entrega del blog, CSS es el acrónimo para Cascade Style Sheet, o lo que es lo mismo "Hojas de estilo en cascada". Entender el concepto de "hoja de estilo" no será algo muy difícil sin ninguna explicación, pero lo de "cascada" puede ser algo más complejo. Las instrucciones CSS, que en realidad se tratan de "reglas" que el navegador deberá ir cumpliendo, se van aplicando de manera descendente, de modo que aquellas reglas más "bajas" serán aplicadas posteriormente que las más "altas", por lo cual serán las que se mostrarán al usuario. Esto es un poco complejo de entender así de modo abstracto, pero lo entenderemos mucho mejor con el ejemplo que veremos más abajo.
El código CSS podemos escribirlo en tres lugares posibles, que no sólo no son exclusivos entre sí, sino que será muy común y recomendable usar las tres opciones en nuestros trabajos. Iremos trabajando sobre un ejemplo al mismo tiempo que vamos explicando estos tres métodos, teniendo como objetivo cambiar el formato de dos páginas nuevas que vamos a crear, como siempre, en la carpeta "Mis páginas webs". Uno de ellos se llamará "rojo.html" y el otro se llamará "azul.html" (cualquier referencia a Pokémon o a cualquier equipo de fútbol es pura coincidencia), que tendrán los siguientes aspectos:


Ahora queremos empezar a modificar estos documentos. Para ello, en el código CSS debemos indicarle a qué etiqueta de HTML queremos cambiarle el formato. En nuestro caso, se lo vamos cambiar a la etiqueta "body", y trabajaremos así:
  • En primer lugar, introduciremos el código CSS en un archivo externo que crearemos usando el Bloc de Notas del mismo modo que creábamos los documentos HTML, lo que en esta ocasión la extensión será ".css". Para nuestro ejemplo, crearemos un archivo llamado "estilo.css" y lo guardaremos en nuestra carpeta "Mis páginas webs". Luego introduciremos en su interior el siguiente código:
  • body
  • {
  • background-color: blue;
  • color: white;
  • text-align: center;
  • }
  • Este código será aplicado en la etiqueta "body" de cualquier documento HTML que lo referencie. Pero antes de aprender a referenciarlo, vamos a analizar paso por paso qué hemos hecho en este pequeño fragmento de código:
    • En primer lugar, como ya he dicho, hemos indicado a qué etiqueta se le aplicará el estilo, tras lo cual abrimos una llave, y entre ella y su correspondiente cierre de llave, escribiremos el código en cuestión.
    • La primera propiedad mencionada es "background-color". Sabiendo un poco de inglés, podremos deducir que esto cambiará el color del fondo del body, en este caso al color azul, ya que le hemos indicado que su valor será "blue".
    • Del mismo modo que en el anterior punto cambiamos el color del fondo del "body", vamos también a cambiar el color del texto contenido dentro de éste, con la propiedad "color", poniéndole el color "white" (o sea, blanco) para más fácil lectura.
    • Y, finalmente, queremos que el contenido de "body" esté centrado. Para ello usamos la propiedad "text-align" y le asignamos el valor "center". Bastante sencillo, creo yo.
    • Por último hacer notar el formato de cada instrucción. Aparte de ir entre llaves ({ }) tras el nombre de la etiqueta y que todo el código debe ir en minúsculas, los nombres de las propiedades serán sucedidos por dos puntos (:) tras lo cual irá el resultado. Finalmente, toda instrucción de CSS acaba en punto y coma (;).
  • Y de esta manera nos metemos en una de las características más fantásticas que tiene el CSS. Les explico: cuando montéis un sitio web, lo más probable (y lo más normal) es que queráis que todas las páginas de vuestro sitio sean visualmente consistentes. Para ello, necesitaríais escribir el mismo código CSS en cada una de vuestras páginas, lo cual sería bastante engorroso en caso de querer cambiar un detalle, ya que tendríais que ir cambiándolo en todos los documentos (y si vuestro sitio es regularmente grande, puede ser una tarea titánica). Sin embargo, haciendo como en este ejemplo y creando un archivo de estilo externo, simplemente haréis que todos los documentos de vuestro sitio lo referencien y, de esa manera, además de sólo tener que escribir el código una única vez, en caso de querer modificar algún detalle, sólo hará falta cambiarlo en dicho archivo externo, y todos los documentos que lo referencien acatarán las nuevas reglas. Eso sí, lo que tenemos que hacer ahora es, como digo, referenciarlo, de modo que, en los dos documentos HTML que creamos antes añadiremos esta línea dentro de la etiqueta "head" (o sea, entre el <head> y el </head>):

  • <link rel="stylesheet" type="text/css" href="./estilo.css" />

  • Podéis comprobar que volvemos a estar frente a una etiqueta que se cierra a sí misma. Pero aparte de ese detalle, esta etiqueta "link" sirve para referenciar a un archivo externo, en este caso una hoja de estilo, para lo cual hemos de rellenar los atributos "rel" y "type" de esta manera y en el atributo "href" poner la ruta del documento css a referenciar (ver la anterior entrega para recordar cómo hacer rutas).
  • Y, de este modo, nuestros archivos deberían quedar parecidos a éste:
  • Como podéis ver, tenemos, como indicamos antes, el fondo azul y el texto en blanco y centrado. Aunque, el otro archivo se llamaba "rojo.html" y, a pesar de ello, aparece azul, ¿no? Tendremos que hacer algo al respecto.

  • Habrán (muchas) situaciones en las que, a pesar de tener el estilo genérico de la página en un documento aparte, algunas páginas requerirán de algunos códigos propios, que no serán compartidas por otras páginas aún siendo estas del mismo sitio web. Para ello tenemos la opción de escribir código CSS dentro de cada documento, usando la etiqueta "style", de la siguiente manera:

  • <style type="text/css">
  • body
  • {
  • background-color: red;
  • }
  • </style>

  • Este código, que también deberá ir dentro del "head" de nuestra página (normalmente después de la referencia al CSS externo, si esta se ha hecho) también modificará el aspecto de nuestro "body", dándole un fondo rojo (como podréis imaginar, éste código se lo deberemos poner a nuestro documento "rojo.html"). Sin embargo, en esta ocasión no hemos hablado nada de la alineación o el color del texto. Vamos a introducir el código en nuestro documento y ver el resultado:
  • Sin embargo, y aunque en el último código no hemos hecho ninguna mención a la posición o color del texto, el navegador aún nos lo ha centrado y coloreado de blanco, mientras que el fondo, tal como le ordenamos, sigue siendo rojo. ¿Por qué? Tal como dijimos antes, el CSS es un lenguaje que funciona en "cascada" y por ello las instrucciones se ejecutan de arriba hacia abajo. De este modo, en "lo alto de la cascada" estaría el archivo externo, donde están las tres reglas que le dimos antes, las cual el navegador aplica. Sin embargo, al "bajar" por la cascada se encuentra con el código dentro del propio documento, donde le dijimos que cambiara el color del fondo por rojo, y lo hizo. Pero ya la orden de alinear y cambiar el color del texto la traía desde arriba y, como no se le ha dicho en ningún momento que haga lo contrario, esa orden llegó hasta la parte "más baja de la cascada", donde ya sale por pantalla. Espero que, de esta manera, hayan entendido cómo funciona la característica "en cascada" de este lenguaje.

  • Para terminar, veremos un punto aún más bajo de la cascada. Habrán ocasiones en que querremos modificar el estilo de partes determinadas de nuestro documento sin que tenga que responder a una regla genérica. Para ello, tendremos que echar mano del atributo "style" que se le puede aplicar a casi cualquier etiqueta. En este caso vamos a coger la etiqueta "p" del documento "rojo.html" y vamos a modificarla así:

  • <p style="text-align: right;">Éste es el documento de color rojo.</p>

  • De esta manera le hemos indicado al navegador que queremos que ese párrafo en particular esté alineado a la derecha, anulando también la regla del documento externo que le decía que alineara el texto al centro, aunque sigue manteniendo su color blanco y su fondo rojo, como los códigos anteriores habían definido.

Existen muchísimas instrucciones de CSS, muchas de ellas genéricas y otras específicas para determinadas etiquetas. Además, la característica "en cascada" de CSS es mucho más amplia que simplemente ésto, pero de momento nos quedaremos aquí y ya con el paso de las semanas iremos trabajando con códigos más complejos.

EJERCICIO 1

Volvemos a modificar nuestros archivos de "quijote.html" y "tabla3.html". Esta vez deberán tener ambos el fondo amarillo y los encabezados centrados, mientras que los párrafos deberán ir alineados a la izquierda (como están por defecto). Sin embargo, la tabla del 3 y el dibujo del Quijote deben aparecer centrados.

EJERCICIO 2

Hacer tres documentos HTML de nombre "index.html", "juegos.html" y "peliculas.html". En index debe haber un encabezado llamado "Mi página", y en los otros dos cada uno sus correspondientes encabezados "Juegos" y "Peliculas". En "Mi página" deberán haber enlaces a las otras dos páginas, mientras que en las otras dos incluiremos un pequeño listado de películas y juegos (cada una en su sitio), sin importar si son reales o inventados, además de un enlace para volver a la página principal. Los fondos de las tres páginas deben de ser grises y sus encabezados, amarillos y centrados. Los enlaces a las páginas "juegos.html" y "peliculas.html" deberán ser rojos, mientras que los que vuelvan a la página principal deberán ser amarillos. Finalmente, la lista (de enlaces en este caso) de la página principal debe estar centrada, mientras que las de las otras dos, no.

Y, de esta manera, termino esta quinta entrega del tutorial, esperando que todo esto se haya entendido, que la cosa ya empieza a ponerse compleja.

No hay comentarios: