Cómo: Usar las ventanas Aplicar estilos y Administrar estilos

Actualización: noviembre 2007

Las ventanas Aplicar estilos y Administrar estilos permiten aplicar, modificar, cambiar de nombre y eliminar estilos. Puede asociar o desasociar también hojas de estilos en cascada (CSS) externas, seleccionar todas las instancias de un estilo y buscar el código que contiene el conjunto de reglas de un estilo.

Cada ventana tiene un uso concreto. Utilice la ventana Aplicar estilos para aplicar un estilo único o varios estilos a un elemento de página. En la ventana Aplicar estilos se muestra cada estilo según las reglas del estilo. Por tanto, puede identificar rápidamente el estilo con el que desea trabajar examinando simplemente el aspecto del estilo en la ventana.

Utilice la ventana Administrar estilos para cambiar la ubicación o el orden de los estilos. Puede mover los estilos de una CSS externa a una CSS interna y viceversa, o puede mover la ubicación de un estilo dentro de una hoja de estilos o bloque de estilos.

Ambas herramientas utilizan iconos para indicar cómo se define el estilo. En la tabla siguiente se muestra y se describe cada icono.

Icono	Descripción
	Un punto rojo indica un estilo basado en el identificador
	Un punto verde indica un estilo basado en la clase.
	Un punto azul indica un estilo basado en el elemento.
	Un punto amarillo indica un estilo insertado.
	Un círculo alrededor de un punto indica que el estilo se utiliza en la página actual.
	El signo @ indica una hoja de estilos en cascada externa importada.

Trabajar con la ventana Aplicar estilos

En la ventana Aplicar estilos se muestran todas las reglas de estilo CSS definidas para una página. Entre éstas se incluyen las reglas de estilo que se definen en hojas de estilos externas, como estilos insertados y como estilos definidos en la página. Las reglas de estilo basadas en la clase y el identificador aparecen bajo el nombre del archivo .css externo que contiene el estilo. Si la regla de estilo se define en la página, aparece en Página actual. Las reglas de estilo basadas en elementos se organizan de la misma manera, pero aparecen bajo un encabezado independiente denominado Selectores contextuales.

Puede definir la ventana para que se muestren todas las reglas de estilo. También puede restringir la lista a sólo las reglas de estilo que se utilizan en la página web actual o en la selección actual de la página. Independientemente de las opciones que seleccione, las reglas de estilo basadas en elementos y las reglas de estilo insertadas sólo aparecen en la ventana en dos casos: cuando se coloca el puntero del mouse sobre los elementos de página que utilizan el estilo y cuando se selecciona contenido que utiliza el estilo.

También puede ordenar la lista de estilos que aparecen en la ventana Aplicar estilos.

Si resulta complicado ver un determinado estilo contra el fondo de la ventana, puede seleccionar un color que aparezca en la ventana detrás de los estilos que no contienen una propiedad de fondo.

Nota:
Para mostrar temporalmente todas las reglas de un estilo en una ventana emergente, mantenga el puntero del mouse sobre el estilo en la ventana Aplicar estilos.

Introducción a la ventana Aplicar estilos

La interfaz de usuario de la ventana Aplicar estilos tiene las características siguientes:

• Nuevo estilo, que proporciona acceso al cuadro de diálogo Estilos.

• Adjuntar hoja de estilos, que permite seleccionar una hoja de estilos para asociarla a la página actual.

• Borrar estilos, que quita de la selección actual todas las reglas de estilo insertadas y basadas en la clase.

• Página actual, que muestra las reglas de estilo basadas en la clase y en el identificador de la página actual y los archivos CSS externos importados.

• Un archivo CSS externo, indicado por el signo @, que muestra todas las reglas de estilo importadas en la página web actual.

• Un archivo CSS externo, que se vincula desde la página web actual y se muestra como una sección independiente.

• Un borde rectangular sólido alrededor de un estilo, que indica que el estilo se utiliza en la selección actual.

• Selectores contextuales, que muestra las reglas de estilo basadas en elementos utilizadas por la selección actual.

• Estilo insertado, que muestra las reglas de estilo que se aplican al elemento insertado seleccionado.

• Un menú de acceso directo para cada regla de estilo, que permite realizar numerosas tareas relacionadas con el estilo.

Utilizar la ventana Aplicar estilos

La ventana Aplicar estilos permite aplicar rápidamente un estilo único o varios estilos a un elemento de página.

