martes, noviembre 15, 2011

Tutorial de desarrollo web, Parte VI: Jerarquía en HTML. Herencia en CSS

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS

Antes de empezar, como todas las semanas, tengo aquí la resolución a los ejercicios de la semana pasada en el acostumbrado archivo de Google Docs. Los ejercicios tenían múltiples soluciones, pero aquí os he colocado la más óptima (al menos según mi opinión, la que esperaba que tomáseis). De todos modos, a partir de ahora es muy probable que encontréis maneras alternativas de hacer todos los ejercicios, y, siempre que las instrucciones sean de HTML5 y CSS3, si el documento tiene la forma correcta que pide el ejercicio, el ejercicio está correctamente hecho, aunque nunca está mal revisar las resoluciones para ver si podríais haberlo hecho de alguna mejor manera (o tal vez comprobar que se os ocurrió una mejor idea que la mía). Y, sin más dilación, comenzamos con el capítulo de esta semana.
Una conversación ayer con Ana, mi alumna más aplicada, me hizo darme cuenta de que el artículo de la semana pasada pudo tener algunos aspectos confusos, así que, aprovechando que ya conocemos un poco de CSS y de los tres sistemas para introducirlo en nuestro sitio web, hoy vamos a seguir trabajando sobre este lenguaje, intentando aprender cómo funciona la "herencia", o lo que es lo mismo, la característica "en cascada" del CSS, una de las características más importantes de este lenguaje. Así que, si no habéis logrado hacer los ejercicios de la semana pasada correctamente... probablemente sea culpa mía.
En primer lugar, y tal vez no aclarado correctamente la semana pasada, en nuestro archivo externo y en las instrucciones CSS que pongamos en la etiqueta "style" dentro del "head" podemos modificar cualquier etiqueta de CSS, no sólo la etiqueta "body". De esta manera, podemos tener un código como el siguiente:

p
{
color: blue;
}

En este código que acabamos de ver, decimos que en los párrafos de nuestro documento (aquellos envueltos en la etiqueta "p") tendrán la fuente de color azul. Este pequeño código podemos introducirlo, tal como digo, en nuestro documento externo (para que se aplique a todos los párrafos de todos los documentos que lo referencien) o dentro de la etiqueta "style" que vimos la semana pasada (no confundir con el atributo "style" que casi todas las etiquetas tienen) para que todos los párrafos del documento que lo contiene tengan dicho estilo.
Recordemos nuestro ejemplo de la semana pasada, en concreto el "rojo.html". Revisemos las características que tenía el párrafo:

  • En primer lugar, en el archivo externo "estilo.css" le dijimos que el fondo del "body" debía ser azul, el color de la fuente blanco y la alineación del texto centrada. Sin embargo, vemos que de estas instrucciones, sólo conservamos el color de la fuente. ¿Recordamos por qué fue ésto? Sigamos adelante.
  • En el propio archivo "rojo.html", dentro del "head" introdujimos una etiqueta "style", en la cual le dijimos que el fondo del "body" debía ser rojo. Ahí ya se empieza a parecer al documento que tenemos. Sin embargo, a pesar de que dentro del documento sólo especificamos el color del fondo, "heredamos" los atributos especificados en el documento externo, como el color de la fuente y su alineación, aunque ésto último no se está aplicando. ¿Por qué? Sigamos.
  • Finalmente, dentro de la propia etiqueta "p" usamos un atributo llamado "style", en el cual le especificamos que queríamos alinear el párrafo a la derecha. De este modo, nuestra etiqueta "p" heredó el estilo que le había llegado (el color de fuente blanco del archivo externo y el color del fondo rojo de la etiqueta "style") pero sustituyó la alineación que recibía por la nueva que le introdujimos en dicho atributo.
"Ésto ya lo explicaste la semana pasada" diréis. Y es verdad, lo expliqué la semana pasada, pero hay un detalle que tal vez no resalté lo suficiente. Hemos observado que, en los dos primeros puntos, modificamos el estilo de la etiqueta "body", sin embargo, en el tercero, modificamos el estilo de la etiqueta "p". ¿Podríamos haber modificado en el tercer punto la etiqueta "body"? Por supuesto, a través de un <body style="text-align: right;">. La única razón por la que no lo hice así fue por el hecho de que usar el atributo "style" de "body" y haber modificado el "body" en el código CSS al comienzo de la página es un tanto redundante, sobre todo si nos percatamos de que sólo hay (y sólo puede haber) un "body" en cada documento, así que con una única declaración de estilo debería ser suficiente.
Pero lo que quiero hacer notar aquí es el hecho de que, a pesar de que hablamos de dos etiquetas distintas ("body" y "p") el estilo se sigue heredando en cascada, ya que el "p" usa en su texto el color de fuente que le dijimos en el documento externo (blanco) y también su color de fondo (aunque no se aprecie a primera vista, pero el párrafo puede tener su propio color de fondo distinto al del "body", así que el hecho de que en este ejemplo tenga el fondo rojo significa que lo está heredando desde el "body").
"¿Qué clase de brujería es ésta?" os preguntaréis ahora, tal vez. Lo que hay que entender es que todo lenguaje XML (y el HTML se adapta a los estándares del XML) es jerárquico, con lo cual, todas las etiquetas del documento serán "hijas" de otras (salvo la etiqueta "html", que es la que debe englobar todo el documento). De esta manera, todas las etiquetas "hijas" heredarán los estilos de sus etiquetas "padres". Por ello hay que evitar cosas como la siguiente:

