Como se ha podido apreciar en anteriores entradas, las hojas de estilo en cascada ayudan a separar el contenido del apecto grafico, es decir, los elementos que componen una página de la forma con la que se muestran. Además, CSS ayuda en gran medida a la definición de estilos en la página, ya que permite ajustar de una manera mucho más precisa cualquier aspecto de cualquier elemento de la página.
La maquetación con CSS lleva la utilización de las hojas de estilo a su grado máximo, de manera que cualquier definición del aspecto de la página se realiza en la declaración CSS que enlazamos con el documento HTML. Para definir la situación de los elementos en la página se utilizan las capas, a las que se aplica un posicionamiento a través también de las hojas de estilo.
Para crear las capas se utilizan etiquetas <DIV>, en las que se introducen los elementos que queramos que aparezcan en la página. Los elementos dentro de los <DIV> también se pueden anidar, para heredar las propiedades y posicionamiento de las capas padre.
En la maquetación por capas se definen únicamente etiquetas <DIV> vemos como con esta herramienta refutar la idea de las tablas para maquetacion.
Ventajas e inconvenientes de la maquetación CSS
La maquetación por capas, también llamada maquetación CSS, es una forma de crear webs más evolucionada y que mejora en mucho a la maquetación tradicional (que antes se hacía por tablas), aunque también tiene sus inconvenientes.
Veamos primero algunas de las ventajas de la maquetación CSS:
- La separación del contenido de la página y del estilo o aspecto con el que se deben mostrar. Tener en cuenta que, cuanto más separemos estos dos elementos, más sencillo será el mantenimiento de las páginas y el procesamiento de la información. Con ello también podremos obtener páginas más limpias y claras.
- Ahorro en la transferencia. Si todos los estilos y posiciones de los elementos se introducen en un documento externo, liberaremos el código de la página y ocupará mucho menos. Como la declaración de estilos se almacena en la caché del navegador, sólo se transfiere en la primera página que se visita del sitio, con lo que la segunda y posteriores páginas que se soliciten se cargarán mucho más rápido.
- Facilidad para alterar el aspecto de la página sin tocar el código HTML. Como toda la información de los estilos y el posicionamiento de las capas se encuentra en un mismo archivo, si deseamos cambiar cualquier elemento de la página -ya sea su posición o su aspecto-, sólo tenemos que actualizar la hoja de estilos y los cambios se verán automáticamente en todo el web.
Actualizado: La verdad es que en la actualidad casi no podemos decir que existan desventajas en la maquetación CSS, salvo la difcultad que puedan encontrar los desarrolladores para para aprender una cosa nueva. Actualmente todos los navegadores la soportan y la interpretan de una manera muy parecida, lo que facilita bastante la labor de desarrollo.
- Compatibilidad con navegadores antiguos. Se necesita que el visitante disponga de un navegador
bastante avanzadoactual. La mayoría de los visitantes disponen de navegadores que soportan características avanzadas de las CSS, pero todavía hay mucha gente que no ha actualizado sus equipos o que navega en sistemas de sólo texto. Los navegadores que no soportan hojas de estilos, por lo menos leerán el código de la página y lo mostrarán sin ningún posicionamiento. Ello puede resultar fastidioso, pero por lo menos visualizarán todos los datos de la página, aunque descolocados y sin estilo.
Actualizado: Es conveniente señalar que en la actualidad ya todos los navegadores soportan maquetación CSS, por lo que este inconveniente podemos descartarlo prácticamente. - Diferencias entre navegadores. Dependiendo del navegador también cambian las etiquetas de estilos soportadas, por lo que las páginas puede que no se vean exactamente igual en unos clientes que en otros. También, al igual que ocurre con HTML, hay atributos no estándar o que tienen valores por defecto diferentes. Cuando se empieza con la maquetación en CSS, puede resultar un tema bastante complicado y crearnos bastantes dolores de cabeza, no obstante, se trata de, poco a poco, ir aprendiendo todos los atributos y los navegadores donde se visualizan o no.
Actualizado: Las diferencias entre navegadores en la actualidad se han minimizado bastante y lo cierto es que con unas pocas técnicas podremos diseñar páginas que se vean exactamente igual en cualquier navegador. - Dificultad. Sin duda, si estamos acostumbrados al HTML, pasar a CSS resulta más complicado y requiere un estudio más profundo. Sin embargo, este paso nos brindará un mayor control de los elementos de la página y ampliará nuestras fronteras a la hora de maquetar.
Veamos un ejemplo sencillo de maquetacion con CSS: http://aulas.utbvirtual.edu.co/file.php/11147/ejercicios/anselmo.htm
NOTA