Aspectos básicos de las hojas de estilos en cascada

Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el aspecto del contenido de una página web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación. 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).

El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que desea para la página. Con CSS, puede 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 utiliza 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.

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.

Reglas CSS

Una regla de formato CSS consta de dos partes: el selector y la declaración (o, en la mayoría de los casos, un bloque de declaraciones). El selector es un término (por ejemplo, p, h1, un nombre de clase o un identificador) que identifica el elemento con formato; el bloque de declaraciones define cuáles son las propiedades de estilo. En el siguiente ejemplo, h1 es el selector y el código comprendido entre las llaves ({}) es el bloque de declaraciones:

Cada declaración consta de dos partes: la propiedad (por ejemplo, font-family) y el valor (por ejemplo, Helvetica). En la regla CSS anterior, se ha creado un estilo concreto para las etiquetas h1: el texto de todas las etiquetas h1 vinculadas a este estilo tendrá un tamaño de 16 píxeles, fuente Helvetica y negrita.

El estilo (que procede de una regla o un conjunto de reglas) reside en un lugar independiente del texto al que aplica formato (normalmente en una hoja de estilos externa o en la sección head de un documento HTML). Por consiguiente, una regla para las etiquetas h1 puede aplicarse a muchas etiquetas a la vez (y, en el caso de las hojas de estilos externas, la regla puede aplicarse a muchas etiquetas a la vez de distintas páginas). De este modo, CSS proporciona una capacidad de actualización extremadamente sencilla. Al actualizar una regla CSS en un lugar, el formato de todos los elementos que usan ese estilo definido se actualiza automáticamente con el nuevo estilo.

En Dreamweaver, pueden definirse los siguientes tipos de estilos:

• Los estilos de clase permiten aplicar propiedades a cualquier elemento o elementos de la página.

• Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como por ejemplo h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con la etiqueta h1 se actualiza inmediatamente.