Para aplicar estilos a un elemento de página mediante la ventana Aplicar estilos

1. Para mostrar la ventana Aplicar estilos, en el menú Formato, haga clic en Estilos CSSy luego en Aplicar estilos.

2. En una página web, en la vista Diseño o en la vista Código fuente, seleccione el elemento al que desea aplicar un estilo y, a continuación, siga alguno de estos procedimientos en la ventana Aplicar estilos:

   • Para aplicar una sola regla de estilo existente, haga clic en el estilo de clase o identificador que desea aplicar.

   • Para aplicar varias reglas de estilo existentes, presione la tecla CTRL mientras hace clic en cada uno de los estilos que desea aplicar.

Puede cambiar el orden de los estilos, cambiar los estilos que aparecen y personalizar la ventana para mostrar los elementos que desee.

Para ordenar los estilos mediante la ventana Aplicar estilos

• En la ventana Aplicar estilos, haga clic en Opciones y siga uno de estos procedimientos:

  • Para mostrar las reglas de estilo en el orden en que aparecen en la CSS, haga clic en Clasificar por orden.

  • Para mostrar los estilos por orden alfabético y por tipo de estilo (basados en la clase o en el identificador), haga clic en Clasificar por tipo.

Puede mostrar u ocultar las reglas de estilo en la ventana Aplicar estilos. Los estilos basados en elementos y las reglas de estilo insertadas sólo aparecen en la ventana Aplicar estilos al mantener o el puntero del mouse sobre el contenido que utiliza el estilo o al seleccionar contenido que utiliza el estilo.

Para mostrar u ocultar estilos mediante la ventana Aplicar estilos

• En la ventana Aplicar estilos, haga clic en Opciones y siga uno de estos procedimientos:

  • Para mostrar todas las reglas de estilo incluidas en la CSS externa, interna e insertada de la página web actual, haga clic en Mostrar todos los estilos.

  • Para mostrar sólo las reglas de estilo que se utilizan en la página web actual, haga clic en Mostrar estilos utilizados en la página actual.

  • Para mostrar sólo las reglas de estilo utilizadas por la selección actual en la página web, haga clic en Mostrar estilos utilizados en la selección.

Si una regla de estilo no tiene un color de fondo, puede aplicarle uno para ver más fácilmente el nombre del estilo en la ventana Aplicar estilos. Si el estilo tiene una regla de estilo de fondo, el fondo se muestra con el estilo.

Para mostrar un fondo de color en la ventana Aplicar estilo

1. En la ventana Aplicar estilos, haga clic en Opciones y luego en Vista previa del color de fondo.

2. En el cuadro de diálogo Más colores, seleccione un color y, a continuación, haga clic en Aceptar.

Trabajar con la ventana Administrar estilos

En la ventana Administrar estilos se muestran todas las reglas de estilo definidas en la hoja de estilos en cascada (CSS) externa de la página. Se muestran también las reglas de estilo definidas en la página, pero no como estilos insertados. Puede utilizar la ventana Administrar estilos para mover los estilos de una hoja de estilos externa al elemento style de la página y viceversa. También puede utilizar la ventana para mover la ubicación de un estilo dentro del conjunto de reglas de estilo CSS.

Puede definir la ventana para mostrar todas las reglas de estilo o restringir la lista a sólo las reglas de estilo que se utilizan en la página web actual o en la selección actual de la página. Todas las reglas de estilo basadas en la clase, en el elemento y en el identificador aparecen bajo el nombre del archivo .css externo que contiene la regla de estilo. Si la regla de estilo se encuentra en la página actual, aparece en Página actual.

Nota:
Para mostrar temporalmente todas las reglas de un estilo en una ventana emergente, mantenga el puntero del mouse sobre el estilo en la ventana Aplicar estilos.

Introducción a la ventana Administrar estilos

La interfaz de usuario de la ventana Administrar estilos tiene las características siguientes:

• Nuevo estilo, que proporciona acceso al cuadro de diálogo Estilos.

• Adjuntar hoja de estilos, que permite seleccionar una hoja de estilos para asociarla a la página actual.

• Página actual, que muestra las reglas de estilo basadas en la clase y en el identificador de la página actual y de todos los archivos CSS externos importados.

• Una ficha para los archivos .css externos vinculados desde la página web actual.

• Agrupación de los selectores predeterminados, que muestra los selectores de los estilos que contienen varios selectores en un grupo. Puede mostrar los selectores por separado haciendo clic en Opciones y en Separar selectores agrupados.

