HOJAS DE ESTILO EN CASCADA (CSS)

Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Puede asignar viñetas de lista personalizadas y especificar distintos tamaños y unidades de fuente para conseguir un tratamiento más coherente del diseño y el aspecto de la página en múltiples navegadores; puede controlar el formato y la posición de elementos de nivel de bloque (block-level) de una página Web.

Una regla de estilo CSS consta de dos partes: el selector y la declaración. El selector es el nombre del estilo (TR o P) y la declaración define qué elementos forman el estilo. La declaración, a su vez, consta de dos partes: la propiedad y el valor. La expresión “en cascada” hace referencia a la posibilidad de aplicar varias hojas de estilos a una misma página Web.

Cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.

En Dreamweaver, utilice el panel Estilos CSS para crear, ver y adjuntar atributos de estilo a los documentos. Además de los estilos y de las hojas de estilos que crea, utilice hojas de estilos suministradas con Dreamweaver.

Para definir los siguientes tipos de hojas de estilos CSS en Dreamweaver:

• Los estilos CSS personalizados, también llamados estilos de clase, le permiten configurar atributos de estilo a cualquier rango o bloque de texto. Consulte Aplicación de un estilo CSS personalizado (clase).
• Los estilos de etiquetas HTML redefinen el formato de una determinada etiqueta, como h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto formateado con dicha etiqueta se actualiza inmediatamente.
• Los estilos del selector CSS redefinen el formato de una determinada combinación de etiquetas (por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2 dentro de una celda de tabla) o de todas las etiquetas que contienen un atributo id específico (por ejemplo, #miEstilo se aplica a todas las etiquetas que contienen el par atributo-valor ID=“miEstilo”).
• Las hojas de estilos CSS residen en el área head del documento. Los estilos CSS pueden definir los atributos de formato de etiquetas HTML o rangos de texto identificados mediante un atributo class. Dreamweaver MX reconoce los estilos definidos en documentos existentes siempre que se ajusten a las directrices de los estilos CSS.

Para que los estilos CSS controlen el formato de un párrafo, deberá quitar todos los estilos HTML y el formato HTML manual.

La mayoría de los atributos de estilo que aplique se pueden ver en la ventana de documento o en una vista previa del documento en la ventana del navegador para comprobar el resultado. Algunos de los atributos de estilo CSS se reproducen de forma distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y otros no son compatibles actualmente con ningún navegador.

Mientras trabaja en el panel Estilos CSS, utilice la función de Dreamweaver Hoja de estilos de tiempo de diseño para ocultar o mostrar los atributos de hoja de estilos mientras diseña una página con Dreamweaver.

UTILIZACION DEL PANEL ESTILOS

Para abrir el panel Estilos CSS, lleve a cabo una de estas operaciones:

• Elija Ventana > Estilos CSS o pulse Mayús+F11.
• Los botones de opción Aplicar estilos y Editar estilos situados en la parte superior del panel Estilos CSS le permiten seleccionar distintas vistas de los estilos CSS asociados al documento actual.
• La vista Aplicar estilos se utiliza para seleccionar un estilo de clase y aplicarlo a un elemento del documento. Esta vista sólo muestra los estilos personalizados (de clase). Los estilos HTML redefinidos y los estilos del selector no se muestran en este panel. Como están asociados a una etiqueta HTML, sus atributos de estilo se aplican automáticamente a cualquier etiqueta del documento afectada por el estilo definido. Por ejemplo, si define atributos de estilo para la etiqueta table, la tabla de su documento se actualizará automáticamente con las definiciones de estilo que haya seleccionado.
• El vista Editar estilos le permite visualizar la definición de los estilos asociados al documento actual. Esta vista muestra la definición de los estilos CSS personalizados (de clase), las etiquetas HTML redefinidas y los estilos CSS del selector. También puede utilizar la vista Editar estilos para visualizar las Hojas de estilos de tiempo de diseño que ha aplicado al documento.
• Al crear o adjuntar hojas de estilos CSS, el nombre y los atributos del estilo aparecerán en la vista Editar estilos del panel Estilos CSS. Esta vista muestra una lista de los selectores definidos en todas las etiquetas de estilo y hojas de estilos importadas o vinculadas externamente. Aplicar estilos le permite visualizar los estilos aplicados en el documento actual, así como los estilos disponibles en una hoja de estilos externa adjunta.
• Cuando se crea un estilo personalizado (clase), aparece en el panel Estilos CSS y en el submenú Texto > Estilos CSS.
• Los botones siguientes se encuentran en la parte inferior del panel Estilos CSS:
  • Adjuntar hoja de estilos abre el cuadro de diálogo Vincular hoja de estilos externa. Seleccione una hoja de estilos externa para adjuntar o para importar al documento actual. Para obtener información sobre cómo adjuntar una hoja de estilos externa, consulte Creación y establecimiento de vínculos con una hoja de estilos CSS externa.
  • Nuevo estilo CSS abre el cuadro de diálogo Nuevo estilo CSS. Puede utilizar el cuadro de diálogo Nuevo estilo CSS para seleccionar el tipo de estilo que va a crear, por ejemplo, para crear un estilo de clase, redefinir una etiqueta HTML o definir un selector CSS.
  • Editar hoja de estilos abre el cuadro de diálogo Editar hoja de estilos. Edite los estilos en el documento actual o en una hoja de estilos externa.
  • Eliminar estilo CSS elimina el estilo seleccionado del panel Estilos CSS, así como el formato de cualquier elemento al que se haya aplicado dicho estilo. Haga clic con el botón derecho (Windows) o mientras presiona la tecla Control (Macintosh) en el panel Estilos CSS para abrir un menú contextual de opciones de trabajo con comandos de la hoja de estilos CSS.

CREACION DE UN NUEVO ESTILO CSS

Para crear un estilo CSS nuevo que le permitirá automatizar la aplicación de formato a etiquetas HTML o a rangos de texto identificados mediante un atributo class:

• Sitúe el punto de inserción en el documento y lleve a cabo una de las siguientes operaciones para abrir el cuadro de diálogo Nuevo estilo CSS.
• En el panel Estilos CSS (Ventana > Estilos CSS), haga clic en el botón Nuevo estilo CSS (+) situado en la parte inferior derecha del panel.
• Si es necesario, en el inspector de propiedades, haga clic en el botón Alternar modos CSS/HTML para cambiar al Modo CSS y, a continuación, en el menú emergente Estilo CSS, seleccione Nuevo estilo CSS.
• Elija Texto > Estilos CSS > Nuevo estilo CSS. Aparecerá el cuadro de diálogo Nuevo estilo CSS.

Defina el tipo de estilo CSS que desea crear:

• Para crear un estilo personalizado que se pueda aplicar como atributo clase a un rango o un bloque de texto, seleccione Crear estilo person. (clase) y escriba el nombre del estilo en el campo Nombre.
• Los nombres de estilos personalizados (clase) deben comenzar por un punto y pueden contener cualquier combinación alfanumérica. Por ejemplo, .miencabezado1. Si no introduce el punto inicial, Dreamweaver lo hará de forma automática.
• Para redefinir el formato predeterminado de una etiqueta HTML específica, seleccione Redefinir etiqueta HTML. En el campo Etiqueta, introduzca una etiqueta HTML o elija una en el menú emergente.
• Para redefinir el formato predeterminado de una combinación concreta de etiquetas que contengan un código específico de atributo Id, seleccione Usar selector CSS. En el campo Selector, introduzca una o más etiquetas HTML o elíjalas en el menú emergente. Los selectores disponibles en el menú emergente son a:activos, a:activable, a:vínculo y a:visitado.
• Seleccione la ubicación donde se definirá el estilo:Para crear una hoja de estilos externa, elija Nuevo archivo de hoja de estilos.
  • Para incrustar el estilo en el documento actual, seleccione Sólo este documento.
  • Haga clic en Aceptar. Aparecerá el cuadro de diálogo Definición de estilos.
  • Elija las opciones de estilo que desea establecer para el estilo CSS nuevo. Cuando termine de configurar los atributos de estilo, haga clic en Aceptar.