• Los estilos avanzados redefinen el formato de una determinada combinación de elementos o de otros selectores permitidos por el CSS (por ejemplo, el selector td h2 se aplica siempre que aparece un encabezado h2 dentro de la celda de una tabla). Los estilos avanzados también redefinen el formato de las etiquetas que contienen un atributo id específico (por ejemplo, los estilos definidos por #miEstilo se aplican a todas las etiquetas que contienen el par atributo-valor id="miEstilo").

Las reglas CSS pueden residir en las ubicaciones siguientes:

Conjuntos de reglas CSS almacenados en un archivo CSS (.css) independiente externo (no un archivo HTML). Este archivo se asocia a una o varias páginas de un sitio Web mediante un vínculo o una regla @import situada en la sección head de un documento.

Conjuntos de reglas CSS incluidos en una etiqueta style de la sección head de un documento HTML.

Se definen dentro de instancias específicas de etiquetas en un documento HTML. (No se recomienda el uso de estilos en línea).

Dreamweaver reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS. Dreamweaver también representa la mayoría de los estilos aplicados directamente en la vista de Diseño. (Sin embargo, la mejor manera de consultar el formato real de la página en un momento dado es usar la opción de vista previa y consultarlo en una ventana del navegador). Algunos estilos CSS se representan de forma distinta en Microsoft Internet Explorer, Netscape, Opera y Apple Safari u otros navegadores, mientras que otros no son compatibles actualmente con ningún navegador.

Estilos en cascada

El término en cascada indica la forma en que finalmente un navegador muestra los estilos para elementos concretos de una página web. Los estilos que se ven en una página web proceden de tres fuentes: la hoja de estilos creada por el autor de la página, las opciones de estilo personalizadas elegidas por el usuario (si las hay) y los estilos predeterminados del propio navegador. En los temas anteriores se describe la creación de estilos para una página web como autor tanto de la página web como de la hoja de estilos que se adjunta a dicha página. Pero los navegadores también tienen sus propias hojas de estilos predeterminadas que determinan cómo deben representarse las páginas Web, a lo que se suma el hecho de que los usuarios pueden personalizar sus navegadores mediante la selección de opciones que ajustan la visualización de las páginas Web. El aspecto final de una página web es el resultado de las reglas aplicadas por estas tres fuentes en conjunto (o “en cascada”) para representar la página web de forma óptima.

Este concepto se ilustra bien con una etiqueta común: la etiqueta de párrafo, o etiqueta <p>. De manera predeterminada, los navegadores se suministran con hojas de estilos que definen la fuente y el tamaño del texto del párrafo (es decir, el texto situado entre etiquetas <p> en el código HTML). En Internet Explorer, por ejemplo, todo el texto del cuerpo, incluido el texto de los párrafos, se muestra de manera predeterminada con la fuente Times New Roman, Mediana.

Sin embargo, como autor de una página, puede crear una hoja de estilos que anule el estilo predeterminado del navegador para la fuente de párrafo y el tamaño de fuente. Por ejemplo, puede crear la siguiente regla en su hoja de estilos:

Cuando un usuario carga la página, la configuración de fuente de párrafo y de tamaño de fuente establecida por usted como autor de la página anula la configuración de texto de párrafo del navegador.

Los usuarios pueden elegir opciones para personalizar de forma óptima la visualización en el navegador para su propio uso. En Internet Explorer, por ejemplo, el usuario puede seleccionar Ver > Tamaño de texto > Más grande para ampliar la fuente de página a un tamaño más legible si considera que la fuente es demasiado pequeña. En último término (al menos en este caso), la opción seleccionada por el usuario anula los estilos predeterminados por el navegador para tamaño de fuente y los estilos de párrafo creados por el autor de la página web.

La herencia es otro aspecto importante de los estilos en cascada. Las propiedades de la mayoría de los elementos de una página web son heredadas: por ejemplo, las etiquetas de párrafo heredan determinadas propiedades de las etiquetas de cuerpo, las etiquetas span heredan determinadas propiedades de las etiquetas de párrafo, etc. Por consiguiente, si crea la siguiente regla en su hoja de estilos:

Todo el texto de los párrafos de la página web (así como el texto que hereda propiedades de la etiqueta de párrafo) será Arial cursiva porque la etiqueta de párrafo hereda estas propiedades de la etiqueta de cuerpo. No obstante, puede hacer que sus reglas sean más específicas creando estilos que anulen la formula estándar de herencia. Por ejemplo, si crea las siguientes reglas en su hoja de estilos:

Todo el texto de cuerpo será Arial cursiva excepto el texto de los párrafos (y su texto heredado), que se mostrará como Courier normal (sin cursiva). Técnicamente, la etiqueta de párrafo hereda primero las propiedades que se establecen para la etiqueta de cuerpo, pero luego omite estas propiedades porque tiene definidas sus propias propiedades. Dicho de otro modo, aunque los elementos de página generalmente heredan las propiedades de arriba, la aplicación directa de una propiedad a una etiqueta siempre provoca la anulación de la fórmula estándar de herencia.

La combinación de todos los factores descritos anteriormente, a los que se suman otros como la especificidad de CSS (un sistema que pondera de diferente forma cada tipo de regla CSS) y el orden de las reglas CSS, crean en último término una cascada compleja en la que los elementos con mayor prioridad anulan las propiedades de los que tienen menor prioridad. Para obtener más información sobre las reglas que determinan la cascada, la herencia y la especificidad, visite www.w3.org/TR/CSS2/cascade.html.

Aplicación de formato a texto y CSS

De forma predeterminada, Dreamweaver utiliza hojas de estilos en cascada (CSS) para aplicar formato al texto. Los estilos que se aplican al texto mediante el inspector de propiedades o los comandos de menú crean reglas CSS que se incrustan en la sección head del documento actual.

También puede utilizarse el Diseñador de CSS para crear y editar reglas y propiedades CSS. El Diseñador de CSS es un editor más eficaz que el inspector de propiedades y muestra todas las reglas CSS definidas para el documento actual, con independencia de si están incrustadas en la sección head del documento o si están en una hoja de estilos externa. Adobe recomienda utilizar el Diseñador de CSS (en lugar del inspector de propiedades) como herramienta principal para la creación y edición de hojas de estilos en cascada. Como resultado, el código será más limpio y más fácil de mantener.

Para obtener mas información sobre el Diseñador de CSS, consulte Diseño de páginas con el Diseñador de CSS.

Además de los estilos y de las hojas de estilos que cree, puede usar hojas de estilos suministradas con Dreamweaver para aplicarlas a los documentos.

Para ver un tutorial sobre la aplicación de formato al texto con CSS, consulte www.adobe.com/go/vid0153_es.

Propiedades de la notación CSS abreviada

La especificación CSS permite crear estilos mediante una sintaxis abreviada conocida como notación CSS abreviada. La notación CSS abreviada permite especificar los valores de diversas propiedades con una sola declaración. Por ejemplo, la propiedad font permite definir las propiedades font-style, font-variant, font-weight, font-size, line-height y font-family en una única línea.

Un aspecto esencial que debe tenerse en cuenta cuando se utiliza CSS en forma abreviada es que a los valores omitidos en una propiedad CSS en forma abreviada se les asignan sus valores predeterminados. Esto puede hacer que las páginas se muestren de forma incorrecta cuando hay dos o más reglas CSS asignadas a la misma etiqueta.

Por ejemplo, la regla h1 que se muestra a continuación utiliza la sintaxis CSS sin abreviar. Observe que a las propiedades font-variant, font-stretch, font-size-adjust y font-style se les han asignado sus valores predeterminados.

La misma etiqueta podría tener el aspecto siguiente si se especificara como única propiedad en forma abreviada:

Con la notación abreviada, se asignan los parámetros predeterminados a los valores omitidos. Así, en el ejemplo de notación abreviada anterior se omiten las etiquetas font-variant, font-style, font-stretch y font-size-adjust.

Si tiene estilos definidos en más de una ubicación (por ejemplo, incluidos en una página HTML e importados de una hoja de estilos externa) y se ha utilizado tanto el formato abreviado como el formato no abreviado en la sintaxis CSS, tenga en cuenta que las propiedades omitidas en una regla de notación abreviada pueden tener prioridad (cascada) sobre las propiedades que están definidas explícitamente en otra regla.

Por este motivo, Dreamweaver utiliza la notación CSS no abreviada de forma predeterminada. Con ello se evitan posibles problemas causados por una regla de notación abreviada que tenga prioridad sobre una regla con formato no abreviado. Si abre una página web codificada con notación CSS abreviada en Dreamweaver, tenga en cuenta que Dreamweaver creará las nuevas reglas CSS en formato no abreviado. Puede especificar el modo en que Dreamweaver crea y edita las reglas CSS mediante la modificación de las preferencias de edición de CSS en la categoría Estilos CSS del cuadro de diálogo Preferencias (Edición > Preferencias en Windows; Dreamweaver > Preferencias en Macintosh).

Dreamweaver y CSS

En Dreamweaver, puede trabajar con CSS de varias maneras:

• Puede usar el Diseñador de CSS para crear su CSS con una programación mínima. Para más información, consulte Diseño de páginas con el Diseñador de CSS. 
• También puede programar CSS a mano. Para obtener más información sobre las funciones de programación que ofrece Dreamweaver, consulte Entorno de programación en Dreamweaver.
• Si prefiere trabajar con archivos Sass, Scss, o Less, puede programar sus archivos usando su sintaxis preferida y utilizarlos en Dreamweaver. Para obtener más información, consulte Preprocesadores CSS.