<p><a href="http://the-cubeblog.blogspot.com">The CubeBlog</p></a>

Vemos que en esa línea se rompe la jerarquía: el comienzo de la línea indica que "p" contiene a "a", sin embargo, "p" se cierra antes que "a", por lo cual el final de la línea sugiere que "a" contiene a "p". Este código, evidentemente, está mal: siempre se debe saber quién es la etiqueta "padre" y quién es la etiqueta "hija". De este modo, ese código se podría solucionar así:

<p><a href="http://the-cubeblog.blogspot.com">The CubeBlog</a></p>

O, tal vez, aunque yo no lo haría de esta manera (al menos en este caso), así:

<a href="http://the-cubeblog.blogspot.com"><p>The CubeBlog</p></a>

Sea como sea, observamos que en estos dos casos, la estructura está bastante bien definida: si la "p" contiene a la "a", la "a" se cierra antes de que se cierre la "p", o al revés. Pero nunca puede haber una etiqueta sin cerrarse cuando se cierre su etiqueta padre. Hacer notar que existen casos como este en los cuales ambas etiquetas pueden ser "padre" e "hija" de la otra indistintamente, mientras que en otros casos, algunas etiquetas nunca podrán contener a otra, sólo ser contenida por ellas (nunca pondremos un "body" dentro de un "p", por poner un ejemplo evidente).
De esta manera, entendiendo que todo el documento HTML llevará una jerarquía, entender que el CSS se aprovecha de esa jerarquía será bastante fácil. Las etiquetas "hijas" siempre heredarán el estilo de su etiqueta "padre", como hemos visto en el ejemplo anterior, en el que el "p" heredaba el estilo del "body". Sin embargo, si una etiqueta "hija" tiene una regla de estilo particular que contradice una de las reglas de su etiqueta "padre", se le aplicará la especificación de la etiqueta "hija", de un modo similar a cómo se hacía con los trés métodos de CSS en el anterior episodio.
Para ir entendiéndolo mejor, vamos a coger una vez más nuestros tres archivos "rojo.html", "azul.html" y "estilo.css" y empezar a modificarlos para ver lo que va ocurriendo. En primer lugar, hemos decidido que, a pesar de que en ambos documentos queremos que el texto sea blanco por lo general, queremos que los párrafos tengan letras grises. ¿Cómo lo hacemos? Sencillo: abrimos el archivo "estilo.css" e introducimos este código:

p
{
color: grey;
}

Hecho esto, guardamos y abrimos (o actualizamos) ambos documentos, y deberíamos encontrarnos con esto:


Como vemos, nuestro navegador ha detectado los dos colores distintos del "body", el del "azul.html" en el archivo externo, y el del "rojo.html" en la etiqueta "style" al comienzo del archivo. Aparte, ha alineado el texto al centro en "azul.html" (como ordena el archivo externo) pero a la derecha en "rojo.html" (como el atributo "style" de ese párrafo le ordena). Finalmente, el color de la fuente, que en las reglas del "body" en el archivo externo decía que fuera blanco, ha salido gris, porque hemos incluido una regla para los "p" en la que el texto de estos debe de ser gris. Sin embargo, no todo el texto de estos documentos será gris. Comprobémoslo añadiéndole un encabezado en cualquiera de los dos documentos. Por ejemplo, el "rojo.html" (que es en el que más estamos trabajando):

<h1>Este encabezado es blanco</h1>


Podemos observar que el encabezado ha cogido todas las normas que le hemos aplicado al "body": color de fuente blanco, alineación al centro y color de fondo rojo (como le dijimos al "body" en el "style" del propio archivo). ¿Por qué? Porque no hemos hecho ninguna regla para el "h1", así que hereda todas las reglas del "body".
Sin embargo, las letras grises en el fondo rojo son bastante difíciles de leer, ¿no creéis? ¿Qué tal si le cambiamos el color? Muy bien. Ya que en el documento "azul.html" sí han quedado bien, no hace falta que las cambiemos en el documento externo, sino que haremos reglas especiales en el propio documento. Iremos a la etiqueta "style" que ya creamos en el ejercicio anterior y añadiremos una línea de código, para que quede así:

body
{
background-color: red;
color: yellow;
}

Con este código, todas las letras que estén dentro del "body" (tanto las del "p" como las del "h1") deberían pasar a ser amarillas, ¿no? Muy bien. Guardamos, actualizamos y...