Para mostrar una vista previa de un estilo seleccionado en la ventana Administrar estilos, haga clic en Opciones y luego en Mostrar vista previa del estilo seleccionado.

Utilizar la ventana Administrar estilos

Puede cambiar el orden de los estilos y personalizar la ventana para mostrar los elementos que desee. Si sube o baja un estilo en la lista, también moverá el estilo en la hoja de estilos. Este cambio puede afectar al orden de las propiedades del estilo. Por ejemplo, si un atributo de propiedad se establece en dos estilos diferentes, el último estilo tendrá prioridad.

Nota:
Cuando la ventana Administrar estilos está establecida en Clasificar por elemento o Clasificar por tipo, no puede mover un estilo a un punto determinado de la lista de estilos. En ambos casos, sólo puede mover un estilo de una CSS externa a otra CSS externa o a la página, o viceversa arrastrando el estilo hasta el nombre del archivo CSS externo o a Página actual.

Para mover un estilo mediante la ventana Administrar estilos

1. Para mostrar la ventana Administrar estilos, en el menú Formato, haga clic en Estilos CSS y luego en Administrar estilos.

2. En la ventana Administrar estilos, haga clic en Opciones, haga clic en Clasificar por orden y, a continuación, siga este procedimiento:

   • Para mover la ubicación de un estilo en la CSS, arrastre el estilo hacia arriba o abajo de la lista. Por ejemplo, puede mover los estilos que utiliza con frecuencia para que aparezcan juntos.

   • Para mover un estilo de una página a una CSS externa asociada a la página, arrastre el estilo desde Página actual al nombre de la CSS externa o a un punto determinado de la lista de estilos de la CSS externa.

   • Para mover un estilo de una CSS externa a una página, arrastre el estilo desde el nombre de la CSS externa a Página actual o a un determinado punto de la lista de estilos bajo Página actual. Si no aparece Página actual, agregue un elemento style dentro del elemento head de la página web.

   • Para mover un estilo desde una CSS externa a una CSS externa diferente, arrastre el estilo al nombre de la CSS externa que desee o a un punto determinado de la lista de estilos de la CSS externa.

Aunque la ventana Administrar estilos está concebida para administrar estilos, también puede utilizarla para aplicar un estilo a un elemento de página.

Para aplicar un estilo mediante la ventana Administrar estilos

1. En una página web, en la vista Diseño o en la vista Código fuente, seleccione el elemento al que desea aplicar un estilo.

2. Haga clic con el botón secundario del mouse en el estilo de clase o de identificador que desea aplicar y, en el menú de acceso directo, haga clic en Aplicar estilo.

También puede ordenar los estilos utilizando las opciones del botón Opciones.

Para ordenar los estilos mediante la ventana Administrar estilos

• En la ventana Administrar estilos, haga clic en Opciones y siga uno de estos procedimientos:

  • Haga clic en Clasificar por orden para mostrar los estilos según el orden en el que aparecen en la CSS.

  • Haga clic en Clasificar por elemento para mostrar los estilos bajo el elemento HTML al que se aplica cada uno de ellos.

  • Haga clic en Clasificar por tipo para mostrar los estilos por orden alfabético y según el tipo de estilo.

Puede separar los estilos que están agrupados para que pueda trabajar más fácilmente con ellos.

Para mostrar por separado cada selector de los estilos que contienen varios selectores

• En la ventana Administrar estilos, haga clic en Opciones y luego en Separar selectores agrupados.

También puede especificar qué estilos desea mostrar en la ventana Administrar estilos.

Para mostrar u ocultar estilos en la ventana Administrar estilos

• En la ventana Administrar estilos, haga clic en Opciones, haga clic en Clasificar por orden y, a continuación, siga este procedimiento:

  • Haga clic en Mostrar todos los estilos para mostrar todos los estilos que están incluidos en hojas de estilos externas, que están en la página y que son reglas de estilo insertadas en la página actual.

  • Haga clic en Mostrar estilos utilizados en la página actual para mostrar sólo los estilos que se utilizan en la página actual.

  • Haga clic en Mostrar estilos utilizados en la selección para mostrar sólo los estilos que se utilizan en la selección actual de la página.

Vea también

Conceptos

Cómo: Usar la ventana Propiedades de CSS

Cómo: Usar la barra de herramientas Aplicación de estilo directo