Panel de tareas Aplicar estilos

El panel de tareas Aplicar estilos permite aplicar, quitar, modificar y eliminar estilos y cambiarles el nombre; adjuntar o desasociar hojas de estilos en cascada (CSS) externas; seleccionar todas las apariciones de un estilo e ir al código que contiene el conjunto de reglas de un estilo. El panel de tareas Aplicar estilos muestra cada estilo de acuerdo con las reglas del mismo, para que pueda identificar rápidamente el estilo con el que desea trabajar simplemente por su apariencia visual.

Cuando se abre una página web, el panel de tareas Aplicar estilos enumera los estilos que están definidos en todas las hojas de estilos en cascada (CSS) de la página, incluidas las CSS externas, internas y en línea. Los selectores basados en clases e Ids. aparecen debajo del nombre del archivo .css externo que contiene el estilo o en Página actual, si el estilo está en una CSS interna. Los selectores de elementos están organizados del mismo modo, pero aparecen bajo un encabezado independiente denominado Selectores contextuales debajo de la lista de selectores de clase y de Ids. Puede configurar el panel de tareas para que muestre todos los estilos o restringirlo de forma que muestre únicamente los que se usen en la página web actual o en la selección actual de la página. Independientemente de las opciones que haya seleccionado, los selectores de elementos y en línea sólo aparecen en el panel de tareas cuando se coloca el cursor en el contenido que usa ese estilo o se selecciona.

Puede ordenar la lista de estilos que aparecen en el panel de tareas Aplicar estilos y también restringir la lista para que sólo muestre los estilos que se usan en la página web actual o en la selección actual. Si un estilo concreto es difícil de ver con el fondo blanco del panel de tareas, puede seleccionar un color para que aparezca en el panel de tareas detrás de los estilos que no contengan una propiedad de fondo.

Sugerencia:
Para mostrar temporalmente todas las reglas de un estilo en una ventana flotante al lado del puntero, señale el estilo en el panel de tareas Aplicar estilos.

Panel de tareas Aplicar estilos

1. Borrar estilos quita todos los selectores de clases y en línea de la selección actual.

2. Página actual muestra los selectores de clases e Ids. de los archivos de CSS internas y de CSS externas importadas.

3. Archivo de CSS externa importada en la página web actual.

4. Estilo definido en la CSS interna de la página web actual.

5. Archivo de CSS externa vinculado desde la página web actual.

6. Se muestra un borde rectangular sólido alrededor de los estilos que se usan en la selección actual.

7. Selectores contextuales muestra los selectores de elementos que se usan en la selección actual.

8. Selectores de clase e Id. contenidos en el archivo CSS externo vinculado (events.css).

9. Cada estilo tiene un menú desplegable que permite realizar muchas tareas relacionadas con el estilo. Señale un estilo y haga clic en la flecha o haga clic con el botón secundario en un estilo.

Los iconos que aparecen junto a cada estilo en el panel de tareas Aplicar estilos identifican el tipo de estilo y si éste se usa en la página web actual.

Iconos del panel de tareas Aplicar estilos

Iconos	Descripción
	Un punto rojo aparece junto a los selectores de Id.
	Un punto verde aparece junto a los selectores de clases.
	Un punto azul aparece junto a los selectores de elementos.
	Se muestra un punto amarillo junto a los estilos en línea.
	Se muestra un círculo alrededor de un punto coloreado para marcar los estilos que se usan en la página web actual.
	Se muestra una arroba junto a las hojas de estilos en cascada externas importadas.

Procedimientos

Para ordenar la lista de estilos en el panel de tareas Aplicar estilos

• En el panel de tareas Aplicar estilos, haga clic en Opciones y siga uno de estos procedimientos:

  • Para mostrar los estilos de acuerdo con el orden en que aparecen en la CSS, seleccione Clasificar por orden.

  • Para mostrar los estilos alfabéticamente y de acuerdo con el tipo de estilo (selectores de clases o de Id.), seleccione Clasificar por tipo.

Para mostrar u ocultar los estilos en el panel de tareas Aplicar estilos

• En el panel de tareas Aplicar estilos, haga clic en Opciones y siga uno de estos procedimientos:

  • Para mostrar todos los estilos contenidos en la CSS externa, interna y en línea de la página web actual, seleccione Mostrar todos los estilos.

  • Para mostrar sólo los estilos que se usan en la página web actual, seleccione Mostrar estilos utilizados en la página actual.

  • Para mostrar sólo los estilos que se usan en la selección actual de la página, seleccione Mostrar estilos utilizados en la selección.

  [!NOTA]

  Los selectores de elementos y los estilos en línea sólo aparecen en el panel de tareas Aplicar estilos cuando se coloca el cursor en contenido que usa el estilo o se selecciona contenido que usa el estilo.

Para mostrar un fondo en color en el panel de tareas Aplicar estilos detrás de los estilos que no contienen una regla de propiedad de fondo

1. En el panel de tareas Aplicar estilos, haga clic en Opciones y seleccione 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.

Vea también

Conceptos

Panel de tareas Administrar estilos

Panel de tareas Propiedades de CSS

Introducción a las herramientas de las hojas de estilos en cascada

Aplicar un estilo

Estilos