Panel Estilos CSS

El panel Estilos CSS permite supervisar las reglas y propiedades CSS que afectan al elemento de página seleccionado (modo Actual) o todas las reglas y propiedades que afectan al documento (modo Todo). Un botón situado en la parte superior del panel permite cambiar entre estos dos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual.

En modo Actual, el panel Estilos CSS muestra tres secciones: un panel denominado Resumen de la selección que muestra las propiedades de CSS de la selección actual del documento, un panel denominado Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel denominado Propiedades que permite editar las propiedades CSS de la regla aplicada a la selección.

Puede cambiar el tamaño de los paneles arrastrando los bordes que los separan, y el tamaño de las columnas arrastrando las líneas de división.

El panel Resumen de la selección muestra un resumen de propiedades CSS y sus valores para el elemento seleccionado en el documento activo. El resumen muestra las propiedades de todas las reglas que afectan directamente a la selección. Sólo se muestran las propiedades establecidas.

Por ejemplo, las siguientes reglas crean un estilo de clase y un estilo de etiqueta (en este caso de párrafo):

Al seleccionar texto de un párrafo con el estilo de clase .foo en la ventana de documento, el panel Resumen de la selección muestra las propiedades correspondientes para ambas reglas, dado que ambas afectan a la selección. En este caso, el panel Resumen de la selección mostraría las propiedades siguientes:

El panel Resumen de la selección organiza las propiedades por orden creciente de especificidad. En el ejemplo anterior, el estilo de etiqueta define el tamaño de fuente y el estilo de clase define la familia de fuentes y el color. (La familia de fuentes definida por el estilo de clase tiene prioridad sobre la familia de fuentes definida por el estilo de etiqueta porque los selectores de clase son más específicos que los selectores de etiquetas. Para obtener más información sobre la especificidad de CSS, consulte www.w3.org/TR/CSS2/cascade.html).

El panel Reglas muestra dos vistas distintas (vista Acerca de o vista Reglas) en función de la selección realizada. En la vista Acerca de (la vista predeterminada), el panel muestra el nombre de la regla que define la propiedad CSS seleccionada y la ubicación del archivo que contiene la regla. En la vista Reglas, el panel muestra una cascada o jerarquía de reglas que afectan, directa o indirectamente, a la selección actual. (La etiqueta a la que se aplica la regla directamente aparece en la columna de la derecha). Puede cambiarse entre las dos vistas haciendo clic en los botones Mostrar información y Mostrar reglas en cascada en la esquina superior derecha del panel Reglas.

Al seleccionar una propiedad del panel Resumen de la selección, todas las propiedades de la regla de definición aparecen en el panel Propiedades. (La regla de definición también se selecciona en el panel Reglas si la vista Reglas está activada). Por ejemplo, si tiene una regla denominada .maintext que define una familia de fuentes, un tamaño de fuente y un color, la selección de cualquiera de las propiedades del panel Resumen de la selección mostrará todas las propiedades definidas por la regla .maintext en el panel Propiedades, así como la regla .maintext seleccionada en el panel Reglas. (Además, la selección de cualquier regla del panel Reglas muestra las propiedades de dicha regla en el panel Propiedades). Posteriormente podrá utilizar el panel Propiedades para modificar rápidamente la CSS tanto si está incrustada en el documento actual como si está vinculada a través de una hoja de estilos adjunta. De manera predeterminada, el panel Propiedades sólo muestra las propiedades que ya se han establecido y las ordena por orden alfabético.

Puede optar por mostrar el panel Propiedades en otras dos vistas. La vista de categoría muestra las propiedades agrupadas en categorías, como Fuente, Fondo, Bloque, Borde, etc., con las propiedades situadas en la parte superior de cada categoría y mostradas en texto azul. La vista de lista muestra una lista alfabética de todas las propiedades y también sitúa las propiedades establecidas en la parte superior con texto azul. Para cambiar entre estas vistas, haga clic en los botones Mostrar vista de categoría, Mostrar vista de lista o Mostrar sólo las propiedades establecidas, situados en la parte inferior izquierda del panel Propiedades.

En todas las vistas, las propiedades establecidas aparecen en color azul; las propiedades que no son pertinentes para la selección aparecen tachadas con una línea de color rojo. Al pasar el cursor por encima de una regla que no es importante aparecerá un mensaje donde se indicará el motivo por el cual dicha regla no tiene importancia. Normalmente las propiedades son irrelevantes porque se anulan o porque no son propiedades que se han heredado.

Todos los cambios que realice en el panel Propiedades se aplicarán de forma inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo.

El panel Estilos CSS en modo Todo

En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades le permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.

Puede cambiar el tamaño de cada panel arrastrando el borde que los separa y el tamaño de las columnas de propiedades arrastrando sus líneas de división.

Al seleccionar una regla del panel Todas las reglas, aparecen todas las propiedades que se definen en dicha regla en el panel Propiedades. Posteriormente podrá utilizar el panel Propiedades para modificar rápidamente la CSS tanto si está incrustada en el documento actual como si está vinculada a través de una hoja de estilos adjunta. De manera predeterminada, el panel Propiedades sólo muestra las propiedades que se han establecido anteriormente y las ordena por orden alfabético.

Puede optar por mostrar las propiedades en otras dos vistas. La vista de categoría muestra las propiedades agrupadas en categorías, como Fuente, Fondo, Bloque, Borde, etc., con las propiedades situadas en la parte superior de cada categoría. La vista de lista muestra una lista alfabética de todas las propiedades y también sitúa las propiedades establecidas en la parte superior. Para cambiar entre estas vistas, haga clic en los botones Mostrar vista de categoría, Mostrar vista de lista o Mostrar sólo las propiedades establecidas, situados en la parte inferior izquierda del panel Propiedades. En todas las vistas, las propiedades establecidas se muestran en color azul.

Todos los cambios que realice en el panel Propiedades se aplicarán de forma inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo.

Botones y vistas del panel Estilos CSS

En ambos modos, Todo y Actual, el panel Estilos CSS contiene tres botones que permiten modificar la vista del panel Propiedades (el panel inferior):

Divide las propiedades CSS compatibles con Dreamweaver en ocho categorías: fuente, fondo, bloque, borde, cuadro, lista, posición y extensiones. Las propiedades de cada categoría se encuentran en una lista que se puede expandir o contraer haciendo clic en el botón con el signo más (+) que aparece al lado del nombre de la categoría. Las propiedades aparecen (en color azul) en la parte superior de la lista.

Muestra todas las propiedades CSS compatibles con Dreamweaver por orden alfabético. Las propiedades aparecen (en color azul) en la parte superior de la lista.

Sólo muestra las propiedades que se han establecido. La vista de propiedades establecidas es la vista predeterminada.

En ambos modos, Todo y Actual, el panel Estilos CSS también contiene los siguientes botones:

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.

Abre un cuadro de diálogo en el que es posible 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).

Abre un cuadro de diálogo en el que es posible editar los estilos del documento actual o de una hoja de estilos externa.

Elimina el estilo o la propiedad seleccionada del panel Estilos CSS, así como el formato de cualquier elemento al que se haya aplicado. (Sin embargo, no elimina las propiedades de clase o ID a las que hace referencia dicho estilo). El botón Eliminar regla CSS también permite anular la asociación (o “desvincular”) una hoja de estilos CSS adjunta.

Apertura del panel Estilos CSS

El panel Estilos CSS le permite ver, crear, editar y quitar estilos CSS, además de adjuntar hojas de estilos externas a los documentos.