Hojas de Estilo (CSS)

Hojas de Estilo (CSS)
 
-A +A

Como se puede apreciar en la sección Puesta en Marcha, cuando se logra separar el contenido de la presentación, el resultado suele ser muy poderoso ya que permite al administrador del Sitio Web hacer cambios al diseño (colores, ubicaciones, tamaños) del contenido de sus páginas con muy poco esfuerzo: basta con modificar la Hoja de Estilos para que éstos tengan efecto.

Para utilizar de mejor forma las Hojas de Estilo en Cascada, se ofrecen tres archivos:

Archivo de Contenido

Se trata del archivo 3cols.htm que consiste en una página con tres columnas: una tiene un logotipo y las otras dos, texto simulado; en su código se puede ver que sólo tiene etiquetas de html estándar, por lo que esta página hace un uso válido de los estándares (ver Figura 3).

Imagen que muestra la página de ejemplo de la que trata esta sección.

[D] Figura 3. La imagen muestra una pantalla con el ejemplo del que trata esta sección.

Hojas de estilo

Se ofrecen dos para este archivo, las cuales se llaman desde la sección <head> de su código; una de ellas es para mostrar el contenido en pantalla, mientras que la segunda es para impresión. Los archivos se denominan 3cols.css y 3cols-print.css. Un elemento interesante, es que al usar la hoja de estilo de impresión, se modifica completamente el contenido y la página se diagrama de manera diferente (ver Figura 4).

Imagen que muestra el contenido de la página web de ejemplo, cuando se aprecia en la visualización para impresión.

[D] Figura 4. La imagen muestra la visualización para impresión de la página web de ejemplo.

La intención de entregar estos archivos es que el usuario de esta Guía pueda trabajar con ellos y hacerles las modificaciones que estime adecuadas, para ir aprendiendo sobre la marcha el efecto que consigue a través de los cambios que realice.

Recursos Adicionales

Para aprender y practicar más sobre este tema, de por sí complejo, se sugieren los siguientes recursos: