Conceptos Básicos
Contenido y presentación
El punto de partida para una buena presentación del contenido web es justamente saber distinguir y separar bien esas dos partes. Distinguir que es el contenido y como se estructura dentro del documento (parte que ya hemos visto), y como debe presentarse este contenido en un agente de usuario como el navegador web (parte que veremos ahora).
Esta separación es esencial para el cumplimiento de los estándares de accesibilidad web actuales.
Aun es muy frecuente encontrar fragmentos de código como el siguiente en la Web.
Es un buen ejemplo para aprender a separar la estructura y contenido, de la presentación, marcando esta última en color naranja distinguiremos fácilmente cual es la parte que no debería estar ahí. La parte que según el W3C debe indicarse en una hoja de estilo separada del documento.
<body text="#000000">
<table width="775" border="2" align="center" cellpadding="0"
cellspacing="0" bordercolor="#006C9E" class="LineaSencilla">
<tr>
<td height="30">contenido</td>
<td background="imagenes/fondo_rallado.gif">contenido</td>
</tr>
</table>
En el módulo de Accesibilidad Web veremos las pautas de accesibilidad de la iniciativa WAI del W3C. La pauta nº3 habla de la importancia de marcar adecuadamente la estructura de documentos, sin elementos ni atributos de presentación, en su lugar deben utilizarse hojas de estilo.
PAUTAS DE ACCESIBILIDAD AL CONTENIDO EN LA WEB 1.0
Pauta 3. Utilice marcadores y hojas de estilo y hágalo apropiadamente.
Marque los documentos con los elementos estructurales apropiados. Controle la presentación con hojas de estilo en vez de con elementos y atributos de presentación.
Las razones de esta separación son varias, como acabamos de ver hay razones de accesibilidad, pero tambien de optimización y mantenimiento de la web.
Supongamos que tenemos un sitio web de unos 120 documentos, y en todos ellos se especifica una determinada imagen de fondo en una celda de una tabla, o un color de texto negro en un determinado elemento. Si alguien decide cambiar ese color de texto o esa imagen, nos obligaría a tocar los 120 documentos. Un trabajo excesivo y arriesgado para un cambio tan pequeño. Existen herramientas que permiten automatizar ciertas tareas en todo el sitio, puede que de ese modo ya no sea tanto trabajo, pero sigue siendo arriesgado modificar 120 documentos.
Esta operación de mantenimiento utilizando una hoja de estilo externa tal como recomienda el W3C, supone modificar un solo documento (la propia hoja de estilo), sería una operación rápida, sencilla, y prácticamente exenta de riesgos de error. Abriríamos la hoja, cambiaríamos la imagen antigua por la nueva, cambiaríamos el color del texto, guardaríamos los cambios, y fin del mantenimiento.
El estándar css nos permite presentar ese contenido exactamente igual, pero manteniendo el código del documento totalmente limpio de atributos de presentación como los indicados en color naranja. Esto hará nuestro documento web mucho más accesible, ligero y fácil de mantener.
Documento xhtml
Partimos de un documento xhtml formado por un conjunto de elementos, en cuyo interior se encuentra el contenido de nuestra web, ya sea texto, imágenes, objetos multimedia, etc.
Con lo que acabamos de ver tenemos claro que en este documento no debe haber nada relativo a la presentación de esos elementos. El documento xhtml contiene la estructura y los datos, pero no como deben mostrarse.
Hoja de Estilo
Por otro lado tenemos una hoja de estilo vinculada al documento, la cual contendrá todo lo relativo a la presentación de los elementos que hay en el xhtml.
Esta hoja contiene una serie de selectores que representan a los elementos o etiquetas del xhtml, y en los que se especifica mediante reglas de estilo como deberá presentarse el contenido de esa etiqueta.
En el ejemplo siguiente, el selector P representa a cualquier párrafo de nuestra web, y contiene las reglas de estilo que definen como deberá mostrarse el contenido de ese párrafo.
P { fondo blanco;
Texto negro;
Borde inferior azul }
Las reglas de estilo de este selector dicen que si no se establece algo distinto en un contexto más específico, todo párrafo contenido en nuestro documento web deberá mostrarse con fondo blanco, color de texto negro, y un borde azul al final de ese párrafo.
Esquema Básico
Esta es la idea básica de la que partimos respecto a la hoja de estilo y su relación con el documento xhtml.
Sintaxis de los ejemplos
En los ejemplos se aplica la sintaxis a los selectores pero no a sus propiedades o reglas de estilo, el objetivo es captar de la forma más intuitiva y rápida posible el funcionamiento de los selectores y su repercusión en los elementos del xhtml.