Dreamweaver ''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.

Panel Estilos CSS

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 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 aplican de forma inmediata; de este modo, podrá previsualizar el trabajo a medida que lo vaya llevando a cabo.