El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la sección head). La separación del contenido y la presentación hace que resulte mucho más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio. La separación del contenido y la presentación también depura y simplifica el código HTML, lo que disminuye el tiempo de carga en los navegadores y agiliza la navegación para personas con problemas de accesibilidad (por ejemplo, para los usuarios que utilicen lectores de pantalla).PARA QUÉ UTILIZAR CSS:
Control del texto: El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que se desea para la página. Con CSS, podemos controlar numerosas propiedades del texto, entre ellas las fuentes y los tamaños de fuente específicos; negrita, cursiva, subrayado y sombras de texto; color de texto y de fondo; color y subrayado de vínculos; etc. Si utilizamos CSS para controlar las fuentes, también conseguirá un tratamiento más coherente del diseño y el aspecto de la página en múltiples navegadores.
Formato y posición de los bloques de la Web: Además de para dar formato al texto, puede utilizar CSS para definir el formato y la posición de elementos de nivel de bloque (block-level) de una página Web. Un elemento de nivel de bloque es un elemento de contenido independiente que normalmente está separado por una nueva línea en el código HTML y que tiene visualmente el formato de un bloque. Por ejemplo, las etiquetas h1, p y div generan elementos de nivel de bloque en una página Web. Puede ajustar márgenes y bordes para elementos de nivel de bloque, situarlos en una ubicación concreta, añadirles color de fondo, colocar texto flotante alrededor de ellos, etc. La manipulación de elementos de nivel de bloque es, en definitiva, la forma en que se establece el diseño de las páginas con CSS.
LA ETIQUETA DIV:
Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio Web. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página.
Cuando crea un diseño CSS, coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que sólo pueden situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página Web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa (especificando su distancia con respecto a otros elementos de la página). También puede situar etiquetas div especificando elementos flotantes, rellenos y márgenes (el método preferido conforme al estándar Web actual).
La creación de diseños CSS desde cero puede ser una tarea difícil debido a la gran cantidad de formas de hacerlo que existen. Puede crear un diseño CSS sencillo de dos columnas estableciendo elementos flotantes, márgenes, rellenos y otras propiedades CSS mediante un número casi infinito de combinaciones. Además, el problema de la reproducción en distintos navegadores hace que determinados diseños CSS se muestren correctamente en algunos navegadores y no en otros. Dreamweaver facilita la creación de páginas con diseños CSS con 16 diseños predefinidos que funcionan en distintos navegadores.
La utilización de los diseños CSS predefinidos que vienen con Dreamweaver es la forma más fácil de crear una página con un diseño CSS, pero también puede crear diseños CSS mediante los elementos con posición absoluta (elementos PA) de Dreamweaver. En Dreamweaver, un elemento PA es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Sin embargo, la limitación de los elementos PA de Dreamweaver radica precisamente en que tienen una posición absoluta, lo que hace que sus posiciones nunca se ajusten a la página en función del tamaño del navegador.
Si se considera un usuario avanzado, también puede insertar etiquetas div de forma manual y aplicarles estilos de posición CSS para crear los diseños de las páginas.
ESTRUCTURA DEL DISEÑO DE PÁGINAS CON CSS:
El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. En los siguientes ejemplos se muestra una página HTML que contiene tres etiquetas div independientes: una etiqueta de “contenedor” grande y otras dos etiquetas (una de barra lateral y una de contenido principal) dentro de la etiqueta de contenedor.
A continuación se incluye el código de las tres etiquetas div en el HTML:
En el ejemplo anterior, no hay “estilo” asociado a ninguna de las etiquetas div. Si no hay reglas CSS definidas, cada una de las etiquetas div y su contenido se sitúan en una ubicación predeterminada de la página. Sin embargo, si cada etiqueta div dispone de un ID exclusivo (como en el ejemplo anterior), puede utilizar los ID para crear reglas CSS que, cuando se aplican, modifican el estilo y la posición de las etiquetas div.
LA REGLA #CONTAINER:
La siguiente regla CSS, que puede residir en el encabezado del documento o en un archivo CSS externo, crea reglas de estilo para la primera etiqueta (la etiqueta de “contenedor”) div de la página:
La regla #container aplica estilo a la etiqueta div de contenedor para que tenga un ancho de 780 píxeles, un fondo blanco, sin margen (desde el lado izquierdo de la página), un borde negro de 1 píxel y texto alineado a la izquierda. Los resultados de aplicar la regla a la etiqueta div de contenedor son los siguientes:
LA REGLA #SIDEBAR:
La siguiente regla CSS crear reglas de estilo para la etiqueta div de barra lateral:
La regla #sidebar aplica estilo a la etiqueta div de barra lateral para que tenga una ancho de 200 píxeles, un fondo gris, un relleno superior e inferior de 15 píxeles, un relleno derecho de 10 píxeles y uno izquierdo de 20 píxeles. (El orden predeterminado para el relleno es superior-derecho-inferior-izquierdo.) Además, la regla sitúa la etiqueta div de barra lateral con una propiedad float: left, que empuja la etiqueta div de barra lateral al lado izquierdo de la etiqueta div de contenedor. Los resultados de aplicar la regla a la etiqueta div de barra lateral son los siguientes:
LA REGLA #MAINCONTAINER:
Por último, la regla CSS para la etiqueta div de contenedor principal finaliza el diseño:
La regla #mainContent aplica estilo a la etiqueta div de contenedor principal para que tenga un margen izquierdo de 250 píxeles, lo que significa que coloca 250 píxeles de espacio entre el lado izquierdo de la etiqueta div de contenedor y el lado izquierdo de la etiqueta div de contenedor principal. Además, la regla añade 20 píxeles de espacio a los lados derecho, inferior e izquierdo de la etiqueta div de contenedor principal.
Los resultados de aplicar la regla a la etiqueta div mainContent son los siguientes:
El código completo es el siguiente:
Debe estar conectado para enviar un comentario.