Vaya, parece que algo no ha funcionado bien. Sí, el "h1" se ha vuelto amarillo, pero el "p" sigue gris, ¿por qué? Antes de explicarlo, vamos a ver, paso por paso, los "cambios" que ha ido haciendo el navegador al estilo hasta llegar a escribir el "p" de esa manera (en negrita las reglas que se van haciendo definitivos):

  1. El estilo por defecto: color de fuente negro, color de fondo blanco, alineación a la derecha.
  2. Las normas para el "body" que hay en el archivo externo, que modifica esos tres valores, convirtiendo el color de fondo en azul, el color de la fuente en blanco y la alineación al centro.
  3. Las normas para el "body" que hay en la etiqueta "style", modificando el color del fondo a rojo y el color de la fuente a amarillo.
  4. Las normas para el "body" en el atributo "style" de la propia etiqueta. Ya que no la hemos usado, no hace ninguna modificación.
  5. Las normas para el "p" que hay en el archivo externo, modificando el color de la fuente a gris.
  6. Las normas para el "p" que hay en la etiqueta "style", en este caso ninguna.
  7. Las normas para el "p" en el atributo "style" de la propia etiqueta, que modifica la alineación a la derecha.
Como vemos, el navegador primero aplica las reglas de la etiqueta "padre", en el orden que vimos la semana pasada, y luego aplica las reglas de la etiqueta "hija", también en ese orden, de manera que la última regla en encontrarse es la definitiva. De este modo, aunque en el propio documento le hayamos dicho que queremos que todas las letras del "body" sean amarillas, si hay una norma en el archivo externo al que referencia que dice que en el "p" las letras deben ser grises, seguirán siendo grises. Para solucionar esto y que en nuestro archivo "rojo.html" las letras del "p" también sean amarillas (sin modificar el documento "azul.html"), tendremos que darle instrucciones específicas dentro de la etiqueta "style" así que, en dicha etiqueta, dejaremos el código de la siguiente manera:

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

p
{
color: yellow;
}
</style>

Una vez tengamos ese código, guardamos y actualizamos y nuestro documento debería quedar así:


Puede que todo este asunto del CSS, las herencias en cascadas y todo esto pueda parecer lioso y engorroso, y sobre todo si lo leéis aquí y no vais probando al mismo tiempo que lo vais leyendo. Recomiendo ir siguiendo todos los pasos del artículo anterior y de este y viendo por vosotros mismos lo que va ocurriendo, con la práctica se vuelve más sencillo.
Como último comentario para cerrar hoy, y sólo como anotación para hacer nuestros códigos más óptimos, cuando queremos aplicar el mismo estilo a varias etiquetas, podemos hacerlo en una única declaración de estilo. Por poner un ejemplo, si quisiéramos decir al archivo "rojo.html" que queremos tanto los "p" como los "h1" en amarillo sin escribirlo en el "body" (porque tal vez queremos que el resto de encabezados tengan otro color o por cualquier otro motivo), podremos hacerlo de la siguiente manera:

p, h1
{
color: yellow;
}

Como véis, separando por comas, podemos incluir todas las etiquetas que queramos. Además, aparte de esto, luego podremos dar órdenes individuales a cada uno de los dos, de esta manera:

p, h1
{
color: yellow;
}

h1
{
text-align: center;
}

Que ya se haya hecho una declaración de "h1" no significa que no se pueda hacer otra, aunque recordemos que la última que escribamos será la que perdurará, así que habrá que tener cuidado si ponemos reglas que se contradigan.
Y ahora, como ya va siendo costumbre, los ejercicios para la semana que viene. En primer lugar podréis intentar, con lo que hemos explicado esta semana, corregir los archivos de la semana pasada, pero también vamos a intentar hacer un nuevo ejercicio para ir cogiendo más práctica.

EJERCICIO

Montar un sitio web formado por cuatro páginas y su correspondiente hoja de estilos. Las cuatro páginas serán "index.html", "compra.html", "venta.html", "faq.html". Las páginas deberán tener un fondo azul, encabezados amarillos y letras grises. En todas las páginas habrán encabezados acordes con la página. En el "index.html" deberá haber enlaces a las otras tres páginas, y deberán estar centrados. Los enlaces a "compra" y "venta" deberán ser blancos mientras que el del "faq" deberá ser naranja. En las otras tres páginas debe de haber un enlace de vuelta a la página principal al final del documento, de color blanco. Además, en "compra" y en "venta" deberá haber una lista de artículos alineados a la izquierda, y enlaces cada uno a la otra página, de color naranja. Finalmente, en el "faq" (Frequently Asked Questions o lo que es lo mismo, "Preguntas frecuentemente formuladas") también introduciremos un par de preguntas que se nos ocurran con sus correspondientes respuestas, cada pregunta y respuesta en un párrafo distinto.
En próximas entregas intentaremos ir mejorando este sitio con lo que vayamos aprendiendo.

No hay comentarios: